React Workshop Series

Day 1 — Project Setup Time

Day 1 · Topic 2 of 15Teaching & theory

Foundations & build/Project Setup Time

2

Project Setup Time

Slide companion · 28–31

Your takeaway: Create the same JavaScript, ESLint, Tailwind, src-directory, and App Router project on Windows or macOS.

Topic 2 · create the project

Pick your laptop OS — follow only that checklist.

We keep setup simple: JavaScript only (no TypeScript), with ESLint on so Day 2 can continue in the same project cleanly. First get your terminal into the right folder, then run create-next-app.

Before you start (everyone)

  • Node.js LTS must already be installed (check Home → Prerequisites)
  • Do not create a project inside another Next.js / React project folder
  • The command creates a new folder named my-profile-card inside the folder you opened
  • Stay connected to Wi‑Fi — the first install downloads packages
1

Choose a folder to save your project

Open Finder and create a simple folder, for example on your Desktop named workshop.

  • Good: Desktop/workshop or Documents/workshop
  • Avoid spaces and symbols in the folder name when possible
  • If Desktop/Documents are synced with iCloud, waits/freezes during install are common — a local folder is safer
2

Open Terminal in that folder

Easiest method:

  1. In Finder, right-click (or Control-click) your workshop folder
  2. Choose New Terminal at Folder (sometimes under Services)

Don't see "New Terminal at Folder"?

Enable it once: System Settings → Keyboard → Keyboard Shortcuts → Services → Files and Folders, then turn on New Terminal at Folder. Right-click the folder again.

Backup method (always works):

  1. Open Terminal (Spotlight: Cmd + Space, type Terminal)
  2. Type cd (with a space), then drag your workshop folder into the Terminal window and press Enter
macOS Terminal
1pwd

pwd should print something like /Users/alex/Desktop/workshop.

3

Confirm Node.js works

macOS Terminal
1node --version
2npm --version

You should see version numbers (Node should be v20.9+).

Common error: command not found: node / npx

Install Node.js LTS from the Home page, then quit Terminal fully (Cmd + Q) and open it again. If you installed Node while Terminal was already open, the old window will not see it.
4

Create the Next.js app

Stay inside your workshop folder (parent folder), then run:

macOS Terminal
1npx create-next-app@latest my-profile-card

If asked Ok to proceed?, type y and press Enter. Then choose the options below.

create-next-app choices (same for everyone)
  • Ok to proceed?→ y
  • Would you like to use the recommended Next.js defaults?→ No, customize settings
  • Would you like to use TypeScript?→ No
  • Which linter would you like to use?→ ESLint
  • Would you like to use React Compiler?→ Yes
  • Would you like to use Tailwind CSS?→ Yes
  • Would you like your code inside a `src/` directory?→ Yes
  • Would you like to use App Router? (recommended)→ Yes
  • Would you like to customize the import alias (`@/*` by default)?→ No
  • Would you like to include AGENTS.md to guide coding agents to write up-to-date Next.js code?→ No

Popular macOS issues during create-next-app

  • Permission denied → make sure you own the folder (create it yourself on Desktop). Do not install into system folders
  • EEXIST / folder already exists → delete the incomplete my-profile-card folder in Finder, then rerun the command
  • Stuck on install / iCloud downloading → wait for cloud sync to finish, or move the workshop folder out of iCloud Desktop/Documents
  • xcode-select / developer tools prompt → click Install and wait; some Macs need Command Line Tools once before npm packages finish
5

Enter the generated project folder

macOS Terminal
1cd my-profile-card

Your terminal path should now end with my-profile-card. Stop here—we will inspect the generated files before starting the development server.

6

Open the project in VS Code

Open the generated project folder:

  • In Finder, right-click my-profile-card → Open With → Visual Studio Code, or
  • In VS Code: File → Open Folder… and select my-profile-card, or
  • From Terminal (already inside my-profile-card):
macOS Terminal
1code .

command not found: code?

Open VS Code, press Cmd + Shift + P, run Shell Command: Install 'code' command in PATH, then open a new Terminal and try again.

macOS tip

Save files with Cmd + S. After the file tour, the Build & Test topic will start the development server and show why saving matters. You can also open Terminal inside VS Code later with Control + `.