Setting Up React Applications

Setting Up React Applications

Modern React development relies on build tooling for module bundling, hot-module replacement (HMR), transpilation, and optimized production builds.

Tooling Options for React

1. Vite (Recommended for modern apps)

[Vite](https://vitejs.dev/) is an extremely fast build tool powered by esbuild. It serves native ES modules during development and provides instantaneous hot module reloading.

# Create a React project using Vite
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

2. Next.js / Remix (Full-Stack Frameworks)

For production web applications requiring Server-Side Rendering (SSR), Static Site Generation (SSG), or built-in API routing, Meta recommends full-stack React frameworks like Next.js.

# Create a Next.js App
npx create-next-app@latest my-next-app

Anatomy of a React Project Structure

A standard Vite + React project directory contains:

my-react-app/
├── index.html          # Entry HTML template containing <div id="root"></div>
├── package.json        # Dependencies and build scripts
├── vite.config.js      # Vite configuration file
└── src/
    ├── main.jsx        # Mounts Root component to Real DOM
    ├── App.jsx         # Root Component
    └── App.css         # Component styling

Mounting the React App to DOM (createRoot)

React 18+ uses createRoot from react-dom/client to render the component tree into the DOM root container.

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Summary & TL;DR

• Vite is the recommended tool for creating fast, modern client-side React apps.
• Next.js is recommended for full-stack React applications needing SSR/SSG.
• React 18 uses ReactDOM.createRoot(document.getElementById('root')) to mount components.
• React.StrictMode highlights potential bugs and side-effect warnings during development.