---
title: Web Development Tools With a Focus on git Docker and React
description: 'The modern web dev toolkit: Git workflows that scale, Docker for reproducible builds, and React patterns that keep apps fast — with practical setups.'
url: https://nerdleveltech.com/web-development-tools-with-a-focus-on-git-docker-and-react
language: en
date: '2023-01-15'
updated: '2026-03-27'
category: tooling
tags:
  - git
  - docker
  - react
  - developer-tools
  - recreated
markdown_url: https://nerdleveltech.com/web-development-tools-with-a-focus-on-git-docker-and-react.md
attribution: 'Source: NerdLevelTech — https://nerdleveltech.com/web-development-tools-with-a-focus-on-git-docker-and-react'
terms: https://nerdleveltech.com/llms.txt
---

# 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.

## Introduction

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[^git-docs]. 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:
```markdown
## 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:

```yaml
name: Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6
      - uses: actions/setup-node@v6
        with:
          node-version: 22
      - 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[^docker-docs].

### 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:

```dockerfile
FROM node:22-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)

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

# Runtime stage
FROM node:22-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:

```yaml
services:
  app:
    build: .
    ports:
      - "3000:3000"
    depends_on:
      - db
    environment:
      DATABASE_URL: postgres://user:pass@db:5432/app

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

volumes:
  db-data:
```

(The top-level `version:` key is no longer required in Docker Compose v2 and will trigger a warning if included.)

With this, `docker compose up` (Compose v2 is now a Docker CLI plugin — note the space, not a hyphen) 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`:
```json
{
  "image": "mcr.microsoft.com/devcontainers/typescript-node:22",
  "postCreateCommand": "npm install",
  "forwardPorts": [3000, 5432]
}
```

## React: Building User Interfaces

React remains the dominant UI library. The tooling around it has changed significantly since 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:**

```bash
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; latest minor as of mid-2026 is 19.2) includes:
- **Server Components** (stable): Components that run only on the server, reducing client-side JavaScript
- **Actions and `useActionState`**: First-class async functions for form submissions and mutations, with built-in pending state and error handling
- **`useFormStatus` hook**: Read the submission state of a parent `<form>` from any descendant without prop drilling
- **`useOptimistic` hook**: Show optimistic UI updates while a server mutation is in flight
- **The new `use` API**: Read promises and context conditionally inside render
- **Document metadata**: Render `<title>`, `<meta>`, and `<link>` tags directly in components — React hoists them into the document head

(Automatic batching is sometimes attributed to React 19 — it actually shipped in React 18.)

For most projects, using a framework like Next.js (which implements Server Components and Actions out of the box) is the easiest path to these features.

### TypeScript in React

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

```tsx
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:

```tsx
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 all-in-one JavaScript runtime, bundler, test runner, and package manager — written in Zig and powered by JavaScriptCore. Ultra-fast package installation, native TypeScript support. Designed as a drop-in replacement for Node.js, with roughly 95% Node compatibility as of 2026. Used in production by teams who can tolerate occasional package edge cases.

### Monorepos: Turborepo and Nx

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

```json
{
  "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):

```json
{
  "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. The legacy `husky add` command was removed in Husky v9 (2024); the modern setup creates the hook file directly:

```bash
# In package.json: "prepare": "husky"
npm install --save-dev husky
npx husky init
echo "npm run lint" > .husky/pre-commit
```

## 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.

[^docker-docs]: Docker Documentation. https://docs.docker.com/
[^git-docs]: Git Documentation. https://git-scm.com/doc