JSX & Rendering

What this module covers

4 steps · React

1. Step 1. JSX & Rendering

   JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. Babel compiles it to React.createElement() calls. const name = "Alex"; const el = <h1>Score for {name}: {score * 2}</h1>; JSX rules: use className not class, htmlFor not for, self-close empty tags (<img />), and a component must return a single root element (or a Fragment). Conditional rendering: {isLoggedIn ? <Dashboard /> : <Login />} // ternary — two outcomes {hasError && <ErrorBanner msg={error} />} // && — optional content if (loading) return <Spinner />; // early return — full branches Fragments avoid extra wrapper divs in the DOM: function Meta() { return ( <> <title>My App</title> <meta name="desc" /> </> ); }

   Conditional rendering is just regular JavaScript running inside curly braces — no special JSX syntax, which is part of why JSX composes so naturally with the rest of the language. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Use a ternary to render one of two states based on the online prop.

2. Step 2. Quiz: JSX & Rendering

   Answer these questions about JSX syntax and conditional rendering.

   Curly braces embed any JS expression in JSX; className replaces class; Fragments group elements without an extra DOM node. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Answer the quiz below.

3. Step 3. Conditional Status Badge

   Create a StatusBadge component. If status is 'online' show a green badge, 'away' shows yellow, 'offline' shows grey. Use conditional rendering.

   A lookup object keyed by the prop value is often cleaner than a chain of ternaries once you have three or more branches. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does StatusBadge branch on all three status values?

4. Step 4. Mini project: JSX & Rendering

   Create a StatusBadge component. If status is 'online' show a green badge, 'away' shows yellow, 'offline' shows grey. Use conditional rendering. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   A lookup object keyed by the prop value is often cleaner than a chain of ternaries once you have three or more branches. This project stage asks you to apply the same idea without step-by-step scaffolding. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does StatusBadge branch on all three status values?