Introduction to React JS

React JS is a popular JavaScript Library for building User Interfaces, which has created by Facebook. With React Js we can build fast Single Page Applications or websites with React.

To start with React Introduction, lets answer the very basic question

Is React JS a Library or a Framework?

Answer to this basic and unclear question is, React is a Library and not a Framework. 

React Definition from its official site says - React is a Library for Building User Interfaces.

What is a Library ? 

Library in a very simple terms is nothing but a collection of codes, which can be used easily by developers e.g. JQuery is a library, we can simply use it. 

What is a Framework ?

Framework is a complete code package with its own libraries and functionalities. Framework has its own rules. E.g. Angular is a Framework 

 So React is a Library and can be used fully or partially in development of front end web application.

Why to Choose React js ?

Before we get into details we should understand why React is best choice.

Declarative

React makes it easy to create interactive UIs. Design simple views for every state of application, and When data changes React very efficiently update and render only the right components. Declarative UI makes our code more predictable and easier to debug. 

Component-Based

React enable us to build encapsulated components which manages their own state, then compose them to make complex UIs. Component logic is written in JavaScript instead of templates, this makes it easier for us to pass rich data through our app and keep state out of the DOM

Virtual DOM

This is one of the reason why react is fast. Each time when we make changes in the code, DOM  is completely updated and re-written, but with Virtual DOM React does following 

• React first create an Exact copy of DOM
• Then react find out which part of the DOM is new, and update only that in Virtual DOM
• React only copies the new part from Virtual DOM to Actual DOM, this avoids re-writing of the DOM

Virtual DOM makes web page much faster than a standard web page.

JSX - Syntax Extension to Java Script

JSX - Allows us to write HTML inside Java Script

Simplest JSX can be like this

 const element = <h1>Hello World!</h1>;

JSX is used to write HTML tags inside JavaScript. Later, the JSX code will be translated into normal JavaScript, by Babel.
React doesn’t have HTML files, HTML tags are rendered inside JavaScript.

With JSX vs Without JSX

We don't necessarily have to work with JSX, but it is recommended as JSX simplifies React and makes it easier to read. 

JSX is not a requirement for using React. Using React without JSX is especially convenient when you don’t want to set up compilation in your build environment. Anything you can do with JSX can also be done with just plain JavaScript

code written with JSX

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
   }
 }

  ReactDOM.render(
      <Hello toWhat="World" />,
      document.getElementById('root')
  );

code written with out JSX

class Hello extends React.Component {
  render() {
      return React.createElement('div', null, `Hello ${this.props.toWhat}`);
    }
  }

  ReactDOM.render(
    React.createElement(Hello, {toWhat: 'World'}, null),
    document.getElementById('root')
   );

• We can wrap the elements inside a parent HTML tag:

  class Test extends React.Component {
    render() {
      return (
        <div>
          <p>Hello</p>
          <p>World</p>
        </div>
      );
    }
  }
  

• We can use JSX inside for loops, if-else cases:

  render() {
      if(condition==true) {
          return <p>This text</p>;
      } else {
          return <p>Another text</p>;
      }
  }
  

• HTML attribute names like “class” becomes “className”, “tabindex” becomes “tabIndex” as camelCase.

  <div className="myClass"></div>
  

To create react app we follow the instructions

• React requires Node.js
• After installing Nodejs, open your Terminal or Command Prompt and type the following command to create your React app

npx create-react-app my-app
cd my-app
npm start