What is JSX and how does it work in React?

JSX (JavaScript XML) is a syntax used in React that lets us write HTML-like code inside JavaScript.

It is mainly used to make React code simpler and more readable.

Even though it looks like HTML, JSX is not HTML.

Behind the scenes, JSX is converted into JavaScript using Babel:

How JSX works (Simple Flow):

1. Developer writes JSX
2. Babel converts JSX into React.createElement
3. React creates Virtual DOM elements
4. Browser renders the UI

Important JSX Rules :

• JSX must return one parent element
• JavaScript expressions go inside { }
• Use className instead of class
• JSX prevents injection attacks by escaping values

Why JSX is preferred

• Improves readability
• Keeps UI and logic together
• Easier to maintain large applications