# How to Install React Manually Without Create React App: A Complete Guide

> Learn to install React manually without Create React App. Add core packages, configure Babel, and set up a bundler for module resolution and optimizations.

- Repository: [Meta/react](https://github.com/facebook/react)
- Tags: how-to-guide
- Published: 2026-02-18

---

**You can install React manually by adding the core `react` package and a renderer like `react-dom`, configuring Babel to transpile JSX, and setting up a bundler such as Webpack or Vite to handle module resolution and production optimizations.**

When learning how to install React for a new project, many developers start with Create React App (CRA). However, manually configuring your build pipeline gives you full control over transpilation, bundling, and optimization settings. This guide walks you through the essential steps based on the actual implementation in the `facebook/react` repository.

## Core Requirements for Installing React Manually

Manual setup requires addressing three fundamental concerns that CRA handles automatically: package selection, JSX transformation, and build tooling.

### Package Selection: React Core and Renderers

The `react` package only defines the component model and reconciliation logic. To actually render UI elements, you must install a renderer such as `react-dom` for web applications or `react-native` for mobile apps.

According to the [`packages/react/README.md`](https://github.com/facebook/react/blob/main/packages/react/README.md) in the `facebook/react` source, the core package provides the API for defining components, while the renderer handles the platform-specific implementation details.

### JSX Transpilation with Babel

Browsers cannot interpret JSX syntax directly. You need a transpiler to convert JSX into `React.createElement` calls. The standard approach uses Babel with the `@babel/preset-react` preset, though TypeScript's built-in JSX transformation is also valid.

The root [`package.json`](https://github.com/facebook/react/blob/main/package.json) in the `facebook/react` repository lists Babel as a development dependency, confirming its role in the React build process.

### Build Tooling and Bundlers

You need a bundler to resolve `node_modules` dependencies, handle static assets like CSS and images, and output optimized bundles. Popular choices include Webpack, Vite, Rollup, and Parcel. Your configuration must distinguish between **development** and **production** builds, using the production build of React ([`react.production.min.js`](https://github.com/facebook/react/blob/main/react.production.min.js)) for deployment to strip warning code and improve performance.

## Step-by-Step Guide: How to Install React Without CRA

Follow this workflow to manually configure a React project from scratch:

1. **Initialize the project** to create a [`package.json`](https://github.com/facebook/react/blob/main/package.json):

   ```bash
   npm init -y
   ```

2. **Install React core and DOM renderer**:

   ```bash
   npm install react react-dom
   ```

3. **Add development dependencies** for Webpack and Babel:

   ```bash
   npm install -D webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-react
   ```

4. **Configure Babel** by creating [`babel.config.json`](https://github.com/facebook/react/blob/main/babel.config.json):

   ```json
   {
     "presets": ["@babel/preset-react"]
   }
   ```

5. **Configure Webpack** by creating [`webpack.config.js`](https://github.com/facebook/react/blob/main/webpack.config.js):

   ```javascript
   const path = require('path');

   module.exports = {
     mode: process.env.NODE_ENV || 'development',
     entry: './src/index.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js',
       clean: true,
     },
     module: {
       rules: [
         {
           test: /\.[jt]sx?$/,
           exclude: /node_modules/,
           use: 'babel-loader',
         },
       ],
     },
     devServer: {
       static: './dist',
       hot: true,
     },
   };
   ```

6. **Create the source directory structure** and entry files:

   ```bash
   mkdir -p src public
   ```

7. **Create the HTML host page** at [`public/index.html`](https://github.com/facebook/react/blob/main/public/index.html):

   ```html
   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <title>Manual React Setup</title>
     </head>
     <body>
       <div id="root"></div>
       <script src="/bundle.js"></script>
     </body>
   </html>
   ```

8. **Create a React component** at [`src/App.jsx`](https://github.com/facebook/react/blob/main/src/App.jsx):

   ```jsx
   import { useState } from 'react';

   export default function App() {
     const [count, setCount] = useState(0);
     return (
       <>
         <h1>{count}</h1>
         <button onClick={() => setCount(c => c + 1)}>Increment</button>
       </>
     );
   }
   ```

9. **Create the application entry point** at [`src/index.js`](https://github.com/facebook/react/blob/main/src/index.js):

   ```javascript
   import { createRoot } from 'react-dom/client';
   import App from './App.jsx';

   const root = createRoot(document.getElementById('root'));
   root.render(<App />);
   ```

10. **Add npm scripts** to [`package.json`](https://github.com/facebook/react/blob/main/package.json):

    ```json
    "scripts": {
      "start": "webpack serve --open",
      "build": "webpack"
    }
    ```

11. **Run the development server**:

    ```bash
    npm start
    ```

## Configuring Development vs Production Builds

When you install React manually, you must explicitly configure environment-specific builds. The `facebook/react` source code provides separate entry points for development and production modes.

For production deployments, set `NODE_ENV=production` before building:

```bash
NODE_ENV=production npm run build

```

This triggers Webpack's production optimizations and ensures your bundler pulls in [`react.production.min.js`](https://github.com/facebook/react/blob/main/react.production.min.js) and [`react-dom.production.min.js`](https://github.com/facebook/react/blob/main/react-dom.production.min.js). According to the note in [`packages/react/README.md`](https://github.com/facebook/react/blob/main/packages/react/README.md), the production build strips all warning code and error messages, significantly reducing bundle size and improving runtime performance.

## Summary

- **Manual React installation** requires three core components: the `react` package paired with a renderer like `react-dom`, a transpiler such as Babel for JSX transformation, and a bundler like Webpack or Vite.
- **JSX requires transformation** because browsers cannot parse it natively; `@babel/preset-react` converts JSX into `React.createElement` calls.
- **Production builds differ significantly** from development builds; manually configuring `NODE_ENV=production` ensures you ship the optimized [`react.production.min.js`](https://github.com/facebook/react/blob/main/react.production.min.js) bundle without development warnings.
- **Full control over the pipeline** allows custom optimizations, but requires explicit configuration of entry points, module resolution, and asset handling that Create React App manages automatically.

## Frequently Asked Questions

### Why do I need both `react` and `react-dom` packages when installing manually?

The `react` package provides the core API for creating components and managing state, but it contains no code for rendering to the browser DOM. The `react-dom` package acts as the renderer that translates React elements into actual DOM operations. As documented in [`packages/react/README.md`](https://github.com/facebook/react/blob/main/packages/react/README.md), you always need both packages for web applications.

### Can I use TypeScript instead of Babel for JSX transformation when setting up React manually?

Yes, TypeScript can handle JSX transformation natively without Babel. Configure the `jsx` compiler option in your [`tsconfig.json`](https://github.com/facebook/react/blob/main/tsconfig.json)—typically set to `react` or `react-jsx`—and TypeScript will emit the appropriate `React.createElement` calls or the new JSX transform automatically. This eliminates the need for `@babel/preset-react` if you are already using TypeScript for type checking.

### What is the difference between development and production builds in a manual React setup?

Development builds include full error messages, warnings, and debugging information that help during development but increase bundle size. Production builds, accessed by setting `NODE_ENV=production`, use minified files like [`react.production.min.js`](https://github.com/facebook/react/blob/main/react.production.min.js) that strip warnings and enable performance optimizations. According to the `facebook/react` source, the production build can reduce bundle size significantly by removing error message strings and development-only code paths.

### Is Create React App still maintained, or should I always install React manually now?

While Create React App is still maintained, the React team now recommends using frameworks like Next.js, Remix, or Vite for new projects. Manual installation remains valuable when you need complete control over the build pipeline, custom webpack configurations, or when integrating React into an existing non-React application. The manual approach described in this guide gives you full transparency into every build step, which is essential for advanced optimizations and custom tooling.