Any component that we will use in React JS will use JSX.

Example :-

You can or can’t use JSX in your React Js applications, its just a matter of convenience.

JSX helps in writing Javascript inside the html code using curly braces {}. After compilation JSX expressions become regular javascript function calls. We can use JSX inside the if-else statements, inside loops and we can also assign JSX as a value to any variable.

Due to some reserved keywords of Javascript, which are used as HTML attributes, JSX uses camelCase notation for specifying the attributes of a HTML element. For example, class as className, for as htmlFor, etc.

The singleton tags or void tags need to be closed inside the JSX code. Otherwise it will throw an error.

JSX also prevents injection attacks, as the ReactDOM coverts any value which is inside the JSX to strings before rendering them. This helps in preventing the cross-site-scripting attacks.

The post What is JSX in React Js? appeared first on MaXEster Technologies | Technical Blog.

.createRoot()

ReactDOM.createRoot() is used to create the root element, where all the HTML and CSS code will be rendered.

In a simple website, there will be only one root but it depends on the nature and complexity of the website.

.render()

.render() method is used on the root element to render the JSX code.

This is the place where all the code will be rendered.

Updating the rendered element

React elements are immutable, i.e. we can’t change them.

For updating the UI, we have to create a new root element, which we can render again to upadate the UI.

The post Why we use Render in React? appeared first on MaXEster Technologies | Technical Blog.