What is JSX?
JSX stands for JavaScript XML. It is similar in appearance to HTML, hence provides a way to easily write HTML in react.
React doesn't require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
1const element = <h1> Hello, React! </h1>;Embedding Expressions in JSX
In the example below, we declare a variable called name and then use it inside JSX by wrapping it in curly braces:
1const name = "Sujan Shrestha";
2const element = <h1> Hello,{name} </h1>;Try on codepen
Tip : Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. For example, class becomes className in JSX, and tabindex becomes tabIndex.
JSX Prevents Injection Attacks
It is safe to embed user input in JSX:
By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.
1const title = response.potentiallyMaliciousInput;
2// This is safe:
3const element=<h1>{title}</h1>;Then just start up the application with this command:
Tip : We recommend using the “Babel” language definition for your editor of choice so that both ES6 and JSX code is properly highlighted.