React Tutorial

What is React?

React is an open-source front-end JavaScript library that's utilized for building component bassed client application

• React is especially used for Single page application
• It is used for handling View layer of Web Application and Mobile app.
• React Uses JSX syntax. JSX is as syntax extension of JS that allow developers to write HTML in their JS Code
• React uses Virtual Dom instead of Real DOM.
• Real DOM manipulation are expensive.
• React uses reusable UI Components to develop the view.

What is JSX?

JSX stands for JavaScript XML and it is an XML-Like extension to ECMA Script. Basically it provide the syntax for the Below Function.

React.createElement(type, props,... children)

In the below example the text inside <h1> tag is returned as JavaScript function to render function.

export default function App(){
return(
    <h1>{"Hello this is JSX code!"} </h1>
  );
 }

If you don't use JSX syntax then the respective JavaScript code should be written as below.

Functional Component

  import {createElement} from 'react';
  export default function App(){
     return createElement(
      'h1',
      {
     className:'greeting'},
      'Hello, This is a JSx Code'
    );
  }

Class Component

  class App extend React.Component{
     render(){
      return(
     <h1>"{Hello, This is a JSx Code}</h1>
    );
  }
 }