React Development and Deployment Guide

Prerequisites

Before building React from source, ensure you have the following installed:

Node.js: LTS version (18.x or higher recommended)
Yarn: React uses Yarn for package management (v1.x classic or v3+ with node_modules)
Git: For cloning the repository
C++ Build Tools: Required for compiling native dependencies (Windows: Visual Studio Build Tools, macOS: Xcode Command Line Tools, Linux: build-essential)

Verify your environment:

node --version  # Should be v18.0.0 or higher
yarn --version  # Should be 1.22.x or 3.x+
git --version

Installation

1. Clone the Repository

git clone https://github.com/facebook/react.git
cd react

2. Install Dependencies

React uses a monorepo structure managed by Yarn workspaces:

# Install all dependencies across packages
yarn install

This will install dependencies for:

packages/react - Core React library
packages/react-dom - React DOM renderer
packages/react-reconciler - Reconciliation algorithm
packages/react-client - Server Components client
And other internal packages

Configuration

Environment Variables

Set up your development environment:

# Enable development mode
export NODE_ENV=development

# For running specific test configurations
export REACT_CLASS_EQUIVALENCE_TEST=1

Feature Flags (Optional)

React uses feature flags to enable experimental functionality. Edit packages/shared/ReactFeatureFlags.js to toggle features:

// Enable experimental features for development
export const enableGestureTransition = true;
export const enableTransitionTracing = true;
export const enableProfilerTimer = true;

Build Configuration

Create a .env file in the root for local build settings:

# Use concurrent mode for testing
REACT_STRICT_MODE=1

Build & Run

Building React Packages

Build all packages from source:

# Build all packages in development mode
yarn build

# Build for production
yarn build --type=NODE_PRODUCTION

# Build specific packages (e.g., react and react-dom)
yarn build react/index,react-dom/index

Output will be in build/ directory with separate folders for:

node_modules/ - Built packages ready for linking
dist/ - Bundled artifacts

Running Tests

# Run all tests
yarn test

# Run tests for specific package
yarn test packages/react-reconciler

# Run tests in watch mode
yarn test --watch

# Run with coverage
yarn test --coverage

Development Workflow

For testing changes in a real application:

# Build and link packages locally
yarn build
cd build/node_modules/react
yarn link

# In your test project
yarn link react react-dom

Running Examples

# Navigate to specific fixtures
cd fixtures/fiber-debugger
yarn install
yarn start

# Or for SSR examples
cd fixtures/ssr
yarn start

Type Checking

React uses Flow for type checking:

# Run Flow type checker
yarn flow

# Check specific files
yarn flow check packages/react-reconciler/src/ReactFiberLane.js

Deployment

Publishing to npm (Maintainers Only)

# Bump versions and create release
yarn release --version=18.3.0

# Publish to npm (requires OTP)
yarn publish-release

Using Your Build in Production Projects

After building locally:

# Pack the built packages
cd build/node_modules/react
npm pack

# Install in your project
npm install ./path/to/react-18.3.0.tgz

Deploying React Applications

For applications using React (not the library itself):

Static Site (Recommended):

# Build for production
npm run build

# Deploy to Vercel, Netlify, or GitHub Pages
vercel --prod

Docker Deployment:

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Server-Side Rendering:

# Build server bundle
npm run build:server

# Start Node.js server
node server/index.js

Troubleshooting

Build Failures

Issue: Error: Cannot find module 'react-reconciler' Solution: Ensure you've built dependencies in order:

yarn build react/index,react-dom/index,react-reconciler

Issue: Flow type errors in node_modules Solution: Clear cache and restart:

yarn flow stop
rm -rf node_modules/.flow-typed
yarn install
yarn flow

Test Failures

Issue: Tests fail with "Cannot find shared/ReactFeatureFlags" Solution: Rebuild the shared package:

yarn build shared

Issue: Jest timeout errors Solution: Increase timeout for slow machines:

yarn test --testTimeout=30000

Development Issues

Issue: Changes not reflecting in linked project Solution: Rebuild after changes and ensure proper linking:

yarn build
# In your test project
rm -rf node_modules/.cache
yarn start --force

Issue: View Transition or experimental features not working Solution: Enable feature flags in packages/shared/ReactFeatureFlags.js:

export const enableGestureTransition = true;
export const enableViewTransition = true;

Then rebuild: yarn build

Node Version Compatibility

Issue: ERR_OSSL_EVP_UNSUPPORTED during build Solution: Use Node.js 18 LTS or set:

export NODE_OPTIONS=--openssl-legacy-provider

Issue: Native module compilation errors Solution: Install build tools:

macOS: xcode-select --install
Windows: Install Visual Studio Build Tools with "Desktop development with C++" workload
Linux: sudo apt-get install build-essential

How to Deploy & Use facebook/react