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. Next: Lesson 4 — React State and useState.

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.