Web Development Tools With a Focus on git Docker and React

TL;DR

Master Git with conventional commits and GitHub Actions, containerize with Docker multi-stage builds, build React with Vite (not deprecated Create React App), and expand with modern tools like Bun, Turborepo, and pnpm to streamline development and deployment workflows.

Web development tools have evolved dramatically. What was cutting-edge in 2020 is stale in 2026. Create React App is deprecated. npm is no longer the default package manager for many teams. Docker skills are table-stakes. CI/CD isn't optional.

This guide covers the tools that matter in professional web development today, with focus on Git, Docker, and React—the trinity that handles source control, deployment, and user interfaces.

Git: Version Control as Infrastructure

Git is not just version control; it's the backbone of team development. Mastery means more than git push and git pull.

Core Concepts You Need

Commits and Commit Messages: A commit should represent one logical change. Write clear commit messages. Industry standard in 2026 is Conventional Commits:

type(scope): subject

body

footer

Example:

feat(auth): add JWT token refresh mechanism

Implement automatic token refresh on API requests.
Store refresh token in secure cookie. Add tests for edge cases.

Fixes #456
Refs #789

Types: feat, fix, docs, style, refactor, test, chore, perf

This format enables automated changelog generation and makes git history readable.

Branches: Use feature branches. Typical workflow:

• Main branch (production-ready)
• Develop branch (integration branch)
• Feature branches (one per feature)

Branch naming convention: feature/user-auth, fix/sidebar-overflow, docs/api-guide

Merge vs Rebase: Merge creates a merge commit (clutters history). Rebase rewrites history (cleaner). For team development, squash commits during PR merge to keep main branch clean.

Pull Requests: More than code review, PRs are where team communication happens. Use PR templates to standardize information:

## Description
What does this PR do?

## Testing
How was this tested?

## Screenshots
(if UI change)

## Related Issues
Fixes #123

GitHub and Advanced Workflows

GitHub Actions: Automate testing, linting, and deployment on every push. Basic workflow:

name: Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm install
      - run: npm run test
      - run: npm run lint

This runs automatically on every push. Failing tests block merging to main.

Secrets Management: Use GitHub Secrets for API keys, credentials. Never commit .env files with real values.

Docker: Containerization and Deployment

Docker packages your application and its dependencies into a container—guaranteed to work the same everywhere.

Why Docker Matters

Development environment mismatch ("works on my machine") is eliminated. Deployment is reproducible. Scaling is possible. In 2026, if your application isn't containerized, you're behind.

Dockerfile Essentials

A basic Dockerfile:

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

RUN npm run build

EXPOSE 3000
CMD ["npm", "start"]

But this is naive: the resulting image is huge.

Multi-Stage Builds (The Modern Way)

# Build stage
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Runtime stage
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
COPY package*.json ./
EXPOSE 3000
CMD ["npm", "start"]

Multi-stage builds result in much smaller final images by excluding build dependencies.

Docker Compose for Local Development

Dockerfile alone isn't enough. You likely need a database, cache, etc. Docker Compose orchestrates multiple containers:

version: '3.9'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    depends_on:
      - db
    environment:
      DATABASE_URL: postgres://user:pass@db:5432/app

  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: app
    volumes:
      - db-data:/var/lib/postgresql/data

volumes:
  db-data:

With this, docker-compose up spins up your entire stack locally, matching production.

Dev Containers

Visual Studio Code and GitHub Codespaces support Dev Containers: Docker containers as your development environment. Your entire team uses identical environments (same Node version, same PostgreSQL, etc.).

.devcontainer/devcontainer.json:

{
  "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:18",
  "postCreateCommand": "npm install",
  "forwardPorts": [3000, 5432]
}

React: Building User Interfaces

React remains the dominant framework. The tooling has changed significantly from 2024.

Vite: The New Standard (Not Create React App)

Create React App (CRA) was officially sunsetted as of February 14, 2025. Use Vite instead.

Why Vite is Better:

• Instant dev server startup (CRA: 30+ seconds; Vite: < 1 second)
• Fast hot module replacement (CRA: 3-5 seconds; Vite: < 100ms)
• Smaller bundle sizes
• Better plugin ecosystem

Setting up React with Vite:

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

That's it. You have a React application with:

• Vite dev server
• Production build optimization
• Module resolution
• CSS modules support

React 19 Features Worth Knowing

React 19 (released December 5, 2024) includes:

• Server Components (stable): Functions that run only on the server, reducing client-side JavaScript
• useFormStatus hook: Hook into form submission state without manual tracking
• Automatic Batching (now universal): Updates are batched for better performance

For most projects, using Next.js (which implements Server Components by default) handles these. Direct React 19 features matter more for frameworks like Remix.

TypeScript in React

TypeScript in React is no longer optional. Your Vite template includes TypeScript by default:

interface UserProps {
  name: string;
  age: number;
}

export function User({ name, age }: UserProps) {
  return <div>{name}, {age}</div>;
}

Key types:

• Props: Interface for component props
• State: Type for useState values
• Event handlers: React.ChangeEvent, React.FormEvent

Component Testing

Vitest (Vite's test runner) and React Testing Library are the modern standard:

import { render, screen } from '@testing-library/react';
import { User } from './User';

describe('User', () => {
  it('renders user info', () => {
    render(<User name="Alice" age={30} />);
    expect(screen.getByText('Alice, 30')).toBeInTheDocument();
  });
});

Supporting Tools

Package Managers: pnpm and Bun

npm vs pnpm: pnpm is 2-3x faster, uses 50% less disk space, and has better dependency resolution. Many teams have switched.

Bun: An alternative to Node.js written in Rust. Ultra-fast package installation, native TypeScript support, bundler, test runner. Still relatively new but gaining adoption.

Monorepos: Turborepo and Nx

Large projects often use monorepos: multiple packages in one repository. Turborepo simplifies this:

{
  "tasks": {
    "build": {
      "outputs": ["dist/**"],
      "cache": true
    }
  }
}

Turborepo caches builds, so rebuilding unchanged packages is instant.

Code Quality

ESLint: Linting enforces code quality rules. Modern config (2026):

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaVersion": 2024,
    "sourceType": "module"
  }
}

Prettier: Auto-formatting. No more style debates. Everyone's code looks identical.

Husky: Git hooks for automation. Run tests/linting before allowing commits:

npx husky add .husky/pre-commit "npm run lint"

Typical Development Workflow

1. Branch: git checkout -b feature/new-component
2. Develop: Code locally with Vite dev server (hot reload)
3. Test: npm run test (Vitest)
4. Lint: npm run lint (ESLint, Prettier)
5. Commit: git commit -m "feat(components): add button variants"
6. Push: git push origin feature/new-component
7. PR: Create pull request on GitHub
8. CI/CD: GitHub Actions runs tests, linting, builds Docker image
9. Review: Team reviews code
10. Merge: Squash and merge to main
11. Deploy: GitHub Actions deploys to production

Conclusion

The web development toolkit has matured significantly. Vite replaced Create React App. pnpm and Bun challenge npm. Docker is table-stakes. Git workflows are standardized. CI/CD is automatic.

Mastery of these tools separates junior developers from professional ones. A junior writes code that works. A professional writes code that's deployable, testable, and maintainable. These tools enable that professionalism.

Focus on mastering this stack deeply: Git for source control, Docker for deployment, React with Vite for UI, TypeScript for safety, and GitHub Actions for automation. These five areas cover 80% of what you need to ship production-quality web applications.