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

Week 4 Overview

React is the most widely used JavaScript library for building user interfaces. Created by Facebook in 2013, it changed the way developers think about front-end development by introducing a component-based, declarative way of describing UIs. Instead of manually telling the browser how to update the DOM step by step, you tell React what the UI should look like for a given set of data — and React keeps the screen in sync for you.

This first week is all about getting comfortable with the basics. Before we make anything interactive (next week, with state and events), you first need a solid grasp of the building blocks: how React projects are set up, how to break a UI into reusable components, how JSX lets you write HTML-like markup inside JavaScript, and how data flows from one component to another through props. By the end of the week, you should be able to build a fully static multi-component website from scratch using nothing but components, JSX, props, and a little bit of conditional logic.

The mental shift is the most important part. Coming from vanilla JavaScript you are used to grabbing DOM nodes and updating them by hand. In React, you stop touching the DOM altogether — you describe the UI as a function of data, and React handles the rest. Once that "click" happens, everything else in this module will make sense.

<aside> 💡

React is just JavaScript. You aren’t learning a new language: they're learning a library that organizes JavaScript in a particular way. Every JS skill you already have (functions, arrays, destructuring, template literals, arrow functions, .map(), .filter()) is going to be used heavily.

</aside>

Learning goals

By the end of this week, you should be able to:

• Explain why React exists — describe the difference between imperative DOM manipulation and React's declarative approach, and why thinking in components is useful at scale
• Set up a React project with Vite — initialize, run, and build a project; understand the role of index.html, main.jsx, and the entry-point flow
• Write functional components — create reusable components in their own files, export and import them across a project, and compose them into a larger UI
• Read and write JSX confidently — use { } to embed JavaScript expressions, apply attributes (className, htmlFor, camelCase events), self-close tags, write inline styles as objects, and handle the single-root-element rule with Fragments
• Pass data with props — destructure props in the function signature, pass strings vs. expressions correctly, give defaults, use the special children prop, and respect the read-only nature of props
• Render dynamic lists — transform arrays of data into JSX with .map(), provide stable unique keys, chain .filter() and .sort(), and handle empty states gracefully
• Render UI conditionally — choose appropriately between ternaries, &&, early returns, and null returns, and avoid the common 0 && ... pitfall
• Reason about how React renders — understand the component tree, one-way data flow from parent to child, that components re-run top-to-bottom on every render, and what the virtual DOM is doing under the hood

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.