Setting Up a React Project with Vite or CRA

Setting Up a React Project with Vite or CRA

Modern React development runs on a build tool that bundles your files, runs a dev server, and optimizes production output. Two popular options are Vite and Create React App (CRA).

Creating a project with Vite

Vite is fast, modern, and the recommended choice for new projects. Run:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Open the local URL printed in the terminal and you will see the starter page. Vite gives instant hot reload, so edits appear in the browser immediately.

Creating a project with Create React App

CRA has been a long-standing default and still works. Use:

npx create-react-app my-app
cd my-app
npm start

CRA hides all configuration, so you can focus on writing components instead of tuning Webpack.

Exploring the project structure

After scaffolding you get a folder layout you will see in every React app:

my-app
  src/
    App.jsx
    main.jsx
  index.html
  package.json

App.jsx is your root component. main.jsx mounts the app into the page. package.json lists your dependencies and scripts.

Your first edit

Open src/App.jsx, change the heading text, and save. The browser updates instantly thanks to hot reload. Try rendering a couple of components next to each other to get a feel for composition before moving on.

Key Points

• Vite is the recommended quick setup for new React apps.
• Create React App remains a simple, pre-configured option.
• npm run dev or npm start launches the local server.
• Component files live in the src folder and are bundled at build time.
• Hot reload makes development fast and interactive.