Setup a React App With Parcel
Published: 2020-04-18 14:01:44

When I first began to use the [React](https://reactjs.org) framework, the go-to guide that is ubiquitous is a tool called [create-react-app](https://create-react-app.dev), it helps you set up a react project with just one command isn't that great?:smiley: 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](https://parceljs.org/).

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.
```zsh
    $ mkdir name-of-directory
```
Then you'd have to install parcel in your project directory, using the command below
```npm 
    $ npm install parcel-bundler
```
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
    npm init -y
```
```json
    {
     "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"
    }
```
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.
```html
    <!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>
```
Now let's install the `react` and `react-dom` packages.
```npm
    $ npm i react react-dom
```
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 
    $ npm i install babel-preset-env babel-preset-react --save-dev
``` 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;
```json
    {
     "presets": ["env", "react"]
    }
``` 
Now let's edit the content of the `index.js` file we created before.
```js
    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'))
```
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 
   npm i node-sass
```
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.
```zsh
    $ mkdir scss && cd scss
    $ touch app.scss
```
Now let's edit the content of `index.js` by adding snippet below.
```js
    import './scss/app.scss'
```
So now let's edit our `app.css` file
```css
     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;
    }

```
Wow! if you got to this point, I appreciate you :raised_hands: 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.
```json 
     "start": "parcel src/index.html --open"
```
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](https://dev-to-uploads.s3.amazonaws.com/i/hchvvuto928e3wyiea3o.png)

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.

```json 
    "scripts": {
       "start": "parcel src/index.html --open",
       "build": "parcel build src/index.html"
    },
```
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`

```json 
    "scripts": {
       "start": "parcel src/index.html --open",
       "build": "parcel build src/index.html --out-dir directory-name"
     },
```

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 :cocktail: