π Building Your First React App with Vite: A Step-by-Step Guide
Hey DEV community! π This quick guide shows you how to build your first React app with Vite β step by step, with clear examples and a summary so you can learn fast and start coding right away! π
β
Step 1: Install Node.js and npm
-> First things first: React apps need Node.js to run the development server and npm (or pnpm/yarn) for dependencies.
πΉ Download and install Node.js from nodejs.org.
π Verify installation:
node -v
npm -v
β
Step 2: Create a New React App with Vite
-> Instead of Create React App, weβll use Vite, which is faster and has a better developer experience.
Run these commands:
npm create vite@latest my-first-react-app -- --template react
cd my-first-react-app
npm install
npm run dev
Your browser should open at http://localhost:5173/ with a default React + Vite page β congratulations, your app is running! π
β
Step 3: Understand the Project Structure ποΈ
-> Your Vite project will look like this:
my-first-react-app/
βββ node_modules/ π¦ Installed npm packages
βββ public/ π Static assets
βββ src/
β βββ App.jsx βοΈ Main App component
β βββ App.css π¨ Styles for App component
β βββ main.jsx π Entry point that renders <App /> to the DOM
β βββ assets/ πΌοΈ Images and static files
βββ index.html π The main HTML template
βββ package.json π¦ Project metadata & dependencies
βββ vite.config.js βοΈ Vite config file
βββ README.md π App documentation
π Key folders/files explained:
-> index.html β The single HTML file React mounts into.
-> src/ β Where you write your components.
-> App.jsx β Your main component.
-> main.jsx β Renders App into the DOM.
-> App.css β Styles for your app.
-> vite.config.js β Configures Vite.
β
Step 4: Edit Your First Component βοΈ
-> Open src/App.jsx. By default, it will look like:
import { useState } from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>Hello Vite + React! π¨</h1>
</div>
);
}
export default App;
β
Step 5: Add State with useState Hook π
-> Make it interactive by adding a simple counter:
import { useState } from 'react';
import './App.css';
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<h1>Simple Counter π</h1>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default App;
β Now your app has:
-> A stateful variable (count) to track the counter.
-> A button that updates the state.
-> Instant UI updates as the state changes!
β
Step 6: Styling Your App π¨
-> Open src/App.css and add styles:
.App {
text-align: center;
margin-top: 50px;
}
button {
font-size: 1.2rem;
padding: 10px 20px;
cursor: pointer;
}
Styles are automatically applied to your component since App.css is imported in App.jsx.
β
Step 7: Build for Production π¦
-> To create a production-ready build, run:
npm run build
Thatβs the URL you can open in your browser to view your production build locally: http://localhost:5173/ π Just copy that URL and paste it into your browser!
π Summary & Conclusion
-> Set up a modern React app using Vite.
-> Edit your first React component.
-> Add state with the useState hook.
-> Style your app with CSS.
-> Build your app for production deployment.
π Thatβs it!
Congratulations β your first React + Vite app is live! Keep coding, stay curious, and happy developing! π»β¨