Building React Apps

Writing React in a single HTML file is fine for learning, but for real apps, we need a Build Tool. We will use Vite (pronounced "veet"), the modern standard for frontend development.

1. Setting Up with Vite ⚡

Open your terminal and run:

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

This starts a local development server at http://localhost:5173.

2. Project Structure 📂

Here is what the folders mean:

node_modules/: All the libraries you installed (don't touch this).
public/: Static files like favicon.ico or robots.txt.
src/: Your Code Lives Here!
- main.jsx: The entry point. It mounts React to the DOM.
- App.jsx: The main component of your app.
- index.css: Global styles.

3. Building a User List App 📋

Let's build a real component that fetches data from an API.

JAVASCRIPT PLAYGROUND

⏳ Loading editor…

4. Styling Your App 🎨

You can import CSS files directly into your JavaScript.

App.css

.card {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}

App.jsx

import "./App.css";

function App() {
  return <div className="card">Hello World</div>;
}

AI Mentor

Confused about "React project setup with Vite, folder structure, styling options, and data fetching"? Ask our AI mentor for a simplified explanation.

Quiz

Question 1 of 4

Which command starts the development server in Vite?

npm start

npm run dev

node server.js

vite start

Key Takeaways

✅ Vite is the best way to start a React project.
✅ src/ is where the magic happens.
✅ useEffect is perfect for fetching initial data.
✅ CSS can be imported directly into components.

What's Next?

React is powerful, but it's just a library. Next.js is a full Framework built on top of React. Let's explore it!

Keep coding! 🚀