📖 Notes
LESSON 2 OF 18
Vite Setup & Project Structure
Getting a Project Running in 30 Seconds
Vite has replaced Create React App as the standard way to start a new React project — faster installs, faster reloads, and a folder structure you'll reuse in every project after this one.
Scaffolding
CRA vs Vite
Create React App vs Vite
bashCREATE REACT APP (CRA): npx create-react-app my-app VITE (faster — recommended): npm create vite@latest my-app -- --template react cd my-app && npm install && npm run dev
Standard Folder Structure
📄
main.jsx
The entry point that mounts your app into the DOM.
🌳
App.jsx
The root component that every other component nests inside.
🎨
index.css
Global styles applied across the whole app.
🧩
components/
Your reusable UI pieces live here.
main.jsx and App.jsx
JSX// main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// App.jsx
function App() {
return <h1>Hello React!</h1>;
}
export default App;