Create a React app with zero configuration using Parcel

ParcelJs is a new JavaScript bundler and it is considered as a fast zero configuration web application bundler. When comparing to WebPack, parcel can be used when developers need minimal tools and need to start as soon as possible.

Create a React app with parcel

Create a new NPM app

$ mkdir react-parcel
$ cd react-parcel
$ npm init

Then add dependencies for React, babel and 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

Then create a .babelrc file.

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

Then creating the react app. It has two files index.js and index.html

index.js

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

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

var mountNode = document.getElementById("app");
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello React lovers </title>
    </head>
    <body>
        <div id="app"></div>
        <script src="index.js"></script>
    </body>
</html>

Now need to add a script entry to package.json start the app

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

To start the app type

$ npm start

HOHO!!! we are done now open the browser and type http://localhost:1234 to see the app

Conclusion

Parcel looks like an easy and decent way to create react app. It is not quite popular yet. lets see in the future what will be the demand fpr Parcel.

Create a React app with parcel

Conclusion

Share this:

Related

Leave a comment Cancel reply