Create React App Vite Setup: Tutorial, Examples, FAQs & Interview Tips

Prerequisites

Before starting React, make sure you are comfortable with basic HTML, CSS, and JavaScript. React is much easier to understand when you already know how a normal web page works and how JavaScript changes data in the browser.

HTML & CSS - basic structure and styling
JavaScript (ES6+) - arrow functions, destructuring, spread, modules, promises
Node.js & npm - required to run the development toolchain

Step 1: Create a React Project

The recommended way to create a new React app is using Vite. It is fast, simple, and designed for modern front-end development. You may still find Create React App in older tutorials, but for new projects Vite is generally the better option.

Create React App - Vite (Recommended) and CRA

# Create a new React project with Vite
npm create vite@latest my-app -- --template react

# Navigate into the project
cd my-app

# Install dependencies
npm install

# Start development server (http://localhost:5173)
npm run dev

# Build for production
npm run build

# Create React App (older, slower, but still widely used)
npx create-react-app my-app

cd my-app

# Start development server (http://localhost:3000)
npm start

# Build for production
npm run build

Step 2: Understand the Setup Commands

These commands set up the React project and prepare your local environment for development.

npm create vite@latest my-app -- --template react creates a React project named my-app
cd my-app moves into the project folder
npm install installs all required packages
npm run dev starts the local development server
npm run build creates an optimized production build

After running npm run dev, Vite usually gives a URL such as http://localhost:5173. Open it in the browser and you will see your React app.

Project Structure

A React project contains a few important files. The most useful ones for beginners are index.html, src/main.jsx, and src/App.jsx.

Vite React Project Structure

my-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/          # images, fonts
│   ├── components/      # reusable components
│   ├── App.jsx          # root component
│   ├── App.css
│   ├── main.jsx         # entry point - renders App into DOM
│   └── index.css
├── index.html           # HTML template
├── package.json
├── vite.config.js
└── .eslintrc.cjs

// src/App.jsx - Root component
import { useState } from 'react'
import './App.css'

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

    return (
        <div className="App">
            <h1>Hello, React!</h1>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    )
}

export default App

// src/main.jsx - Entry point
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

// Mount the React app into the #root div in index.html
ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
)

main.jsx is the entry point of the app. It tells React to render the App component inside the root element in index.html. The App.jsx file is usually your main starting component.

Step 3: Write Your First Component

A React component is a JavaScript function that returns JSX. JSX looks similar to HTML, but it is written inside JavaScript and used to describe the UI.

First React Component

function Welcome() {
    return (
        <div>
            <h2>Hello, React!</h2>
            <p>This is my first component.</p>
        </div>
    )
}

export default Welcome

You can save this in a file like Welcome.jsx and then use it inside App.jsx.

Use the Component in App.jsx

import Welcome from './Welcome'

function App() {
    return (
        <div>
            <h1>My React App</h1>
            <Welcome />
        </div>
    )
}

export default App

Step 4: Add Interactivity with State

State is used to store values that can change over time. When state changes, React updates the UI automatically.

Counter Example with useState

import { useState } from 'react'

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

    return (
        <div>
            <p>Current count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increase
            </button>
        </div>
    )
}

export default Counter

In this example, useState(0) creates a state variable named count with an initial value of 0. Every click updates the value and React re-renders the component.

Step 5: Pass Data with Props

Props are used to pass data from one component to another. This makes components flexible and reusable.

Props Example

function Greeting(props) {
    return <h2>Hello, {props.name}!</h2>
}

export default Greeting

import Greeting from './Greeting'

function App() {
    return (
        <div>
            <Greeting name="Aman" />
            <Greeting name="Sara" />
        </div>
    )
}

export default App

How React Reaches the Browser

The browser first loads index.html. Inside it, there is usually a root element. React mounts the app into that element and then controls everything inside it.

Root Element in index.html

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

What to Learn Next

JSX for writing UI inside JavaScript
Components for building reusable UI blocks
Props for passing data
State and hooks like useState for interactivity
Forms, events, and routing for real applications

Key Takeaways

Vite is the recommended way to create a new React project.
The most important beginner files are index.html, src/main.jsx, and src/App.jsx.
A React component is a JavaScript function that returns JSX.
State stores changing values and React updates the UI when state changes.
Props let one component pass data to another component.
npm run dev starts the local server and npm run build creates the production build.