DEV Community

loading...

All About React

Rahul Saha
Hi, my name is Rahul Saha. I am a Web Developer.
・2 min read

React JSX: react jsx is neither a string nor an HTML tag. It's a powerful thing where we can use all javascript power. We can create HTML elements using javascript.

let element = document.createElement("h3")
element.innerText = "hi Rahul"
document.getElementById("app").appendChild(element)
Enter fullscreen mode Exit fullscreen mode

In this process, we can create Html element using js. In the backend react is automatically creates the element in this process.

import React from 'react';
const element = React.createElement('h1', null, "Hello Rahul");
Enter fullscreen mode Exit fullscreen mode

Here element is a valid JavaScript object. so we can do anything with it. We can write in a more simple way like this

import React from "react";
const element = <h3>Hello Rahul</h3>;
console.log(element);
Enter fullscreen mode Exit fullscreen mode

Now JSX means javascript XML that looks like this up code and this conversion happen using babel
We can use javascript in jsx inside {} notation . We can set attribute in jsx like HTML tag.

ReactDOM.render(element,  document.getElementById("app"))
Enter fullscreen mode Exit fullscreen mode

this line shows the react element in the HTML page. if we change the element like then the code looks like

import React from "react";
import ReactDOM from "react-dom";
setInterval(() => {
const element = (
<h3 className="h3">
<span>
Hi Rahul
{Date()}
</span>
</h3>
);
ReactDOM.render(element, document.getElementById("app"));
}, 1000);
Enter fullscreen mode Exit fullscreen mode

Browser DOM:
Alt Text
This is the HTML rendering process in the browser. If we change something on the page it will rerender the page each change. So if we rerender the page it will slow the browser.

Batch update: Batch update is an update process where first all update happens then render the page at last.

Virtual DOM: In this process, a replica of the main dom is created and which is a javascript object. If something is changed in the dom react graph the change using reconciliation algorithm and find the change.
Alt Text

useState(): useState is a function that controls the state of the react component. Here state means the data that change for each update. This is called the state of a react element.

Discussion (0)