This book is for web developers with some HTML, CSS and JavaScript knowledge, who are new to React.
Covered concepts
components
state
forms
routing
data fetching
tests
deployment
React Apprentice takes you step by step through the process of building a complete web app
from scratch, using the React JavaScript library.
There is one running project plus small drills — enough continuity to feel real, and enough
focused examples to avoid one giant confusing app.
You’ll build a...
React Apprentice takes you step by step through the process of building a complete web app
from scratch, using the React JavaScript library.
There is one running project plus small drills — enough continuity to feel real, and enough
focused examples to avoid one giant confusing app.
You’ll build a small but real React app with components, state, forms, routing, data fetching, tests,
and deployment — and, more importantly, you’ll be able to explain why the code works.
This book teaches the mental model first — render, state, props, data flow, snapshots, effects.
Common mistakes and their fixes are first-class content — stale state, wrong keys, unnecessary
effects, overusing context, and mutation bugs.
By the end of the book, you’ll be experienced enough to turn your ideas into real apps you can
deploy on the web.
This book consists of more than pages and illustrations! You also get full
source code, image files, and other resources you can reuse for your own projects.
Before You Begin
This section tells you a few things you need to know before you get started, such as what you’ll need for hardware and software, where to find the project files for this book, and more.
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.
Install Node.js, create a React and TypeScript project with Vite, and take
your first tour of a working React app as you lay the foundation of the
Learning Tracker.
Give components typed inputs with props, share pieces of UI
through children and compose small parts into a catalog of
reusable cards, badges and buttons.
Turn the plain catalog into a polished interface with global
CSS, a card grid, level badges and buttons, all built on
semantic, keyboard-friendly, accessible markup.
Consolidate Part I: organize the project into components,
data and types folders, finish CourseList and EmptyState,
add categories and sweep out the last template leftovers.
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.
Lift favorites to a shared owner, make cards controlled, then
build the My Learning plan with typed statuses and your first
reducer.
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.
Reach outside React safely: focus search with a ref, persist
favorites and the learning plan via effects and localStorage,
and add a keyboard shortcut with proper cleanup.
Give the Learning Tracker a persistent dark mode with React
context: a typed provider, a safe useTheme hook and CSS
variables that follow the preference.
Turn the single-page stack into a navigable app with React
Router: catalog, course-details and My Learning pages, safe
route parameters and a proper Not Found.
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.
Protect the Learning Tracker's key journeys with Vitest and
React Testing Library, then track down a planted bug using a
failing test and React DevTools.
Measure a real performance problem with the React DevTools
Profiler and fix it with useMemo, then build, preview and
deploy the finished Learning Tracker to the web.
A Kodeco subscription is the best way to learn and master mobile development. Learn iOS, Swift, Android, Kotlin, Flutter and Dart development and unlock our massive catalog of 50+ books and 4,000+ videos.
