Overview-JSX in React JS
We are aware that React is a popular JavaScript library for constructing user interfaces. One of React’s core concepts is JSX.
JSX isn’t an independent language or template engine; rather, it serves as a JavaScript Extension Syntax within React, allowing us to seamlessly combine HTML and JavaScript for coding convenience.
What is Jsx in React ?
JSX is stand for JavaScript XML. It enables you to incorporate code that resembles HTML directly into your JavaScript code, simplifying the process of describing the structure and arrangement of UI components.
Put differently, JSX offers a more intuitive and declarative approach to defining the structure of React components, and curly braces {} to embed JavaScript expressions within the JSX code.
Each piece of JSX code gets transformed into a corresponding React.createElement function call that the browser can comprehend
JSX has some rules and features that you should know, such as:
- You can write expressions inside curly braces { }.
- You must wrap your HTML code in one top level element.
- You must wrap your HTML code in one top level element.
- You can also wrap the HTML code in React.Fragement tag.
- You can use React.createElement instead of JSX if you prefer.
- To use JSX in React, you have to import ‘react’ on the top of the component.
How to Add JavaScript Code in JSX ?
To add JavaScript code inside JSX, we need to write it in curly brackets .This is called JSX Expression syntax.
