React 

              -Is a java script library for build user interfaces.

              -Used to create single page applications.

              -Allows us to create reusable UI components.

              -Every component in react goes through a life cycle of  events.

              -Developed and maintained by Facebook and Instagram.

              -Acts as view in MVC architecture.

              -Classes are considered as components.

              -Simplicity and aim to performance are main benefits.

                                            Main features in React

(01)One way data flow

Data flows parent component to child component only.

But action flows from child component to parent component only.



(02)Virtual DOM

React maintain a virtual DOM.

Continuously monitoring users actions.

Only the changed element re enter.



(03)JSX

JavaScript XML.

HTML like syntax.

Prevents cross site attacks.



--------------------------------------------------------------------------------------------------------------------------

                     How to print "Hello World" using React

class Test extends React.component{

           render(){

                     return <h1>  Hello World  </h1>;

           }

}

--------------------------------------------------------------------------------------------------------------------------

              How to setup React Environment to the machine

In terminal type and run those commands.

C:\Users\Your Name>npm install -g create-react-app





Give a project name (In here 'myfirstreact' is the project name).

C:\Users\Your Name>npx create-react-app myfirstreact





Run bellow command to move to the project directory.

C:\Users\Your Name>cd myfirstreact






Run this command to execute the react application.

C:\Users\Your Name\myfirstreact>npm start





Then new window will open in browser with newly created React application.
If it does not open, we want to type localhost:3000 in the browser and get the application.

Small React form 

class MyForm extends React.Component {
  render() {
    return (
      <form>
        <h1>Hello</h1>
        <p>Enter your name:</p>
        <input
          type="text"
        />
      </form>
    );
  }
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

                                       React Components

Components are reusable and independent bits of code. There are two types of components.

                                            (01).Class components

                                            (02).Function components.


Component name must be start with an upper case letter. As well component has to include extends React.Component statement.

The component also use render() method