ReactJS Main Concept: JSX and Rendering element

Introducing JSX

The above syntax is not a string or html, it is called JSX , which is a javascript syntax extension. JSX creates react elements, which are used to describe the structure of the UI output.

JSX Syntax

The syntax for writing JSX is quite simple, as it is based on XML syntax:

where nodename is the name of the tag, it can be the available html tags or we define it.

JSX is not html, so ReactDOM will use camelCase to declare properties instead of HTML attributes, eg class of html will be className of JSX:

Why JSX?

Using JSX in reactJS is optional. However, there are many reasons why we want to use it rather than just using js, for example:

• JSX has a syntax similar to XML, so it is easier to define and manage complex structured components.
• JSX is closer to JS, doesn’t change the semantics of JS

Embedding Expressions in JSX

We can embed any JS expression in JSX by using curly braces {} . For example, we define a variable as name and use it in JSX:

Or another example, embed JS function formatName(user) in <h1> tag

JSX is an Expression Too

JSX itself is also an expression, which means we can use it in common logic like if else, loop, assign to variable, return value …

Specifying Attributes with JSX

We can use double quotes to specify string literals:

Or curly braces to embed js expression in attribute:

Specifying Children with JSX

With a blank tag, we can close immediately with /> , as with XML:

To define a sub-tag for JSX, we can write the following:

JSX Prevents Injection Attacks

We can embed user input data into JSX without fear of injection related problems. Because by default the React DOM will escape values ​​embedded in JSX, converting all to strings before they are rendered. This is to prevent the risk of an XSS (cross-site-scripting) attack.

Rendering Element

Rendering an Element into the DOM

Suppose we have 1 div tag:

We call it the root DOM because everything inside it will be managed by the React DOM. Apps built with React only usually have only 1 root DOM node. If the case of adding React to an already existing app, we can have as many DOM root as we want.

To render the React element into a root DOM, we will use ReactDOM.render()

Updating the Rendered Element

React elements are immutable. That is, we cannot change child elements or their properties after being initialized. Each react element is like a scene in the movie, it represents the UI at a certain time, so to update the UI there is only a way to add a new element, then pass ReactDOM.render()

Check out the example below:

ReactDOM will render a new element every 1 second.

React Only Updates What’s Necessary

ReactDOM will compare element (and its children) with the old element before it, and update only the necessary DOMs:

Although above we create a new element every time we call the tick function, only the modified nodes will be updated by ReactDOM.

Summary

This article aims to introduce 2 of the main concepts of ReactJS: JSX and Rendering . Thank you for your time.

Source:

• https://reactjs.org/docs/introducing-jsx.html
• https://reactjs.org/docs/rendering-elements.html