#React from Zero

Build Your First Real Web Apps with TypeScript, One Small Step at a Time

React from Zero cover

##From "what is React?" to a deployed app

This book takes you from "what is React?" to a tested, accessible, deployed React app written in TypeScript. You learn by building Shelfie, a personal reading-list app, one chapter at a time. Every chapter ends with a working app that is a little better than the one before. If you get lost, you can restart from the checkpoint project of any chapter.

Each new idea gets a plain-English explanation first, then the smallest possible example, then its place in Shelfie. No concept shows up in code before it is explained, and that includes every piece of type syntax.

##What makes this book different

  • One project, the whole book. By the end, you have built a complete multi-page app with forms, data from an API, routing, tests, and translations, and you have put it on the internet.
  • "Why did that happen?" boxes. Beginners rarely get stuck on syntax. They get stuck on re-renders, stale state, effects running twice, and error messages they can't read. The book runs into each of these on purpose, shows the real error message, and explains it.
  • TypeScript as a guide, not a hurdle. Every sample uses strict TypeScript from the first project. Type errors are treated as your editor pointing at a bug before the browser does.
  • Modern from page one. Function components and hooks, Vite, React 19 Actions for forms, and the React Compiler. No class components and no Create React App.
  • Accessible by default. You pick the right HTML elements from the first component, so the app works with a keyboard and a screen reader.
  • Learning to learn. Reading React and TypeScript error messages, using React Developer Tools, reading the official docs, and asking good questions are skills the book teaches.

##Who this book is for

You know a little HTML and CSS, you have written some JavaScript (a variable, a function, an if), and you want to build interactive web apps. That includes self-taught learners, bootcamp students, designers who code, and back-end developers new to the front end. C#, Java, and Kotlin developers will find TypeScript familiar. It is also for developers who "used React a bit" by copying tutorials and want the mental model that makes it click.

You don't need to know modern JavaScript (arrow functions, destructuring, modules, map, promises) or TypeScript: Part I teaches both. You don't need to know Node.js, git, or build tools either.

Six parts, 25 chapters, and six appendices.

##Table of contents

Introduction

Part I: Getting Ready

  1. What Is React, and Why Should You Care?
  2. Setting Up Your Workshop
  3. Just Enough Modern JavaScript
  4. Just Enough TypeScript

Part II: Thinking in Components

  1. JSX: HTML's Clever Cousin
  2. Your First Components
  3. Props: Passing Data Down
  4. Rendering Lists and Conditional Content
  5. Styling Your Components

Part III: Making Things Interactive

  1. Events: Responding to the User
  2. State: Giving Components a Memory
  3. Updating Objects and Arrays in State
  4. Forms
  5. Sharing State Between Components

Part IV: Talking to the Outside World

  1. Effects: Stepping Outside React
  2. Fetching Data from an API
  3. Refs: Reaching the DOM

Part V: Growing Your App

  1. Custom Hooks: Reusing Logic
  2. Context and Reducers: Managing Bigger State
  3. Multiple Pages with React Router
  4. Testing Your Components
  5. Speaking Your Reader's Language

Part VI: Shipping and Next Steps

  1. Building and Deploying Your App
  2. Debugging and Getting Unstuck
  3. Where to Go Next

Appendices

  • Appendix A: JavaScript and TypeScript Quick Reference
  • Appendix B: Hooks Cheat Sheet
  • Appendix C: Old Code Alert
  • Appendix D: Exercise Solutions
  • Appendix E: Code Review Checklist
  • Appendix F: Glossary

##Get the book