For learning React locally, a build tool provides a development server, understands JSX and prepares optimised files for deployment. This course uses Vite's React template.
Requirements
Install a current Node.js release, then check that Node and npm are available.
node --version npm --version
Create the project
npm create vite@latest react-task-list -- --template react cd react-task-list npm install npm run dev
Open the local address printed in the terminal. The development server updates the page as files change. Start in src/App.jsx; remove the starter content and keep the project open beside this course.
Project scripts
npm run dev starts development, npm run build creates a production build and npm run preview serves that build locally for a final check.
What Vite created
index.html supplies the browser page and its root element. src/main.jsx starts React, while src/App.jsx defines the first component. package.json records dependencies and scripts. node_modules contains installed packages and should not be edited by hand.
The development server transforms JSX and modules as you work. Browsers do not understand JSX directly; the production build also converts and bundles the source into browser-ready files.
Challenge: explore the starter
- Find the heading shown in the browser inside
src/App.jsx. - Change it to
My React notebook
. - Find the stylesheet import and change one visible colour.
- Stop and restart the server.
npm run dev asks npm to run the script named dev in package.json. Vite then starts the local development server.
