React Workshop Series

Day 1 — File Structure

Day 1 · Topic 4 of 15Teaching & theory

Foundations & build/File Structure

4

File Structure

Slide companion · 34–37

Your takeaway: Find pages, shared layouts, components, images, and generated folders without editing the wrong file.

Project map · where does everything live?

You know JSX now. Next question: where does everything live in your project — and what can you safely leave alone without breaking everything?

React and Next.js Workshop Pt.1

File Structure

(Where does everything live?)

And what can I safely leave alone without breaking everything?

Open your folder in VS Code

If the project is not open yet, use Terminal (Mac) or CMD (Windows):

Terminal
1code .

command not found: code?

Open the folder with File → Open Folder… for now. On Mac, the Command Palette can install the code shell command. On Windows, rerun the VS Code installer and enable its PATH option. Then open a new terminal.

Project structure

.next/

Appears after dev/build runs. Generated files—do not touch.

node_modules/

Thousands of packages. Do not touch.

public/

Your images and static files can go here.

src/

Your source-code root—app/ exists now; you add components/ later.

package.json / package-lock.json

Lists the tools your project uses.

next.config.mjs, eslint.config.mjs, jsconfig.json, postcss.config.mjs

Settings and config files. Leave these alone for now.

Important: src/components and src/app have different jobs

Both folders sit inside src. Learn them as sibling folders with two separate jobs.

src/components/

Store your building blocks here — especially reusable components (for example src/components/ProfileCard.js).

This folder is not generated for you. You will create it in Hands-on #01.

Think: LEGO pieces you will reuse.

src/app/

Pages and routing live here. Folders and page.js files become URLs (for example src/app/page.js → / → localhost:3000 once the server starts).

Think: which screen the visitor opens.

Facilitator noteShow note
Advice from us: today you mainly open files inside src/app/ for the home page. When we build the Profile Card, we will create components under src/components/ (still inside src, but not inside app).

Inside src/app (pages)

Expand src → app in the VS Code sidebar. You should see:

favicon.ico

Site icon — the tiny icon in the browser tab.

globals.css

App-wide styles and Tailwind CSS imports. Styles here can affect the whole site.

layout.js

Shared UI that appears on all pages (think navbar / footer shell). We will leave this mostly alone today.

page.js

Home page UI for / — what you see at http://localhost:3000 after the next topic starts the server. This is the main page file we edit first.

Safe to tidy?

You may change the content inside page.js later. Do not delete .next, node_modules, or the config files. And remember: components go in src/components/, pages stay in src/app/.

Checkpoint

Point to src/app (pages and routing), then say where you will create src/components(reusable building blocks) later. Continue to Build & Test and Routing.