Learn ReactJS - Starting a React Project

#Introduction

The theory from episode 2 is enough. Now you're going to build a real React project and understand every part of it. Episode 3 focuses on one thing that's often overlooked: a clean project structure and correct tooling from day one.

You'll create a project with Vite, dissect the meaning of every folder and file, run the dev server with live reload, and set up ESLint, Prettier, and gitignore so the project stays clean. A good start in this episode will save you a lot of headaches in episodes 19-20.

#Creating an App with Vite

#Scaffolding a New Project

Create React App is still a popular choice, but the React team itself recommends Vite because it's faster and lighter. Start with:

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

After npm run dev, Vite shows http://localhost:5173 and the boilerplate page opens in the browser. If you change the contents of src/App.jsx and save, the browser updates the view immediately without a manual reload — that's the live reload we promised.

#The Modern Project Structure

#Reading the Project Map

Let's break down the structure Vite generates:

my-app/
├── index.html
├── package.json
├── vite.config.js
├── eslint.config.js
├── .gitignore
├── public/
│   └── vite.svg
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    └── index.css

#index.html, public, and package.json

index.html is the only HTML file served by the server. Inside it there's a <div id="root"> where React attaches:

<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>

The public/ folder holds static assets like logo images and favicons, copied as-is into the build output. package.json contains the dependency list and scripts. Check its scripts section:

npm run

The npm run output shows all available scripts: dev, build, lint, and preview. Each one is run with npm run <name>.

#src, main.jsx, and App.jsx

All app code lives in src/. src/main.jsx is the entry point that attaches React to the DOM:

main.jsx from Vite

import ReactDOM from "react-dom/client"
import App from "./App.jsx"
 
ReactDOM.createRoot(document.getElementById("root")).render(
  <App />
)

The command ReactDOM.createRoot(document.getElementById("root")).render(...) finds the root element in index.html and renders the App component into it. App.jsx is the root component that holds the whole page.

#Running the Dev Server and Live Reload

#The Development Workflow

npm run dev starts the dev server with two main features: HMR (Hot Module Replacement), which updates changed modules without losing state, and an error overlay that shows errors directly in the browser. Get used to this workflow:

edit code -> save -> browser updates -> check in React DevTools

Open a browser tab and try changing the <h1> text in App.jsx. Notice how the browser reacts without a reload — this is the modern React workflow.

#Basic ESLint, Prettier, and Gitignore Configuration

#Adding Prettier

Vite already ships with ESLint in eslint.config.js. For consistent code formatting, add Prettier:

npm install -D prettier

Create a .prettierrc file in the project root with:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

The config { "semi": false, "singleQuote": true } disables semicolons and uses single quotes — a style consistent with the code examples in this series. In VS Code, enable Format on Save so Prettier formats your code automatically.

#Running Lint

Vite's ESLint already configures some rules. Run:

npm run lint

Without errors, the output only shows a success message. Try adding an unused const x = 1 to see ESLint react with the is defined but never used warning.

#Checking .gitignore

Vite's built-in .gitignore already covers node_modules, dist, logs, and environment files. Make sure environment files like .env.local stay ignored — in episode 20 we'll see why this matters for security.

#Conclusion

Episode 3 built and tidied up your first React project: the Vite scaffold, the src, public, and package.json structure, the dev server workflow with live reload, plus ESLint, Prettier, and gitignore configuration. Now you have a clean stage to start writing UI.

Key takeaways:

• Vite is the primary choice: npm create vite@latest my-app -- --template react.
• index.html loads #root, main.jsx attaches React to the DOM.
• src/ holds the app code; public/ holds static assets.
• npm run dev gives live reload; npm run build produces a production build.
• Prettier is installed separately for consistent code formatting.
• ESLint and gitignore are already included in the Vite template.

In the next episode, episode 4, we'll create components & JSX — writing function components, JSX syntax with JavaScript expressions, styling with CSS Modules and styled-components, and composition patterns via props and children. Now it's time to start designing the UI.