What JSX is in [React] beginner guide

JSX (JavaScript XML) is a file type used by React which allows you to write javascript along with HTML.

We can say JSX is a friendship between javascript and HTML which makes its syntax easier to understand and make the application robust.

Let’s Understand JSX With An Example:

Let’s declare a variable called smartphone and company and then use it inside JSX by wrapping it in the curly brace.

const smartphone = “Samsung S21”

const company= “SAMSUNG”

const JSXelement = <h1>Yo are using, {smartphone}! Manufactured by {company}</h1>

BABEL:

Babel is a popular tool for using the newest features of the JavaScript programming language, it’s a JS transcompiler used to convert ES-6 code into the backward-compatible version of javascript that can be run by older browsers.

As the browser can’t understand JSX directly so Babel converts our code and make it understandable for the browsers.