Swapping create-react-app for Parcel

Let me start by saying that Create React App is still a great choice for many applications and may be more suited for complex projects. Create React App is a great solution because it abstracts a complex Webpack configuration which you can choose to manage if you choose to eject at a later stage.

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-bundler

Note: the --dev flag in our command above means the dependency will be installed as a development dependency, indicating that this dependency is only need to run/build the project in development mode.

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:

<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 ReactDOM from 'react-dom';

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

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

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": "^16.8.3",
    "react-dom": "^16.8.3"
  },
  "devDependencies": {
    "parcel-bundler": "^1.11.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 static. 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 static/index.html