Installing React - Vite Setup Guide (2024)

Introduction

Let's create a React app! We'll use Vite - it's fast, modern, and way better than the old Create React App!

What You Will Learn

• Prerequisites for React development
• Creating a React project with Vite
• Understanding the project structure
• Running your first React app

Prerequisites

• Node.js & npm installed (Latest LTS recommended!)
• A code editor (VS Code!)

Step 1: Check Node Installation

Open your terminal and check Node/npm versions!

node --version  # Should be v18+ or v20+
npm --version

If not installed, download from nodejs.org!

Step 2: Create a React Project with Vite

Run this command in your terminal!

npm create vite@latest

You'll see prompts:

1. Project name: Give your project a name!
2. Select framework: Pick React!
3. Select variant: Pick JavaScript (or TypeScript if you want!)

Step 3: Install Dependencies and Run

cd your-project-name
npm install
npm run dev

Your app will be running at http://localhost:5173! Open it in a browser - you should see the Vite + React welcome page!

Project Structure Explained

Let's look at what Vite created!

your-project/
├─ node_modules/     # All dependencies live here
├─ public/           # Static assets (images, etc.)
├─ src/
│  ├─ App.css        # Styles for App component
│  ├─ App.jsx        # Main App component
│  ├─ index.css      # Global styles
│  └─ main.jsx       # Entry point - renders App
├─ .gitignore        # Files git should ignore
├─ index.html        # Root HTML file
├─ package.json      # Dependencies & scripts
├─ vite.config.js    # Vite configuration
└─ README.md

The Entry Point: main.jsx

Let's look at src/main.jsx! This is where React "attaches" to the DOM!

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Your First Component: App.jsx

Let's see src/App.jsx! This is the main component!

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
    </div>
  );
}

export default App;

Let's Modify It!

Let's make our own version! Replace App.jsx with:

function App() {
  return (
    <div>
      <h1>Hello React! 🚀</h1>
      <p>This is my first React app!</p>
    </div>
  );
}

export default App;

Save the file - Vite will automatically refresh the page! That's Hot Module Replacement (HMR)!

package.json Scripts

Your package.json has scripts!

{
  "scripts": {
    "dev": "vite",          // Start dev server
    "build": "vite build",  // Build for production
    "preview": "vite preview" // Preview production build
  }
}

Best Practices for React Projects

1. Use Vite, not Create React App: Vite is faster and modern!
2. Organize your components: Create a components/ folder!
3. Use .jsx for React components: Clearer what's a component!
4. Set up ESLint & Prettier: Keep code clean!

Common Mistakes

1. Forgetting to install dependencies: Run npm install after cloning!
2. Not using the right port: Vite uses 5173 by default, not 3000!
3. Typos in imports: Case-sensitive!

Interview Insights

Interviewers might ask:

• What tool do you use to set up React projects?
• Why Vite over CRA?
• What's in package.json?

FAQs

Q: Is Create React App (CRA) still used? A: Not really! Vite is now the recommended way! CRA is outdated and slow!

Q: What is Vite, exactly? A: Vite is a build tool that's fast! Uses ES modules, no bundling in dev!

Q: Do I need to use TypeScript? A: No, but it's recommended for larger projects! We'll cover TypeScript later!

Summary

You just created your first React app with Vite! You learned project structure, HMR, and the basics! Now let's keep going!

Related Articles

• First React App
• JSX Introduction

Previous Tutorial

← Virtual DOM

Next Tutorial

Let's learn JSX! → Introduction to JSX