Getting started in React with Parcel.js

Updated on 27th November, 2019 with routing added.

If you want a version with Webpack instead of Parcel, please check out my post here.

tl;dr - Clone and run the source code.

Usually when starting to work on a React project, developers go with create-react-app. While this is a great option for many cases, I find it to be a bit too bloated, especially after ejecting it. I also find that it takes a little of work to manually setup and maintain a webpack config. Parcel is great for use with React as there is nothing to configure while setting up. It also helps that building the app in Parcel is also really fast.

First lets initialize a project with either yarn or npm. I’ll be using yarn.

yarn init --yes

Then let’s install Parcel as a dev dependency.

yarn add parcel-bundler -D

After that let’s setup babel by installing the dev dependencies and creating the .babelrc file

yarn add @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties -D

Once the dependencies are done installing create the .babelrc file in the project root with the following code.

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

This is all the setup we will need to for Parcel to work with React. Now let’s setup React. First we will need to the React dependencies.

yarn add react react-dom react-router-dom

If you want to use async/await in your code, an additional dependency is needed.

yarn add regenerator-runtime -D

Next we will need an entry point for out app. The nice thing about Parcel is that the entry file doesn’t have to be a JavaScript file. In our case its going to be a HTML file. Create a folder with the name src. This folder is going to contain all the source code. In the src folder create the index.html file which is going to be the entry point of the app and add the following code.

src/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
    />
 
    <title>React Parcel Starter</title>
  </head>
 
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

After that we will create the index.js file (also in src) which will connect the root React component to the index.html file.

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
import "regenerator-runtime/runtime";
 
ReactDOM.render(<App />, document.getElementById("root"));

Next let’s create the root component in the App.js file. The root component is going to contain the routing configuration.

src/App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
// Import pages
import Home from "./pages/home";
import About from "./pages/about";
 
const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
 
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
};
 
export default App;

After that let’s create a layout for our pages. Create the folder components in src and in it create Layout.js. The layout component is also going to contain the navigation links within the app.

src/components/Layout.js

import React from "react";
import { Link } from "react-router-dom";
 
const Layout = ({ children }) => {
  return (
    <div>
      <nav>
        <Link to="/">
          <button>Home</button>
        </Link>
 
        <Link to="/about">
          <button>About</button>
        </Link>
      </nav>
 
      <main>{children}</main>
    </div>
  );
};
 
export default Layout;

Then let’s create the pages. In src create a folder called pages. The first page we are going to create is the home page.

src/pages/home.js

import React from "react";
import Layout from "../components/Layout";
 
const Home = () => {
  return (
    <Layout>
      <h1>React Parcel Starter</h1>
    </Layout>
  );
};
 
export default Home;

After that we will create the about page.

src/pages/about.js

import React from "react";
import Layout from "../components/Layout";
 
const About = () => {
  return (
    <Layout>
      <h1>About</h1>
 
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed
        varius ante. Nam venenatis posuere neque ac ultricies. Pellentesque
        pulvinar, enim consequat sagittis semper, neque lorem hendrerit velit,
        at luctus dui ipsum in nunc. Donec vel venenatis augue. Nunc elementum
        blandit elit. Ut a lacinia lorem. Duis non consequat ipsum. Aenean et
        libero ipsum. Duis sollicitudin vitae diam vitae tempor.
      </p>
    </Layout>
  );
};
 
export default About;

Finally all that’s left to do is to add the scripts to run the app. Add the following in the package.json file.

package.json

{
  "name": "react-parcel-starter",
  "version": "1.0.0",
  "description": "A starting template for building React apps with Parcel.js",
  "main": "src/index.html",
  "repository": "https://github.com/akhila-ariyachandra/react-parcel-starter.git",
  "author": "akhila-ariyachandra <akhila_ariyachandra@live.com>",
  "license": "MIT",
  "scripts": {
    "dev": "parcel ./src/index.html",
    "build": "parcel build ./src/index.html"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "parcel-bundler": "^1.12.3"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

dev will be used to run the development of the app. Don’t worry about restarting the server after making changes to the code while it’s running, as Parcel will automatically take care of that. build is used to make the production version of the app in the dist folder in the project root. Let’s check if everything has been setup properly by running the dev command.

yarn dev

When you visit localhost:1234 in your browser you should be seeing

When you navigate to “About” you should see

Now you can continue creating your React app as usual from here. The source code for everything done here is available in GitHub.

Getting started in React with Parcel.jsself.__wrap_n!=1&&self.__wrap_b(":Rdddd9da:",1)

Getting started in React with Parcel.js