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

Question

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

Accepted Answer

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

Initialize the project to create a package.json:
```
npm init -y
```
Install React core and DOM renderer:
```
npm install react react-dom
```

Add development dependencies for Webpack and Babel:

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

Configure Babel by creating babel.config.json:

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

Configure Webpack by creating webpack.config.js:

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,
  },
};

Create the source directory structure and entry files:
```
mkdir -p src public
```

Create the HTML host page at public/index.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>

Create a React component at src/App.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>
    </>
  );
}

Create the application entry point at src/index.js:

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

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

Add npm scripts to package.json:

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

Run the development server:
```
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:

NODE_ENV=production npm run build

This triggers Webpack's production optimizations and ensures your bundler pulls in react.production.min.js and react-dom.production.min.js. According to the note in 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 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, 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—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 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.