Project Setup: Vite, Layout & Dev Server
Create a React app with Vite (or similar), understand the basic folder layout, run a dev server, and verify rendering with a tiny component.
Project Setup: Vite, Layout & Dev Server is a free React Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Setup overview
Goal: Create a project fast, learn the folder layout, and run a dev server with hot reload.
- Vite (or similar) project bootstrap
- Where files live
- Start and verify the app
Prerequisites
Prerequisites:
- Node.js LTS and npm installed
- Terminal access
- Basic CLI usage (cd, ls)
Scaffold with Vite
Create the project with a fast tool:
- Scaffold (e.g., npm create vite@latest)
- Select React (JavaScript)
- Install deps (npm install)
Folder essentials
Layout (typical):
- index.html: contains
div#root - src/main.jsx: creates root and renders App
- src/App.jsx: your component
Run the dev server
Dev server:
- Start with npm run dev
- Open the local URL
- Edit App.jsx; changes show instantly (hot reload)
Verify rendering
Render a tiny App to confirm the setup works; tweak text to see hot reload.
<div id="root"></div>
Mounting point file
Recap
Recap: Scaffold with Vite, learn where index.html, main.jsx, and App.jsx live, run the dev server, and verify rendering with a tiny component.
Frequently asked questions
Is the “Project Setup: Vite, Layout & Dev Server” lesson free?
Yes — the full text of “Project Setup: Vite, Layout & Dev Server” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Project Setup: Vite, Layout & Dev Server”?
Create a React app with Vite (or similar), understand the basic folder layout, run a dev server, and verify rendering with a tiny component. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Project Setup: Vite, Layout & Dev Server” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- React Kickoff: Concepts & Setup
- Project Setup: Vite, Layout & Dev Server
- First Component & Render