What Is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. React has a few different kinds of components, but we should start with React.Component subclasses
React components implement a render() method that takes input data and returns what to display. It uses an XML-like syntax called JSX but JSX is optional and not required to use React. There are two types of data that control a component: props and state.
Installing React JS
Type following commands to install reactjs on ubuntu:
  • sudo apt-get install curl
  • sudo apt-get install -y nodejs
  • node -v
  • npm -v
  • sudo apt-get install -y build-essential
  • sudo npm install -g create-react-app
  • create-react-app hello-world
  • cd hello-world
  • npm start
Result:

React Props

Most components can be customized when they are created, with different parameters. These creation parameters are called props.
Props is an Input data that is passed into the component can be accessed by render() method.
props are set by the parent and they are fixed throughout the lifetime of a component. In Tic Tac Toe Example value is the property:
class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

 class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

   render() {
    const status = 'Next player: X';

     return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

React State

For data that is going to change, we have to use state. In general, you should initialize state in the constructor, and then call setState when you want to change it (accessed via this.state). When a component’s state data changes, the rendered markup will be updated by re-invoking render(). props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).
State is similar to props, but it is private and fully controlled by the component.
https://www.tutorialspoint.com/reactjs/reactjs_state.htm
https://micropyramid.com/blog/understanding-reactjs-component-state-props/

React JSX

React uses JSX for templating instead of regular JavaScript: https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm

HOC
Is Higher Order Component. 
when the component accepts a component as input and returns a component as its output.
In general, higher order components allow you to create code that’s composable and reusable, and also more encapsulated.
We always try to name our HOC component with With keyword. Like withRouter, withAuth etc. Which is just an convention.
Simple example of HOC
const withButton= Button => () => <Button />
In the above example a function named withButton is accepting a component i.e Button and returning it without modification.

State management Library

Redux, Mobx and context

Reference documents