So first of all let me tell you what actually is a JSX !

A JSX(JavaScript XML) is a syntax extension to JavaScript. It is used with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

Here is an Example :

const element = <h1>Hello, world!</h1>;

It is pretty similar to HTML syntax. 🐱‍👤

Why do we need 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. ~ React 😎

• This is what was said by react developers when it was first announced, in my opinion this is a very useful syntax extension to JavaScript, it has made things very easy to configure and manage in a very large code base.

• It makes it easier for us to create templates.

The main difference between HTML and JSX 🤯

1) HTML is a Hypertext Markup Language, the standard markup language for documents designed to display and view on the web in a web browser.

2) JSX JSX (JavaScript + XML) is an extension of JavaScript that permits you to write down HTML directly within JavaScript

3) HTML elements have attributes where as JSX elements have props.

Attributes in JSX

JSX allows us to use attributes with the HTML elements just like we do with normal HTML. But instead of the normal naming convention of HTML, JSX uses camelCase convention for attributes

THIS WAS A BASIC PREVIEW OF WHAT IS THE MAIN USE OF JSX, IF YOU WANT TO GO IN DEPTH OF THIS TOPIC THEN CHECK OUT THE FOLLOWING BLOG

https://reactjs.org/docs/introducing-jsx.html

Bonus Meme 😂

Happy Coding 🚀