DEV Community

Cover image for Setup a React App With Parcel
Caleb O.
Caleb O.

Posted on

Setup a React App With Parcel

When I first began to use the React framework, the go-to guide that is ubiquitous is a tool called create-react-app, it helps you set up a react project with just one command isn't that great?πŸ˜ƒ It's great I know, but as a software dev, sometimes there's that feeling that probes you to want to learn why some things work the way they should and what actually happens behind the scenes, that was how I got to know about parcel-js.

Parcel is a bundler that is used in building apps, it requires zero-configuration unlike the other app bundlers out there, like webpack which gives you the freedom to do as you wish with your configurations, but sometimes what we need is a simple tool that helps us get started with running our apps as fast and soon as possible, and since it is a tool with no-configs at all, all that is required of you is to point at the entry point of your application.

Parcel has some nice features, which actually depicts why you should use it, which includes but not limited to;

  • Automatic transformation of your code using Babel, PostCSS, and PostHTML.
  • parcel logs (displays) syntax highlighted code on your terminal when it encounters errors to help you locate the actual line or file that the error is emanating from.
  • parcel also supports the bundling of different file extensions like JS, CSS, HTML, jpg, raw, json. etc.
  • one of the features that I prefer the most, is the ability for developers to use an index.html file as an entry point.

Okay, enough talk, let's see how we can actually use parcel.

To begin, create a new directory on your machine by running the command below.

    $ mkdir name-of-directory
Enter fullscreen mode Exit fullscreen mode

Then you'd have to install parcel in your project directory, using the command below

    $ npm install parcel-bundler
Enter fullscreen mode Exit fullscreen mode

Next, we'll create a package.json file in our project, a package.json file is a file that contains descriptions, scripts and the dependencies that we're using in our project.

    npm init -y
Enter fullscreen mode Exit fullscreen mode 
    {
     "name": "react-with-parcel",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
        "test": "echo \"Error: no test specified\" && 
exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }
Enter fullscreen mode Exit fullscreen mode

Since our main(entry point) file as index.js we'd have to link it in our HTML file, now we'd go ahead to create a src directory and inside we'd add index.html and index.js files there.

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>React app</title>
    </head>
    <body>
       <div id="root">
        // Our react components will be rendered here
       </div>

       <script src="index.js"></script>
   </body>
   </html>
Enter fullscreen mode Exit fullscreen mode

Now let's install the react and react-dom packages.

    $ npm i react react-dom
Enter fullscreen mode Exit fullscreen mode

The packages that we've installed above would allow us to write react, and since React is written in ES6 (EcmaScript 6), we'd have to look for a way to transpile our code to what the browser understands, all we have to do is to install the presets

    $ npm i install babel-preset-env babel-preset-react --save-dev
Enter fullscreen mode Exit fullscreen mode


the flag --save-dev enables us to add these presets as dev dependencies in our project.

once we're done installing the presets, let's create a .babelrc file which would contain the following;

    {
     "presets": ["env", "react"]
    }
Enter fullscreen mode Exit fullscreen mode

Now let's edit the content of the index.js file we created before.

    import React from 'react'
    import ReactDOM from 'react-dom'

    import './scss/app'

    const App = () => {
      return (
         <div className="app">
             <div className="h2-light">
                <h2>Congratulations on making it this far! 🀝 </h2>
             </div>
         </div>
      )
    }

    ReactDOM.render(<App />, document.getElementById('root'))
Enter fullscreen mode Exit fullscreen mode

Now let's style our component, we'd be using scss which to our advantage, parcel has a support for scss, to use files with the .scss extension let's install the node-sass package;

   npm i node-sass
Enter fullscreen mode Exit fullscreen mode

Once we've had node-sass installed we can import scss files from our components, let's create a scss directory and then create app.scss in it.

    $ mkdir scss && cd scss
    $ touch app.scss
Enter fullscreen mode Exit fullscreen mode

Now let's edit the content of index.js by adding snippet below.

    import './scss/app.scss'
Enter fullscreen mode Exit fullscreen mode

So now let's edit our app.css file

     body {
      background: rgb(10, 57, 144);
     }

    .app {
      display: flex;
      justify-content: center;
    }

    .h2-light {
      height: 150px;
      width: 80%;
      background: #597ed3;
      margin-top: 20%;
      text-align: center;
      padding: 40px;
      border-radius: 7px;
      box-shadow: 2px 1px 5px #eee;
    }

    h2 {
      color: #eee;
      font-size: 50px;
    }
Enter fullscreen mode Exit fullscreen mode

Wow! if you got to this point, I appreciate you πŸ™Œ Now that we've got to this point in setting up our application, running it would require us to configure our package.json file by adding the code below.

     "start": "parcel src/index.html --open"
Enter fullscreen mode Exit fullscreen mode

The --open flag enables your script to open the app in your browser.

The snippet above shows that whenever we run npm start command, we are communicating with parcel to start a dev server using the index.html as an entry point, when you run the command you'd be able to view the App at http://localhost:1234

Alt Text

When we want to build the app for production we'd have to run parcel build index.html command, so we'll then add that to the scripts object in our package.json file.

    "scripts": {
       "start": "parcel src/index.html --open",
       "build": "parcel build src/index.html"
    },
Enter fullscreen mode Exit fullscreen mode

We also have some other options which we can choose on how our app is prepared for production.

Normally dist is the default directory in which the production files are kept, but you can specify another directory of your choice, by adding --out-dir directory-name at the end of the build property in package.json

    "scripts": {
       "start": "parcel src/index.html --open",
       "build": "parcel build src/index.html --out-dir directory-name"
     },
Enter fullscreen mode Exit fullscreen mode

Thanks for reading this article, I hope you've fully understood how to use parcel to make a react project, if you don't get it right now, you'd have to keep using parcel till when you're super comfortable with it.

Cheers 🍸

Top comments (4)

Collapse
 
blessedzulu profile image
Blessed Zulu •

Thanks a lot for this starter tutorial for a React with parcel app.

I was following this using Parcel 2 and ran into some problems with the Babel configuration. I think things have changed both with Babel and Parcel since the article was written.

If anyone reading the article is using Parcel 2, simply skip past the Babel installation section and everything should work just fine.

Collapse
 
seven profile image
Caleb O. •

Thank you so much for this information.

I'll look for a way to update this article.

Collapse
 
blessedzulu profile image
Blessed Zulu •

That'll be very helpful since Parcel 2 is the more widely-used bundler today (far as I know). Or you might consider writing a separate article for Parcel 2, and rename this article accordingly, specifying that it's for Parcel 1. Two birds with a stone and half.

But really, thank you very much for this. I only started learning React yesterday and this was very handy.

Thread Thread
 
seven profile image
Caleb O. •

Wow!!

Thank you so much for this feedback. It means a lot to me.

I'll write about setting up a React app with the new version of parcel and share it with you and the community.

Once again, thank you so much!

Read next

khanrabiul profile image

React Router- Params

Khan Rabiul -

philip_zhang_854092d88473 profile image

EchoAPI for VS Code: A Lightweight Alternative to Postman & Thunder Client

Philip -

mridul037 profile image

𝗖𝗣𝗨 π—§π—΅π—Ώπ—Όπ˜π˜π—Ήπ—Άπ—»π—΄ 𝗢𝗻 π—žπ˜‚π—―π—²π—Ώπ—»π—²π˜π—²π˜€ ☸️

mridul037 -

philip_zhang_854092d88473 profile image

Decoding URL Encoding: Unveiling the Mystery Behind % Symbols

Philip -