DEV Community

Cover image for How to set up a React app using Parcel

How to set up a React app using Parcel

What is Parcel?

  • Parcel is a web app bundler that enables you to get up running with zero configuration

  • Unlike other bundlers like Webpack, Parcel doesn’t require you to write a lot of code just to get started

  • It offers blazing fast performance because it utilizes multi core processing where others work off of complex and heavy transforms

Cool features 😎

  • πŸ“ Error logging => provides highlighted syntax in the code when it encounters an error
  • πŸ”₯ Hot module replacement (HMR) => automatically updates modules as you make changes in develop
  • βœ‚οΈ Code splitting => uses the import() syntax to split up your bundle
  • πŸ’» Automatic transforms => code is automatically transformed using Babel, PostCSS, and PostHTML

πŸ”₯ And many more!

Alright, let’s get started! 🏁

Homer Simpson saying yay

Create a new NPM (or with your preferred package manager) app

mkdir my-awesome-app
cd my-awesome-app
npm init

πŸ”₯ npm init will ask you a bunch of questions, if don’t want to answer them, tack on the -y at the end: npm init -y

Let’s install the dependencies πŸ“¦

  • React
  • Babel
  • Parcel
npm install --save react
npm install --save react-dom
npm install --save-dev @babel/preset-react
npm install --save-dev @babel/preset-env
npm install --save-dev parcel-bundler

Create a .babelrc file

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

Create a index.html file

<!DOCTYPE html>
<html>
    <head>
        <title>πŸ•</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="index.js"></script>
    </body>
</html>

Create a index.js file

import React from "react";
import ReactDOM from "react-dom";

function App () {
 return <h1>This is my amazing app</h1>
}

const mount = document.getElementById("app");
ReactDOM.render(<App />, mount);

Add the entry point to our package.json

"scripts": {
  "start": "parcel index.html",
},
npm start

We’re done! We can view our app on http://localhost:1234

done

Now go out and build that todo app!

just kidding

cover image from: https://www.woolha.com/media/2018/09/using-parceljs-bundler-for-building-reactjs-application-1200x627.jpg

Top comments (0)