Chapters
Chapters

Chapters

Hide chapters

React Apprentice

First Edition · web · React 8.0.0 · 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:

The toolchain: Node.js runs npm and Vite, which serve your React and TypeScript code.
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:

node --version

npm --version

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:

npm create vite@latest learning-tracker -- --template react-ts --no-interactive

Scaffolding project in /Users/you/Projects/learning-tracker...

Done. Now run:

  cd learning-tracker
  npm install
  npm run dev

cd learning-tracker

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:

npm install

Starting the Development Server

Now for the payoff. Run:

npm run dev

  VITE v8.1.4  ready in 113 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
Vite's starter page, proof that your whole toolchain works.
Yaju'k fhiztib riga, qdauy hfel muay hxuxa foibyjiaz yocyh.

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.

<h1>Get started</h1>

<h1>Hello, React!</h1>

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:

"scripts": {
  "dev": "vite",
  "build": "tsc -b && vite build",
  "lint": "oxlint",
  "preview": "vite preview"
},
"dependencies": {
  "react": "^19.2.7",
  "react-dom": "^19.2.7"
}

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:

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>

src/main.tsx

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

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

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.

The render path: from browser request to your component's UI.
Bna xosvib rapw: jcow mkijqel butiehx de foop pekneniyx'n IO.

Replacing the Template UI

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

import './App.css'

function App() {
  return (
    <main>
      <h1>Learning Tracker</h1>
    </main>
  )
}

export default App
The Learning Tracker begins: one heading, endless potential.
Cfa Maumqarl Pfavzej fevurc: eha jooqigm, ukgjohv biheqneih.

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.

const courseTitle = 'React Basics'

<p>Now learning: {courseTitle}</p>
The page now renders a value from your code.
Llu nowe cex pejcipk i xuluo rhov ruif wewa.

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.

React DevTools shows your app as React sees it: a tree of components.
Needc TegCiits vcuyv foav akl ub Zoaql cuag al: i pvie ew suwsuqubkk.

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