[Setup] React Dictionary Development Environment

# 1. Check the Node.js version (v18 or later recommended)
node -v
npm -v

# ---- Using Create React App ----
# Create a new project (my-app is the project name)
npx create-react-app my-app

# Move into the created directory
cd my-app

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

# ---- Using Vite ----
# Create a project with the React + JavaScript template
npm create vite@latest my-app -- --template react

# Move into the created directory
cd my-app

# Install dependencies
npm install

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

# ---- Using TypeScript with Vite ----
# Create a project with the React + TypeScript template
npm create vite@latest my-app -- --template react-ts

An example of rewriting src/App.jsx — the file generated immediately after creating a project with Vite — to run your first component.

// src/App.jsx
// Rewriting the root component auto-generated by the Vite template

// Import React (required for using JSX)
import React from 'react';

// Welcome component definition
// Receives the name to display via the name prop
function Welcome({ name }) {
  return (
    <div style={{ textAlign: 'center', marginTop: '2rem' }}>
      {/* Display text centered on the screen */}
      <h1>Hello, {name}!</h1>
      <p>React environment setup is complete.</p>
    </div>
  );
}

// App component (root component)
// Calls Welcome to compose the application screen
function App() {
  return (
    // JSX must return a single root element
    <div>
      <Welcome name="Kusanagi Kyo" />
    </div>
  );
}

// Export App so it can be used from other files
export default App;

Steps to verify in the browser after starting the development server.

# Start the development server
npm run dev

# Open the URL shown in the terminal (e.g. http://localhost:5173) in a browser
# The browser updates automatically each time src/App.jsx is saved (hot reload)

To use React, first install Node.js (v18 or later recommended) so that npm and npx are available. Create React App or Vite are the common choices for creating a new project. Vite, with its fast startup and build times, is widely recommended in many situations.

After creating a project, both tools use the same directory layout: component source files go in the src/ folder and static files go in the public/ folder. The entry point is src/main.jsx (Vite) or src/index.js (Create React App).

During development, run npm run dev (Vite) or npm start (Create React App) to start the local server, and the browser updates automatically each time a file is saved. A production build is generated with npm run build.

Related pages: component / JSX

Accidentally including node_modules in git

The node_modules/ directory generated when creating a project is excluded from git tracking because it is listed in .gitignore. After cloning into another environment, run npm install to reinstall packages. Projects created with Vite or Create React App already include a .gitignore file from the start.

Development server failing to start due to a port conflict

Vite uses port 5173 by default and Create React App uses port 3000. If another application is already using the same port, the server will either fail to start or switch to a different port. Check the URL shown in the terminal output at startup and open it in your browser.

Deploying the wrong output directory after npm run build

Running npm run build outputs the built files to dist/ for Vite and build/ for Create React App. When deploying to a server, place the contents of the build output directory — not the development src/ directory.