I started learning React last week. The most interesting part about learning react is reusing a framework as many times as you want. While doing the vanilla JS project it was, I experienced writing so many lines of code & for each of the functionality I need to write JS code & manipulating the Dom to represent in the browser. But while using react it's very simple & easy.

Just to create a table, I used a functional component and then applied the map method to get the data from the source file & in my return, it was just creating each cell & providing instructions to use the object key to get the value. That’s it. If I compare it with the Vanilla JS project then I can imagine how many lines of code I have written down. Then incorporating this functional component into the App.JS file so the browser can show the table.

JSX -

When I started learning to react the First topic that I become familiar with is JSX, and JavaScript XML. JSX is an extension to the JS language that adds a new kind of expression

-Which allows us to write HTML in React

-Place the code in the DOM without writing any code like (createElement() and/or appendChild () methods).

-Finally, JSX converts HTML tags into react elements.

Elements –

React elements are represented in the browser using the (“React.createElement”)API & call this API using JSX elements. The function signature is: “createElement(type, props, children)”.

Here, a react element actually contains JS object which is a type & props.

Type means what type of element is it? Div / p tag/ span etc

Props object – may contain arbitrary properties Plus a children (w which is not mandatory) property containing nested React elements.

Rendering –

In order to see our React elements on the browser, a rendering library has been used. In React basically, React DOM library for rendering React elements in the browser. The main API that is used is the rendering function to export it.

At the beginning of the JS file needs to install react-dom from npm. After that code can be imported. For example –render (element, document.querySelector('#app'))

Here what actually the meaning of the above code? The first argument is a create the element & second argument is the DOM node we chose to render into.

React can't render into the body node, but we can choose any node within the body. So here we are telling that we have a node name id=" app”, with a reference to it as “document.querySelector('#app')”. And finally telling to react renders the element inside the node app & shows it in the browser.