Create a React App with Vite

Vite is the recommended tool — fast development server and optimized builds.

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

Open http://localhost:5173 in your browser.

TypeScript Template 

  npm create vite@latest my-react-app -- --template react-ts

Project Structure 

  my-react-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── App.jsx          # Root component
│   ├── App.css
│   ├── main.jsx         # Entry point
│   └── index.css        # Global styles
├── index.html           # HTML shell
├── package.json
└── vite.config.js

Entry Point

src/main.jsx:

  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>
);

index.html:

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

Root Component

src/App.jsx:

  function App() {
    return (
        <div className="app">
            <h1>Hello, React!</h1>
            <p>Welcome to JS Code Camp</p>
        </div>
    );
}

export default App;

npm Scripts 

  {
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}
  
  npm run dev      # Development server with hot reload
npm run build    # Production build → dist/
npm run preview  # Preview production build locally

Folder Organization (Growing Apps) 

  src/
├── components/     # Reusable UI components
├── pages/          # Route-level components
├── hooks/          # Custom hooks
├── utils/          # Helper functions
├── services/       # API calls
├── context/        # React Context providers
└── assets/         # Images, fonts

ESLint Setup

Vite templates include ESLint. Run:

  npm run lint

You’re ready to write JSX and build components in the next chapters.