Week 4 - React Fundamentals

Why React?

Setting up a React project with Vite

Components

JSX

Props

Rendering lists

Conditional rendering

The mental model: how React renders (2)

Practice

Assignment

• Teachers

Front end Track

Components

A component is a JavaScript function that returns JSX. That's it. Every button, card, navigation bar, and page in a React app is a component. You build small components, compose them into bigger ones, and eventually you have a full UI.

Your First Component

// src/components/Header.tsx
function Header() {
  return (
    <header>
      <h1>Welcome to my app</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>
  );
}

export default Header;

Two rules you cannot break:

1. The function name must start with a capital letter. React uses this to distinguish your components from regular HTML tags. <Header /> is your component. <header> is the HTML element.
2. The function must return JSX (or null if it should render nothing).

Everything else you know about JavaScript functions applies here — default parameters, destructuring, helper functions, all of it.

<aside> 💡

Info

You'll see two ways to write components in the wild: function declarations (function Header() {}) and arrow functions (const Header = () => {}). Both work. We'll use function declarations by default — they're easier to read and debuggers show the function name in error messages.

</aside>

One Component Per File

Convention: one component per file, named after the component.

src/
├── components/
│   ├── Header.tsx
│   ├── Footer.tsx
│   └── UserCard.tsx
└── App.tsx

React doesn't enforce this. The community does. Stick to it — it keeps your project navigable as it grows.

Exporting and Importing

A component file needs to export its component, and any file that uses it needs to import it.

// src/components/Footer.tsx
function Footer() {
  return (
    <footer>
      <p>© 2026 My App</p>
    </footer>
  );
}

export default Footer;

// src/App.tsx
import Header from './components/Header.tsx';
import Footer from './components/Footer.tsx';

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>This is the body of the page.</p>
      </main>
      <Footer />
    </div>
  );
}

export default App;

Header and Footer use export default — there's one main thing this file exports. The import doesn't need curly braces, and you can name it whatever you want (though you should always use the component name).

Named exports look different:

// export
export function Header() { ... }

// import
import { Header } from './components/Header.tsx';

Named exports are useful when a file exports multiple things. For component files, export default is the convention. You'll use named exports more when you get to utility functions and custom hooks.

<aside> ⚠️

Warning

Three mistakes that will trip you up constantly at first:

• Lowercase component name (header instead of Header) — React silently treats it as an HTML tag, no error, wrong result
• Forgetting export default — you'll get a "cannot find module" error
• Forgetting the import — you'll get "[ComponentName] is not defined"

When something doesn't render and you don't know why, check these three things first.

</aside>

Composing Components

Components can contain other components. This is composition — the main way you build UIs in React.

// src/components/Hero.tsx
function Hero() {
  return (
    <section>
      <h2>Build something great</h2>
      <p>A landing page for a product that doesn't exist yet.</p>
    </section>
  );
}

export default Hero;

// src/App.tsx
import Header from './components/Header.tsx';
import Hero from './components/Hero.tsx';
import Footer from './components/Footer.tsx';

function App() {
  return (
    <div>
      <Header />
      <main>
        <Hero />
      </main>
      <Footer />
    </div>
  );
}

export default App;

App doesn't know or care what's inside Header, Hero, or Footer. It just renders them in order. Each component is responsible for its own piece of the UI.

Notice the self-closing syntax: <Header /> rather than <Header></Header>. Use self-closing tags when a component has no children — it's cleaner and the convention in React.

<aside> ⚠️

Hands On

Build a simple landing page with four components in src/components/:

• Header — site title and a tagline
• Hero — a big welcome message
• Features — three short paragraphs about features (hardcoded for now, no props yet)
• Footer — a copyright line

Import all four into App.tsx and render them in order. Add a CSS file for each component if you want to style them. After you've got it working, try moving Hero inside Header — what happens? Then move it back.

</aside>

A Note on Class Components

You'll see this syntax in older codebases:

class Counter extends React.Component {
  state = { count: 0 };

  render() {
    return <div>{this.state.count}</div>;
  }
}

Class components are legacy. Don't write new components this way. Function components with hooks are the modern standard and everything in this course uses them. When you encounter class components on the job, you'll be able to read them — but you won't need to write them.

The Shape of a React App

Every React app has the same structure: small components compose into bigger components, which compose into pages, which compose into an app. App.tsx is usually the root — the component that holds everything else.

App
├── Header
├── main
│   ├── Hero
│   └── Features
└── Footer

This tree structure is how React thinks about the UI. When data changes somewhere in the tree, React re-renders the affected components. You'll understand this deeply by the end of the week.

<aside> ⚠️

Celebration

You just wrote your first components. A real React app is hundreds of these — each one focused, reusable, and composable. You now know the fundamental unit of every React application.

</aside>

Additional Resources

Reading

• https://react.dev/learn/your-first-component — The official React docs on components. Clear and well-structured.
• https://react.dev/learn/importing-and-exporting-components — The docs on default vs named exports in the context of React.

Interactive

• https://react.dev/learn#components — The interactive "Learn React" section on components. You can edit the code examples directly in the browser.

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*

Built with ❤️ by the HackYourFuture community · Thank you, contributors

Found a mistake or have a suggestion? Let us know in the feedback form.