Thinking in Components

React breaks an interface into small components. Each component is a function that returns markup, and React keeps the page in sync with the data.

A Component

A component is a function with a capitalised name. It returns JSX, which looks like HTML but is JavaScript.

function Welcome() {
  const name = "Amina";

  return (
    <section>
      <h1>Welcome, {name}</h1>
      <p>Today is {new Date().toLocaleDateString()}.</p>
    </section>
  );
}

export default Welcome;

JSX Rules

• Return one parent element.
• Close every tag, including <img />.
• Use className instead of class.
• Embed JavaScript in curly braces.

Render at the Root

Create a root and render your top-level component into it.

import { createRoot } from "react-dom/client";
import Welcome from "./Welcome";

createRoot(document.getElementById("root")).render(<Welcome />);

Practice

1. Build a component that shows your name and school.
2. Embed a calculation inside curly braces.
3. Explain why a component name must start with a capital letter.

Hands-on exercise

Create a ProfileCard component that shows:
1. A heading with a name.
2. A paragraph with a role.
3. A list of three skills.

Recap

Components are functions that return JSX. Keep them small and render one root component to start.