Swapping create-react-app for Parcel

Update (August 2026): Create React App and the Parcel 1 parcel-bundler package used in the original version of this article are now deprecated. The example below has been updated to Parcel 2 and React's current root API. For a production React application, start with one of the frameworks recommended by the React documentation.

Create React App was a popular way to abstract a complex Webpack configuration. Parcel offers a smaller zero-configuration setup when a framework is unnecessary.

With Parcel however, there's no configuration needed - which greatly reduces the learning curve and removes the headaches often associated with managing Webpack configs.

If you have Node installed already, you'll also have npm installed by default. This guide uses Yarn - an alternative to npm, which is widely used amongst the React community. All of the yarn commands in this guide can be replaced with npm - it's simply a matter of personal preference.

# Install Yarn globally
npm install --global yarn

Once you've installed Yarn, create a new directory for your project and initialise a new node project. The output of the yarn init command will be a package.json file at the root of your project, which will contain important information about the project like the name, version, license, dependencies etc.

# Create a directory for your project
mkdir my-project

# Move into the directory
cd my-project

# Create a new node project
yarn init

The next thing you'll want to do is to install React and react-dom.

yarn add react react-dom

Once you have those dependencies installed, it's time to install Parcel. Parcel is an alternative to Webpack (which create-react-app uses under the hood but abstracts from users), which is used to build your application - and by "build", it means:

Compile any proposed future JavaScript syntax (for support in all browsers) See Babel
Package your application code into one or many .js files (chunks).
Extract any CSS your application might be using to common .css file(s)
"Tree-shake" (eliminate) unused code
Remove comments, minify and uglify the code

yarn add --dev parcel

Note: the --dev flag in our command above means the dependency will be installed as a development dependency. It is needed to develop and build the project, but not by the application at runtime.

Once you have Parcel installed, it's time to create your app. You will need two files to get started - an index.html file and an index.js

# Create root html file
touch index.html

# Create root js file
touch index.js

Add the following to your index.html file:

<!doctype html>
<html>
  <head>
    <title>My Project</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./index.js"></script>
  </body>
</html>

Add the following to your index.js file:

import React from 'react';
import { createRoot } from 'react-dom/client';

class App extends React.Component {
  render() {
    return <div>Simple React App!</div>;
  }
}

createRoot(document.querySelector('#root')).render(<App />);

Add start and build scripts to your package.json file:

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {    "start": "parcel index.html",    "build": "parcel build index.html"  },  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "parcel": "^2.0.0"
  }
}

Start the app in development mode:

yarn start

The app should then be available at http://localhost:1234.

To deploy a production-ready version of your app, run yarn build - one of the scripts we listed in the package.json file above. Once complete, you should see a directory at the root of your project called dist. This will contain all of the relevant files to run your front end app in a browser. To view the production build, open the index.html file:

open dist/index.html