Setting Up a React Development Environment

Creating a New React App with CRA

# Using npx (recommended)
npx create-react-app my-app

# Using npm
npm init react-app my-app

# Using yarn
yarn create react-app my-app

# With TypeScript template
npx create-react-app my-app --template typescript

# With specific package manager
npx create-react-app my-app --use-npm
# or
npx create-react-app my-app --use-pnpm
                

After running these commands, CRA will set up a new project with all the necessary dependencies and configuration. It will also initialize a Git repository and perform an initial commit.

CRA Project Structure

my-app/
├── README.md               # Project documentation
├── node_modules/           # Installed packages
├── package.json            # Dependencies and scripts
├── .gitignore              # Git ignore file
├── public/                 # Static files
│   ├── favicon.ico         # Favicon file
│   ├── index.html          # HTML template
│   ├── logo192.png         # Small logo
│   ├── logo512.png         # Large logo
│   ├── manifest.json       # PWA manifest
│   └── robots.txt          # Robots file
└── src/                    # Source code
    ├── App.css             # App component styles
    ├── App.js              # Main App component
    ├── App.test.js         # App component test
    ├── index.css           # Global styles
    ├── index.js            # Entry point
    ├── logo.svg            # React logo
    ├── reportWebVitals.js  # Performance monitoring
    └── setupTests.js       # Test configuration
                

This structure provides a good starting point for React applications. The src directory is where you'll spend most of your time, adding components, styles, and other application code.

Available Scripts

# Start development server
npm start
# or
yarn start

# Run tests
npm test
# or
yarn test

# Build for production
npm run build
# or
yarn build

# Eject from CRA
npm run eject
# or
yarn eject
                

Create React App provides these built-in scripts to handle common development tasks. The "eject" command is a one-way operation that exposes all the configuration files and dependencies, giving you full control but removing the ability to receive CRA updates.

Customizing the Environment

# Create .env file in the project root
touch .env

# Add environment variables (must start with REACT_APP_)
# .env file content:
REACT_APP_API_URL=https://api.example.com
REACT_APP_FEATURE_FLAG=true
REACT_APP_VERSION=$npm_package_version

# Using environment variables in your code
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>API URL: {process.env.REACT_APP_API_URL}</p>
        <p>Version: {process.env.REACT_APP_VERSION}</p>
        {process.env.REACT_APP_FEATURE_FLAG === 'true' && (
          <p>🎉 New feature is enabled!</p>
        )}
      </header>
    </div>
  );
}
                

Environment variables provide a way to customize your application for different environments (development, staging, production) without changing the code. In Create React App, environment variables must start with REACT_APP_ to be included in the bundle.

Setting Up a React Project with Vite

# Using npm
npm create vite@latest my-react-app -- --template react

# Using yarn
yarn create vite my-react-app --template react

# Using pnpm
pnpm create vite my-react-app --template react

# With TypeScript
npm create vite@latest my-react-app -- --template react-ts
                

After creation, you'll need to install dependencies and start the development server:

cd my-react-app
npm install  # or yarn or pnpm install
npm run dev  # or yarn dev or pnpm dev
                

Vite Project Structure

my-react-app/
├── README.md               # Project documentation
├── node_modules/           # Installed packages
├── package.json            # Dependencies and scripts
├── vite.config.js          # Vite configuration
├── index.html              # HTML template (at root level)
├── public/                 # Static files
│   └── vite.svg            # Vite logo
└── src/                    # Source code
    ├── App.css             # App component styles
    ├── App.jsx             # Main App component
    ├── index.css           # Global styles
    ├── main.jsx            # Entry point
    └── assets/             # Static assets
        └── react.svg       # React logo
                

Unlike CRA, Vite places the HTML template at the root level and treats it as the entry point. This reflects Vite's approach of leveraging native ES modules during development.

Setting Up a Next.js Project

# Using npx
npx create-next-app@latest my-next-app

# Using yarn
yarn create next-app my-next-app

# Using pnpm
pnpm create next-app my-next-app

# With TypeScript
npx create-next-app@latest my-next-app --typescript
                

After creation, you can start the development server:

cd my-next-app
npm run dev  # or yarn dev or pnpm dev
                

Next.js Project Structure

my-next-app/
├── README.md               # Project documentation
├── node_modules/           # Installed packages
├── package.json            # Dependencies and scripts
├── .eslintrc.json          # ESLint configuration
├── next.config.js          # Next.js configuration
├── public/                 # Static files
│   ├── favicon.ico         # Favicon file
│   └── vercel.svg          # Vercel logo
└── pages/                  # File-based routing
    ├── _app.js             # Custom App component
    ├── _document.js        # Custom Document component
    ├── index.js            # Home page
    └── api/                # API routes
        └── hello.js        # Example API endpoint
└── styles/                 # CSS styles
    ├── globals.css         # Global styles
    └── Home.module.css     # CSS modules
                

Next.js uses a file-based routing system where files in the pages directory automatically become routes. This is a key difference from CRA and Vite.

Setting Up a Remix Project

# Using npx
npx create-remix@latest my-remix-app

# When prompted, choose:
# - Just the basics
# - Remix App Server
# - TypeScript or JavaScript
# - Run npm install

# Start the development server
cd my-remix-app
npm run dev
                

Remix will guide you through a few decisions during setup, allowing you to customize your starting point.

Remix Project Structure

my-remix-app/
├── README.md               # Project documentation
├── node_modules/           # Installed packages
├── package.json            # Dependencies and scripts
├── remix.config.js         # Remix configuration
├── app/                    # Application code
│   ├── entry.client.tsx    # Client entry point
│   ├── entry.server.tsx    # Server entry point
│   ├── root.tsx            # Root component
│   ├── routes/             # Route components
│   │   ├── index.tsx       # Home page
│   │   └── about.tsx       # About page
│   └── styles/             # CSS styles
│       └── global.css      # Global styles
├── public/                 # Static files
│   └── favicon.ico         # Favicon file
└── server.js               # Server entry point
                

Remix uses a nested route structure in the app/routes directory, which is different from both CRA and Next.js approaches.

ESLint Configuration

# Install ESLint with React support
npm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks

# Create ESLint configuration file
# .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', 'react-hooks'],
  rules: {
    // Custom rules
    'react/prop-types': 'warn',
    'react/react-in-jsx-scope': 'off', // Not needed in React 17+
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'no-unused-vars': 'warn',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};
                

This configuration enforces React best practices, including the Rules of Hooks. You can adjust the rules to match your team's preferences.

Prettier Configuration

# Install Prettier
npm install --save-dev prettier

# Create Prettier configuration file
# .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid"
}

# Create .prettierignore file
# .prettierignore
build
dist
node_modules
coverage
                

Prettier ensures consistent code formatting across your team, reducing code review discussions about style.

Integrating ESLint with Prettier

# Install integration packages
npm install --save-dev eslint-config-prettier eslint-plugin-prettier

# Update ESLint configuration
# .eslintrc.js
module.exports = {
  // Previous config...
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended', // Add this line
  ],
  // Rest of config...
};
                

This integration ensures that ESLint and Prettier work together without conflicts.

Adding TypeScript to an Existing Project

# Install TypeScript and React types
npm install --save-dev typescript @types/react @types/react-dom @types/node

# Create a basic tsconfig.json file
# tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}
                

After setting up TypeScript, you can gradually convert your .js/.jsx files to .ts/.tsx files.

Converting a Component to TypeScript

// Before: UserProfile.jsx
import React from 'react';

function UserProfile({ name, age, roles }) {
  return (
    <div className="user-profile">
      <h2>{name}, {age}</h2>
      <ul>
        {roles.map(role => (
          <li key={role}>{role}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserProfile;

// After: UserProfile.tsx
import React from 'react';

interface UserProfileProps {
  name: string;
  age: number;
  roles: string[];
  isActive?: boolean; // Optional prop
}

function UserProfile({ name, age, roles, isActive = true }: UserProfileProps) {
  return (
    <div className={`user-profile ${isActive ? 'active' : 'inactive'}`}>
      <h2>{name}, {age}</h2>
      <ul>
        {roles.map(role => (
          <li key={role}>{role}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserProfile;
                

TypeScript provides clear documentation of the component's API through interfaces, making it easier for other developers to use your components correctly.

Create React App Configuration

# Using CRACO (Create React App Configuration Override)
npm install --save-dev @craco/craco

# Create craco.config.js in the project root
# craco.config.js
const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@hooks': path.resolve(__dirname, 'src/hooks'),
      '@utils': path.resolve(__dirname, 'src/utils'),
      '@styles': path.resolve(__dirname, 'src/styles'),
    },
    plugins: [
      // Add custom webpack plugins here
    ],
  },
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
};

# Update package.json scripts
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}
                

CRACO allows you to customize the webpack configuration without ejecting from Create React App.

Vite Configuration

# vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@hooks': path.resolve(__dirname, './src/hooks'),
      '@utils': path.resolve(__dirname, './src/utils'),
    },
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    outDir: 'build',
    sourcemap: true,
    chunkSizeWarningLimit: 1600,
  },
});
                

Vite has a more straightforward configuration system that's easier to customize.

Next.js Configuration

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['images.example.com', 'cdn.someservice.com'],
  },
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://api.example.com/:path*',
      },
    ];
  },
  env: {
    NEXT_PUBLIC_ANALYTICS_ID: 'your-analytics-id',
  },
}

module.exports = nextConfig
                

Next.js has its own configuration system that provides features specific to its architecture, such as image optimization, redirects, and rewrites.