5 questions foundWhat is JSX and why do React developers use it?
Beginner JSX is a special syntax that lets you write HTML looking code directly inside your JavaScript files. It makes it much easier to see what a component will look like on the screen, and it gets converted into regular JavaScript function calls before the browser ever sees it.
function Greeting() {
return <h1>Hello, welcome to our site</h1>;
}
// This is converted behind the scenes into something like:
// React.createElement('h1', null, 'Hello, welcome to our site');
Real-world example A team building a product page writes JSX that looks almost exactly like the final HTML, making it easy for both developers and designers to understand what the page will show.
Common follow-ups: What are the rules for writing valid JSX, such as needing one single parent element?;Can you write plain JavaScript logic like a for loop directly inside JSX?
Component Composition & Children Props;Props & State
What is a React component and what are the two main types?
Beginner A component is a reusable piece of the user interface, like a button, a form, or an entire page. Today almost all components are function components, which are plain JavaScript functions that return JSX. The older type, class components, are rarely used in new code but still exist in some older projects.
function WelcomeMessage({ name }) {
return <h1>Welcome, {name}</h1>;
}
<WelcomeMessage name="Sarah" />
Real-world example An online store builds a single ProductCard component and reuses it dozens of times across the homepage, each time simply passing in different product details.
Common follow-ups: What is the difference between a component and a regular HTML element?;Why must a component's name always start with a capital letter?
Component Composition & Children Props;Props & State
How do you embed a JavaScript expression inside JSX?
Intermediate You wrap any JavaScript expression in a single pair of curly braces directly inside your JSX. This lets you display variables, call functions, or run small calculations right where you want the result to appear on the screen.
function Total({ price, quantity }) {
return <p>Total: ${price * quantity}</p>;
}
<Total price={10} quantity={3} /> // shows: Total: $30
Real-world example A shopping cart component uses curly braces to calculate and display the total price of an item directly inside the JSX, updating automatically whenever the quantity changes.
Common follow-ups: Can you put an if statement directly inside curly braces in JSX?;What happens if you try to display a plain JavaScript object inside JSX?
Conditional Rendering & Lists (Keys);Props & State
Why does JSX require every element to have exactly one parent element or a Fragment?
Intermediate Under the hood, JSX is converted into a single function call that returns one value, so it cannot return two separate elements sitting side by side. Wrapping everything in one parent div, or using a Fragment when you do not want an extra element in the final HTML, solves this requirement.
// This causes an error, two elements with no single parent
// return (<h1>Title</h1><p>Text</p>);
// Correct, wrapped in a Fragment
return (
<>
<h1>Title</h1>
<p>Text</p>
</>
);
Real-world example A component needs to return a heading and a paragraph without adding an extra wrapping div that might mess up the page's CSS layout, so the team uses a Fragment instead.
Common follow-ups: What is the shorthand syntax for a Fragment, and when can you not use it?;Why might using an extra div instead of a Fragment sometimes break a page's styling?
Portals & Fragments;Components & JSX
How do you add a CSS class to an element in JSX, and why is the attribute name different from regular HTML?
Beginner In JSX you use className instead of class, because class is already a reserved word in JavaScript used for defining classes. Everything else about applying a CSS class works exactly the same as in regular HTML.
function Button() {
return <button className="primary-button">Click Me</button>;
}
/* In your CSS file */
.primary-button {
background-color: blue;
color: white;
}
Real-world example A team styling their app's buttons uses className to apply a shared primary button style, keeping their JSX consistent with how normal HTML and CSS work together.
Common follow-ups: What other HTML attribute names are different or renamed in JSX?;How would you apply more than one CSS class to a single element in JSX?
Styling in React (CSS Modules Styled Components & Tailwind);Components & JSX