v. Introduction

How to Read This Book?

This book is designed to take you from zero to hero! Each chapter builds on the code and concepts from its predecessors, so you’ll want to work your way through them in order. To help you navigate on your journey, here are some conventions we use:

• Filenames, text you enter into dialog boxes, items you look for on screen all appear in bold.
• Names of things you find in your code — such as variables, properties, types, protocols and method names — appear in a monospaced typeface.

This book is split into 4 main sections:

Section I: Rendering Right

In this section, you’ll begin your journey to becoming a React developer by building the basic Learning Tracker app. Along the way, you’ll:

• Set up your React workspace.
• Learn why React exists.
• Understand the markup-in-JavaScript syntax JSX.
• Divide your app into components and learn how to spot when a component needs splitting.
• Learn how to pass data into a component with props and children.
• Make your app render conditions and lists.
• Style your app and add accessible markup.
• Organize and clean up the static catalog.

By the end of this section, Learning Tracker will be a typed, componentized, accessible, organized catalog — static by design. In the next section, you’ll make it move.

Section II: Adding Interactions & State

In this section, you’ll make Learning Tracker react to the user’s clicks, presses and typing. You’ll learn:

• What state is and how to use state to handle events.
• How to implement live search and an add-new form.
• How state really works, what can go wrong, and how to fix it.
• Where state should live.

By the end of this section, your app will be genuinely interactive, but it won’t survive a page refresh. You’ll fix that in the next section.

Section III: Making It Work in the Real World

The app you’ve built so far lives inside React’s world. In this section, you’ll connect it to the browser around it, by learning about:

• Refs, effects and persisting your data.
• Fetching data from a server across a slow, possibly broken network.
• Handling app-level preferences with context, as well as when not to use it.
• Implementing client-side routing, using React Router.

By the end of this section, your Learning Tracker will be a complete web application: real pages with real addresses, safe parameters, graceful dead ends and shared state threaded cleanly beneath it all. All the connectivity is in place — storage, network, preferences, navigation.

Section IV: Proving It Works Well

Up until now, you’ve checked that your Learning Tracker works by clicking through every feature by hand. But every new feature risks breaking an old one, and no one re-checks the whole app every time.

In this section, you’ll prove your app’s behaviors stay correct and efficient. Here’s what you’ll be doing:

• Use Vitest and React Testing Library to write automated tests you can run as often as you like.
• Use React DevTools Profiler to measure performance.
• Deploy your app to the web on Netlify.