react

⚛️ React Development Container

Modern React development environment with TypeScript, Vite, and essential tooling

📋 Overview

This development container provides a complete React development environment with:

• ✅ Node.js 20 LTS
• ✅ React with TypeScript support
• ✅ Vite and Create React App
• ✅ ESLint and Prettier
• ✅ Multiple package managers (npm, yarn, pnpm)
• ✅ Hot reload development server

🚀 Quick Start

1. Open in VS Code

   code .

2. Reopen in Container

   • Press F1 → Dev Containers: Reopen in Container

3. Create your first React app

   With Vite (Recommended):

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

   With Create React App:

   npx create-react-app my-app --template typescript
   cd my-app
   npm start

🛠️ Included Tools

Runtime & Package Managers

• 📦 Node.js 20 - Latest LTS version
• 🔧 npm - Default package manager
• 🧶 yarn - Fast package manager
• ⚡ pnpm - Efficient package manager

Build Tools

• ⚡ Vite - Next-generation frontend tooling
• 🏗️ Create React App - Official React setup
• 📘 TypeScript - Type-safe JavaScript

Code Quality

• ✨ ESLint - JavaScript linter
• 💅 Prettier - Code formatter

📦 VS Code Extensions

• dsznajder.es7-react-js-snippets - React snippets
• dbaeumer.vscode-eslint - ESLint integration
• esbenp.prettier-vscode - Prettier formatter
• formulahendry.auto-rename-tag - Auto rename tags
• bradlc.vscode-tailwindcss - Tailwind CSS support
• christian-kohler.npm-intellisense - NPM IntelliSense
• styled-components.vscode-styled-components - Styled components

🎨 Customization

Multi-Stage Dockerfile

1. base - Node.js 20
2. build-tools - Package managers
3. dev-tools - React tools, TypeScript
4. tools - Additional utilities
5. development - Dev environment
6. builder - Build stage
7. production - Nginx runtime

💡 Usage Examples

Create Projects

# Vite + React + TypeScript
npm create vite@latest my-app -- --template react-ts

# Vite + React + JavaScript
npm create vite@latest my-app -- --template react

# Create React App with TypeScript
npx create-react-app my-app --template typescript

# Create React App with JavaScript
npx create-react-app my-app

Development

# Install dependencies
npm install

# Start development server (Vite)
npm run dev

# Start development server (CRA)
npm start

# Build for production
npm run build

# Preview production build (Vite)
npm run preview

Package Management

# Using npm
npm install react-router-dom
npm install -D @types/node

# Using yarn
yarn add react-router-dom
yarn add -D @types/node

# Using pnpm
pnpm add react-router-dom
pnpm add -D @types/node

Code Quality

# Lint code
npm run lint

# Format code
npx prettier --write .

# Type check
npx tsc --noEmit

📚 Popular Libraries

# Routing
npm install react-router-dom

# State Management
npm install zustand
npm install @reduxjs/toolkit react-redux
npm install jotai

# UI Libraries
npm install @mui/material @emotion/react @emotion/styled
npm install antd
npm install @chakra-ui/react @emotion/react

# Styling
npm install -D tailwindcss postcss autoprefixer
npm install styled-components
npm install @emotion/react @emotion/styled

# Forms
npm install react-hook-form
npm install formik yup

# HTTP Client
npm install axios
npm install @tanstack/react-query

# Testing
npm install -D vitest @testing-library/react @testing-library/jest-dom

🐛 Debugging

Press F5 to launch Chrome debugger with your React app.

🌐 Ports

• 3000 - Create React App default
• 5173 - Vite default

📚 Resources

• React Documentation
• Vite Documentation
• TypeScript Documentation
• Create React App

---

Happy Coding! 🎉