#1.React and ReactDOM

React and ReactDOM :

React is a javascript library. React allows to create reusable ui components with functionality. React is scaleable. We change the state like increment the number of state at the same time react update the dom. We don't need to access manually the dom and update the dom.

This React library generates HTML

import React from "react" //create element
const divElement = React.createElement("div", null, "hellow world")

This ReactDOM render the HTML in the #root div of browser.

import ReactDOM from "react-dom"
ReactDOM.render(divElemnt, document.getElementById("#root"));

Babel: Web pack like Babel compile the jsx into React.createElement because javascript can't understand jsx.

// jsx
<div className="newDiv">
  <p className="para">This is paragraph</p>
  <p className="para">Let's checkout</p>
</div>
// jsx to react
React.createElement("div", {
  className: "newDiv"
}, React.createElement("p", {
  className: "para"
}, "This is paragraph"), React.createElement("p", {
  className: "para"
}, "Let's checkout"));