If you are diving into React, you have likely encountered a strange hybrid of HTML and JavaScript called JSX. At first glance, it might feel unnatural to write markup directly inside your JavaScript files, but it is one of Reacts most powerful features.
In this article, we will break down what JSX is, how it works behind the scenes, and the modern syntax you will use every day to build React applications.
1. JSX vs. JS: How Babel Works Its Magic
JSX (JavaScript XML) is a syntax extension for JavaScript. It allows you to write HTML-like code directly inside your JavaScript files. However, browsers have no idea how to read JSX. If you tried to run JSX in Google Chrome without compiling it first, it would throw a syntax error.
This is where Babel comes in. Babel is a JavaScript compiler that transforms modern JS (and JSX) into standard JavaScript that any browser can understand.
Behind the Scenes: When you write JSX, Babel converts it into a series of React.createElement() calls (or _jsx() in newer versions of React).
The JSX Way:
JavaScript
const element = <h1 className="greeting">Hello, world!</h1>;
What Babel Turns It Into (Standard JS):
JavaScript
const element = React.createElement(
'h1',
{ className: 'greeting' },
'Hello, world!'
);
JSX is essentially just syntactic sugar. It makes writing and reading UI code much easier compared to writing nested createElement functions manually!
2. Basic JSX Syntax
Writing JSX is similar to HTML, but with a few key differences.
Elements
An element is the smallest building block of React apps. It describes what you want to see on the screen.
JavaScript
const title = <h1>Welcome to React</h1>;
Attributes
In JSX, attributes are written in camelCase instead of standard HTML casing. For example, class becomes className (because class is a reserved keyword in JavaScript), and tabindex becomes tabIndex.
JavaScript
const image = <img src="logo.png" className="app-logo" alt="React Logo" />;
Expressions
You can embed any valid JavaScript expression inside JSX by wrapping it in curly braces {}. This allows you to render dynamic data.
JavaScript
const name = "Alice";
const greeting = <h2>Hello, {name}! 2 + 2 is {2 + 2}.</h2>;
3. The Anatomy of App.js
When you create a new React project, the App.js file is usually the root component of your application. Let's break down its structure:
JavaScript
// 1. The Component Function
function App() {
// 2. The Return Statement
return (
<div className="App">
<h1>My First React App</h1>
</div>
);
}
// 3. The Default Export
export default App;
The Function (function App()): In modern React, components are just regular JavaScript functions that return JSX.
The return Statement: This tells React what UI to render. Notice the parentheses () after return? These are required if your JSX spans multiple lines to prevent JavaScript's automatic semicolon insertion from breaking your code.
export default App;: This makes the App function available to be imported and used in other files (like your index.js file, which injects it into the actual DOM).
4. Modern React Syntax Arsenal
To write clean and efficient React code, you will rely heavily on standard modern JavaScript features.
Arrow Function Expressions
Instead of the standard function keyword, most developers use ES6 arrow functions for their components. It's shorter and cleaner.
JavaScript
const App = () => {
return <h1>Hello using Arrow Functions!</h1>;
};
Props (Properties)
Props are how you pass data from a parent component down to a child component. They act just like arguments passed to a regular function.
JavaScript
const Welcome = (props) => {
return <h1>Hello, {props.name}</h1>;
};
// Usage:
const App = () => <Welcome name="John" />;
Fragments
React requires that a component returns a single parent element. If you want to return multiple elements without wrapping them in an unnecessary <div> (which clutters your DOM structure), you use a Fragment. You can use <React.Fragment> or the shorthand <>...</>.
JavaScript
const UserProfile = () => {
return (
<>
<h2>User Name</h2>
<p>User Bio goes here.</p>
</>
);
};
Spread Operators
The spread operator (...) is incredibly useful for passing an entire object of properties to a component all at once.
JavaScript
const UserInfo = ({ name, age, role }) => (
<p>{name} is {age} years old and works as a {role}.</p>
);
const App = () => {
const userData = { name: "Sarah", age: 28, role: "Developer" };
// Using spread operator to pass all properties as props
return <UserInfo {...userData} />;
};
Conditional Rendering
You cannot use standard if/else statements directly inside your JSX structure. Instead, you use the ternary operator (? :) or the logical AND (&&).
JavaScript
const Dashboard = ({ isLoggedIn, unreadMessages }) => {
return (
<>
{/* Ternary Operator for if/else logic */}
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
{/* Logical AND for if-true-then-render logic */}
{unreadMessages > 0 && <p>You have {unreadMessages} new messages!</p>}
</>
);
};
Iterating Over Lists
To render a list of items, you use the JavaScript .map() array method.
Important: When rendering arrays in React, you must provide a unique key prop to each item so React can efficiently track and update the DOM.
JavaScript
const ShoppingList = () => {
const items = [
{ id: 1, name: 'Apples' },
{ id: 2, name: 'Bananas' },
{ id: 3, name: 'Cherries' }
];
return (
<ul>
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};
Conclusion
Mastering JSX and modern React syntax is the first major milestone in your React journey. While writing HTML inside JavaScript might feel strange initially, understanding that it is all just syntactic sugar compiled by Babel takes the mystery out of the process.
By leveraging modern JavaScript features like arrow functions, spread operators, and array methods like .map(), you can write clean, declarative, and highly reusable UI components. The concepts we have covered in this blueprint—from the anatomy of App.js to conditional rendering—form the foundation of almost every React application you will ever build.
Now that you have a solid grasp on how to structure your components and pass static data using props, you are perfectly positioned for the next big step: bringing your applications to life by managing interactive data using React State!
Join the conversation! Your thoughts help the community grow.