Why JSX ?

JSX stands for JavaScript XML, JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.

Is JSX, the only way to add HTML to JavaScript ?
No, you are not required to use JSX, but JSX makes it easier to write React applications.

Let us demonstrate this with example.

What our code would look like with JSX.

What our code would look like without JSX.

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. We will come back to components in a further section, but if you’re not yet comfortable putting markup in JS, this talk might convince you otherwise.

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.

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

Here are some external resources that you might helpful :-
1. React Organization
2. Github Repository of React
3. W3 School

Follow me on:-
GITHUB, TWITTER, INSTAGRAM

Checkout my previous story here.