Fullstack CourseLearn by building

react · source-driven

Your first component

React apps are made of components — JavaScript functions that return markup. Nest them like you nest modules, but the unit is UI.

Official docs: react.dev/learn — Creating and nesting components

You will learn

  • How to create a component as a function that returns JSX
  • How to nest components inside other components
  • Why component names must start with a capital letter

Components are functions that return markup

From the React docs: a component is a piece of the UI with its own logic and appearance. The smallest example is a function that returns JSX:

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

Nesting components

Once declared, nest MyButton inside another component. Notice the capital letter — that is how React distinguishes components from DOM tags.

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

Live result (same pattern as the docs)

Welcome to my app

Recap

  • A component is a JavaScript function that returns markup
  • You nest components by writing them as JSX tags
  • Component names must start with a capital letter
  • export default marks the main component of the file

Challenge

Try this

Create a TicketBadge component that returns <span>open</span>, and nest it next to the button above in this file. Keep the capital letter rule.