Chapters
Chapters

Chapters

Hide chapters

React Apprentice

First Edition · web · React 19 · Visual Studio Code

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Rendering Right

Section 1: 7 chapters
Show chapters Hide chapters

Section II: Adding Interactions & State

Section 2: 4 chapters
Show chapters Hide chapters

Section III: Making It Work in the Real World

Section 3: 4 chapters
Show chapters Hide chapters

Section IV: Proving It Works Well

Section 4: 3 chapters
Show chapters Hide chapters

1. Setting Up Your React Workspace
Written by Eli Ganim

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Every React project starts the same way — with a working workspace. That means the tools that create your project, serve it in the browser while you code, and check your work as you type.

In this chapter, you’ll install Node.js, create a React and TypeScript project with a build tool called Vite and run it in your browser. Along the way, you’ll learn what each tool actually does, so nothing feels like magic.

You’ll also lay the first brick of the app you’ll build throughout this book — the Learning Tracker, an app for browsing courses, planning what to learn next and tracking your progress. Today, your app starts life as a heading and a single course title. By the end of the book, it’ll be a complete, tested app deployed to the web.

You’ll create everything in this chapter from scratch, so there’s no starter project to open. If you get stuck at any point, compare your work against the finished project in the final folder of this chapter’s materials.

The Toolchain at a Glance

Before you type any commands, it helps to know what you’re about to install and why. Modern web development relies on tools that run on your computer — not in the browser — to create projects, check code and serve your app while you work. Here’s the cast:

  • Node.js: A program that runs JavaScript outside the browser. The tools below are themselves written in JavaScript, so they need Node.js to run.
  • npm: Node’s package manager. It downloads packages — reusable libraries of code — and runs project commands called scripts. It’s installed automatically with Node.js.
  • Vite: The build tool, pronounced “veet” — French for “fast”. Vite creates new projects, serves your app during development with instant updates, and packages everything for production when you’re ready to ship.
  • React: The library this book is about. It lets you describe your interface as reusable components and keeps the page in sync with your data.
  • TypeScript: JavaScript plus type checking. It reads your code as you write it and catches data mistakes — like a misspelled property name — before you even reload the browser.

Here’s how they fit together:

Your app: UI components with checked data contracts React + TypeScript Creayes, serves and builds your project Vite Runs JavaScript tools on your computer Node.js Installs packages and runs project scripts npm
The toolchain: Node.js runs npm and Vite, which serve your React and TypeScript code.

Node.js runs the tooling, npm installs and launches it, Vite serves your project and your React and TypeScript code is what all of it exists to support. You’ll meet each tool in person over the next few pages.

Installing Node.js

You might already have Node.js installed. To check, open a terminal — on macOS, that’s Terminal in Applications ▸ Utilities; on Windows, search the Start menu for Terminal or PowerShell — and run:

Creating the Project

Time to create the Learning Tracker. In your terminal, navigate to the folder where you keep your coding projects — for example, cd ~/Projects. Then run:

Installing the Dependencies

The generator listed the packages your project needs — React among them — but it didn’t download them. That’s your next command. In the terminal, inside the project folder, run:

Starting the Development Server

Now for the payoff. Run:

Qigi'j ktapdik vopi, kvaek djay ciej qhika buighbuut xizjw.
Daso'h ygohpin fuge, tvead jlen ruoc dvaro riabbhaub bipnp.

Seeing Live Updates

The development server’s best trick is updating the browser the instant you save a file. You’ll prove that now, and make your first code edit in the process.

Touring the Essential Files

The generator created about fifteen files. Most of them are configuration you can safely ignore for a long time. Only four matter right now, and you’ll visit them from the outside in.

package.json

Open package.json in the project root. It’s your project’s identity card. The two parts worth reading today are the scripts and the dependencies:

index.html

Open index.html, also in the project root. This is the only HTML page in the entire project. The interesting part is the body:

src/main.tsx

Open src/main.tsx — the file index.html loads, and the place where React starts:

src/App.tsx

You’ve already peeked at src/App.tsx. In essence, it’s one function named App that returns markup describing everything you saw in the browser — the logo, the heading, the counter button, the links — with export default App at the bottom. It’s the entire visible app in one file.

Gotudnf tte OA yluw efxeapy ek jtyuoz Oqt.mjy Fnouzop u Moakv yael elc roxkazq iqxe aq <Efr /> peeg.tqm 
<kiy ox=”xoas”>
 bian.bly Quq ok ojkjtujx xeayk ojkah.jtzt Colouxml gca nada ynel nno zeh yivlex Dceyfan
Kle yolxuy qusk: lgez mvafgaw yeviupy se xuow gekboniwq'q OO.

Replacing the Template UI

Vite’s placeholder page has done its job. Time to evict it and move the Learning Tracker in.

Nso Ceebcorh Vlakdef zapock: ibe neoqiss, alwjunm tuledjeeb.
Vtu Noutlakg Mlazwoq wivadk: owe vauwatv, asdgunm kaharkoef.

Rendering Your First Data

The heading is fixed text. Real interfaces show data — course names, prices, scores — and the UI changes when the data change. Your last task of the chapter is to render your first piece of data.

Gzo vaye ciq jevxedv a liyoi vboz beok loto.
Hgi buze wuk legjazs o wilue vxug quul qaqo.

Exploring the Developer Tools

Two browser tools will accompany you for the rest of the book, and both deserve a quick hello while your app is running.

Zoabs XezGouys syovm huer igh ow Quetl neuv am: a dbia oc rihsimiqll.
Mioly VulFuagd wkunr wius esg ub Loebt saaw ak: o cjei or suwdetujlv.

Challenge: Make the Tracker Yours

Time to fly solo for the first time. Your challenge has two parts:

Key Points

  • Node.js runs JavaScript tooling on your computer, and npm — installed with it — downloads packages and runs project scripts.
  • Vite creates your project, serves it during development and builds it for production.
  • npm install reads package.json and fills node_modules, while package-lock.json records exact versions for repeatable installs.
  • npm run dev starts the development server at http://localhost:5173, and hot module replacement applies saved changes instantly.
  • index.html holds one empty div; src/main.tsx creates a React root there and renders the App component from src/App.tsx into it.
  • A .tsx file is TypeScript that can contain JSX markup, and TypeScript infers types from values without annotations.
  • import and export are JavaScript module syntax, not React features.
  • StrictMode enables development-only checks and is best left in place.
  • Curly braces in JSX embed JavaScript values into the UI — change the data, and the UI follows.

Where to Go From Here?

You now have what every React developer starts the day with: an editor, a live development server and instant feedback. More importantly, you know what each link in the chain is for.

v. Introduction
2. Why React Exists
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now