React Getting Started

React Getting Started: Environment Setup & Vite Tooling

Setting up a modern React development environment requires Node.js (v18.0+) and NPM or PNPM. While create-react-app was historically standard, Vite is now the recommended tool for scaffolding fast React single-page applications (SPAs).

Scaffolding a New React App with Vite

Execute the following commands in your terminal:

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

# Navigate into the project folder
cd my-react-app

# Install project dependencies
npm install

# Start local development server with Hot Module Replacement (HMR)
npm run dev

Project Directory Structure

my-react-app/
├── node_modules/
├── public/
│   └── favicon.svg
├── src/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
└── vite.config.js

Application Entry Point (src/main.jsx)

React 18 uses ReactDOM.createRoot to attach the root React component to the HTML DOM container:

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

// Acquire root container element from index.html
const rootElement = document.getElementById('root');

// Create concurrent root and render App inside StrictMode
ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Best Practices & Gotchas

• Use Vite over Create-React-App: Vite leverages native ES modules in development, offering instant startup times and sub-millisecond hot module reloads compared to Webpack-based CRA.
• Keep index.html at Project Root: In Vite projects, index.html lives in the project root folder (not public/), serving as the entry HTML file.

Self-Check Challenge

Initialize a local Vite React application using npm create vite@latest and verify that the dev server launches at http://localhost:5173.