Category: React

Posted on

Understanding setState in React

You may be wondering why my call to setState does not mutate the state immediately, this is because setState calls are asynchronous and are usually bundled together to mutate state later.

But sometimes we need to use the state varaible after the set state this can be done by using the call back function supported in set state. In the code snippet below, i want to update the selectedFile state with file and have to print the file name. Usually the code would be like this

this.setState({selectedFile:file});
console.log(this.state.selectedFile.Name);
Code language: CSS (css)

The above code would definitely print either undefined or previous state of selected file. To avoid the above issue we can re write the above code as below and get desired result.

this.setState({selectedFile: file}, function () {
            console.log(this.state.selectedFile.Name);
Code language: JavaScript (javascript)
Posted on

What is webpack and why do we use it

Web pack is a static module bundler used in modern javascript applications. In react we use webpack alongside with babel to transpile the ES6 code to ES5 and provide the bundled js file in vanilla javascript which is understood by all browsers and works fine without any hastles.

Posted on

Call a function in child component from parent component in React

 

Consider the following parent component
Consider the following child component
As shown above we can make use of “ref” on child component and using this.refs we can call any function in the child component

 

Posted on

What is Babel

Babel is a Javascript transpiler which converts ES6 Javascript into plain vanilla Javascript ES5 which is understood by all browsers.

Here is a sample code in ES6

class Employee {}
var narendra = new Person

The above code in ES5 look like below

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Employee = function Employee() {
  _classCallCheck(this, Employee);
};

var narendra = new Person();
Posted on

JSX

JSX – JavaScript Syntax Extension

A preprocessor step that adds XML syntax to javascript.

  • It looks like XML/HTML
  • Defines a familiar syntax to define tree structure with attributes
  • It is not requires but makes things easier while writing react components.

     

The left side represents code written in JSX and right hand side is the corresponding javascript . Just to make a list of four colors you can see the amount of code we have to write if we are not using JSX.
Posted on

” Hello World ! ” using React JS

  • Create a document with .html extension, let it be index.html.
  • Now add title to the web page. In the body section create a div tag with id=’app’. We will then write react code which replaces the content here under div tag.

  • Add the react-dom and react js script files to the index.html
  • Add the react js script to be rendered in index.html 
  • Open the index.html in your browser. You should see Hello World! as below.
You have done your first react application
Posted on

Difference between ReactJS and React-Native

React-Native is a framework, whereas ReactJS is a java script library we can use to develop user interfaces. When we are using ReactJS in a project we need to choose a bundler like webpack, which we want to use in our project. React-Native is like a “go work” kind of thing . Here it comes with everything we need and it is very easy to setup,very fast and can be run in the terminal with just one command.