Feed Reader BotФотография
DEV Community: react
React Mastery Series – Day 4: Understanding JSX – The Language of React
Welcome back to the React Mastery Series!
In the previous article, we set up our React development environment using Vite and explored the project structure.
Today, we'll learn one of the first concepts every React developer encounters: JSX.
At first glance, JSX looks like HTML inside JavaScript—but there's much more happening behind the scenes. What is JSX? JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write UI code in a way that closely resembles HTML.
Instead of creating elements using JavaScript APIs, JSX lets you describe your UI in a clean and readable format.
Without JSX: const element = React.createElement( "h1", null, "Welcome to React!" ); With JSX: const element = h1>Welcome to React!h1>; Both snippets produce the same result, but JSX is far more readable and maintainable. Is JSX HTML? This is one of the most common misconceptions. JSX is not HTML.
It looks similar to HTML, but it is actually JavaScript syntax that gets transformed into JavaScript function calls during the build process.
For example: const heading = h1>Hello, React!h1>; is compiled into something similar to: const heading = React.createElement( "h1", null, "Hello, React!" ); With the modern React compiler, this transformation happens automatically, so you rarely need to think about it. Why Does React Use JSX? Imagine building a complex dashboard using only React.createElement().
The code would quickly become difficult to read and maintain.
JSX solves this by making your UI resemble its final structure.
Benefits include:
* Improved readability
* Easier debugging
* Better developer experience
* Seamless integration of JavaScript expressions
* Cleaner component composition Embedding JavaScript in JSX One of JSX's greatest strengths is that you can embed JavaScript expressions using curly braces {}.
Example: const name = "Siva"; function App() { return h1>Welcome, {name}!h1>; } You can also use:
* Variables
* Function calls
* Mathematical expressions
* Conditional expressions
Example: const price = 500; p>Total: ₹{price * 2}p> React evaluates the JavaScript expression before rendering the UI. What Can Be Written Inside {}? Valid examples: {name} {age + 1} {isLoggedIn ? "Logout" : "Login"} {items.length} {calculateTotal()} Invalid examples: if (isLoggedIn) {} for (...) {} while (...) {} Statements are not allowed inside JSX—only expressions. JSX Requires a Single Parent Element A React component must return one parent element.
❌ Incorrect: return ( h1>Helloh1> p>Welcome!p> ); ✅ Correct: return ( div> h1>Helloh1> p>Welcome!p> div> ); Alternatively, you can use a Fragment. What is a Fragment? Sometimes, adding an extra isn't necessary.
React provides Fragments to group elements without creating an additional DOM node. return ( h1>Helloh1> p>Welcome!p> ); Fragments help keep the DOM clean while satisfying React's requirement for a single parent element. JSX Attributes JSX attributes are similar to HTML attributes but follow JavaScript naming conventions.
For example:
HTML JSX class className for htmlFor onclick onClick tabindex tabIndex
Example: button className="primary">
Save button> React uses camelCase for most DOM properties. Self-Closing Tags In JSX, elements without children must always be self-closed.
Correct: img src="logo.png" /> input type="text" /> br /> Incorrect: img> input> br> This rule often catches beginners by surpri[...]