React JSX and Components — Build Your First UI

This lesson covers React JSX and components — the core skills for building any React interface. You will learn JSX rules, write functional components, pass props, render conditionally, and combine everything in a small Greeting Card example.

Prerequisites: Lessons 1–2 (Introduction, Setup) with a Vite React project running locally. Estimated time: 45–55 minutes.

1. What Is JSX?

JSX (JavaScript XML) lets you write HTML-like markup inside JavaScript. React compiles JSX into React.createElement calls (or equivalent) that describe UI structure.

Example:

const element = <h1 className="title">Hello, JSX</h1>;

Important JSX rules:

• Use className instead of class (since class is a JavaScript keyword)
• Self-closing tags must end with /> — e.g. <img />, <br />
• Return a single parent element, or use a Fragment (<>...</>)
• Embed JavaScript expressions inside curly braces: {userName}, {2 + 2}
• Comments inside JSX: {/* comment */}

2. Functional Components

A component is a reusable function (or class) that returns JSX. Modern React uses function components almost exclusively:

function Welcome() {
  return <h2>Welcome to the React tutorial</h2>;
}

export default Welcome;

Use a component like an HTML tag: <Welcome />. Compose small components into larger ones — this is how React apps scale without spaghetti DOM code.

File naming convention: PascalCase for components (GreetingCard.jsx), camelCase for utilities (formatDate.js).

3. Props — Passing Data to Components

Props (properties) are read-only inputs from a parent component. Define them as function parameters:

function Greeting({ name, role }) {
  return (
    <div>
      <h3>Hello, {name}!</h3>
      <p>Role: {role}</p>
    </div>
  );
}

// Usage in App.jsx:
// <Greeting name="Kindson" role="Developer" />

Props make components reusable: the same Greeting component renders different content depending on what the parent passes. Never mutate props inside a child — treat them as immutable.

Default values (optional):

function Greeting({ name = 'Guest', role = 'Learner' }) {
  return <p>{name} — {role}</p>;
}

4. Conditional Rendering

Show different UI based on data using JavaScript expressions inside JSX:

function StatusMessage({ isOnline }) {
  return (
    <p>
      {isOnline ? 'You are online' : 'You are offline'}
    </p>
  );
}

Other patterns:

• Logical AND — {hasError && <p>Error occurred</p>}
• Early return — return different JSX from separate if branches before the main return
• Variable assignment — set let content = ... then render {content}

5. Rendering Lists (Preview)

Render arrays with .map() and always provide a stable key prop:

const lessons = ['Introduction', 'Setup', 'JSX'];

function LessonList() {
  return (
    <ul>
      {lessons.map((title, index) => (
        <li key={index}>{title}</li>
      ))}
    </ul>
  );
}

We cover lists and keys in depth in a future lesson. For now, remember that key helps React identify which items changed.

6. Fragments — Group Without Extra DOM Nodes

JSX requires one parent element. Wrapping in <div> adds unnecessary DOM nodes. Use a Fragment instead:

function TitleBlock() {
  return (
    <>
      <h1>React JSX and Components</h1>
      <p>Lesson 3</p>
    </>
  );
}

Long form: <React.Fragment>...</React.Fragment> — useful when you need a key on a fragment in a list.

7. Complete Example — GreetingCard

Create src/GreetingCard.jsx:

function GreetingCard({ name, title, isPremium }) {
  return (
    <article
      style={{
        border: '1px solid #e2e8f0',
        borderRadius: '8px',
        padding: '1.25rem',
        maxWidth: '320px',
      }}
    >
      <h2>{title}</h2>
      <p>Hello, <strong>{name}</strong>!</p>
      {isPremium ? (
        <span style={{ color: '#2563eb' }}>Premium member</span>
      ) : (
        <span>Free tier</span>
      )}
    </article>
  );
}

export default GreetingCard;

Update src/App.jsx:

import GreetingCard from './GreetingCard';

function App() {
  return (
    <main style={{ padding: '2rem', fontFamily: 'system-ui' }}>
      <h1>React JSX and Components</h1>
      <GreetingCard name="Kindson" title="Welcome" isPremium={true} />
      <GreetingCard name="Guest" title="Welcome" isPremium={false} />
    </main>
  );
}

export default App;

Run npm run dev and verify both cards render with different props. You have built a small, reusable react jsx components example.

8. Styling Components (Brief)

This lesson uses inline style={{ ... }} objects for clarity. In production you might use:

• CSS modules (Component.module.css)
• Tailwind CSS utility classes
• Styled-components or CSS-in-JS libraries

Styling choice does not change component structure — props and JSX work the same way.

9. Next Steps

You can now write functional components with JSX, props, and conditional rendering. Future lessons will cover useState, useEffect, forms, and fetching API data.

Series links: Lesson 1 · Lesson 2

Frequently Asked Questions

What is JSX in React?
JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. React compiles JSX into efficient JavaScript function calls.

What is the difference between props and state?
Props are read-only inputs passed from a parent component. State is mutable data managed inside a component (covered in a later lesson on hooks).

Why do I need keys in lists?
Keys help React identify which list items changed, were added, or removed — improving update performance and avoiding subtle bugs.