React is an open-source JavaScript framework developed at Facebook for building user interfaces. It is used at facebook in the production environment. Instagram has been built using this framework. It is fast, scalable, flexible, powerful, and has a robust developer community that is rapidly growing. It can be used on the client side as well as on the server side.

Another fact about the React’s is Virtual DOM which selects the specific node of the DOM and perform the DOM manipulation to update those elements which results in enhancing the overall performance.

Here are a few reasons why to choose React

React is fast: Apps made in React can handle complex updates and still feel quick and responsive.

React is modular: Instead of writing large, dense files of code, you can write many smaller, reusable files. React’s modularity can be a beautiful solution to JavaScript’s maintainability problems.

React is scalable: Large programs that display a lot of changing data are where React performs best.

React is flexible: You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React’s potential.

React is popular: While this reason has admittedly little to do with React’s quality, the truth is that understanding React will make you more employable.

The Basics

React’s consists of blocks known as components. Here is an example:

   React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('myDiv')
    );

Components
React’s uses render method to invoke the components and binds the components with the DOM node. Below is an example:

function Clock(props) {
 return (
        <div>
<h1>Hello, world!</h1>
        <h2>It is {props.date.toLocaleTimeString()}.</h2>
        </div>
 ); 
} 
ReactDOM.render(
     <Clock date={new Date()} />,
     document.getElementById('root') 
);

Or we can also use the Class method to create custom component classes.

class Clock extends React.Component {
 render() {
  return (
   <div>
    <h1>Hello, world!</h1>
    <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
   </div>
  );
 }
}

Props
Props are the attributes that can passed to the components. It is accessed using this.props within the components and can be used to render dynamic values in the render method.

class Welcome extends React.Component {
 render() {
  return <h1>Hello, {this.props.name}</h1>;
 }
}

Specs, Lifecycle & State
React has in-built lifecycle methods which can be used with components.

These are as follows:

componentWillMount: This method can be invoked on both client and server sides before the DOM renders.

componentDidMount: This method can be invoked on the client side after the DOM renders.

shouldComponentUpdate: It updates the component based on the return value.

componentWillUnmount: It is invoked before unmounting the component.

class Clock extends React.Component {
 constructor(props) {
       super(props);
       this.state = {date: new Date()};
 }
 componentDidMount() { }
 componentWillUnmount() { }
 render() {
       return (
       <div>
       <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
       </div>
       );

State
React components have built in state object which can be used to initialize and update DOM elements.

Below is an example to explain the state:

 
class Clock extends React.Component {
 constructor(props) {
       super(props);
       this.state = {date: new Date()}; //state constructor
 }
 
 render() {
       return (
       <div>
       <h1>Hello, world!</h1>
       <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
       </div>
       );
 }
}

Using the setState method, state may contain several independent variables:

 
componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

Events
Events handling in react works similar to the DOM events. These events can be invoked method and play role of props of components.

Below is an example explaining the events.

 
function ActionLink() {
function handleClick(e) {
	e.preventDefault();
	console.log('The link was clicked.');
  }
  return(
        <a href="#" onClick={handleClick}>
        Click me
        </a>	
  );
}

Conditional Rendering
Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements.

 
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
	return ;
  }
 
  return ;
}
ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,

Forms
HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state.

Below is an example to log the name when it is submitted

 
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
     <form onSubmit={this.handleSubmit}>
     <label>
      Name:
      <input type="text" value={this.state.value} onChange={this.handleChange} />
     </label>
     <input type="submit" value="Submit" />
    </form>
  );
 }
}