JSX in ReactJS

In this blog, am going to explain the JSX in REACT.

In this blog, am going to explain JSX in React.

JSX may remind you of a template language, but it comes with the full power of JavaScript.

By using JSX, we can write HTML structure in the same file that contains JavaScript code.

Example:

const name = “BRAHMA”;?

const great = <h1>HELLO, {name} </h1>;?

• The above code shows how JSX is implemented in React. It is neither a string nor HTML. Instead, it embeds HTML into JavaScript code.

How JSX works

 

JSX Prevents Injection Attacks

It is safe to embed user input in JSX:

const title = BRAHMA;
// This is safe:
const element = <h1>{title}</h1>;

React dom escapes any values ouput into the JSX before rendering them. Thus ensuring that you can never insert anything that is not explicitly written in your application. Everything is converted to a string before rendering. This helps prevent XSS (cross-site-scripting) attacks.

In the next article or blog, I will explain in detail how JSX works.

Thanks.