Parcel React Boilerplate

Overview:

The Parcel React Boilerplate is a simple React boilerplate that uses Parcel bundler, linter, prettier, and other tools to create new React apps quickly. This guide focuses on creating a smaller and simpler boilerplate than the Create React App (CRA) version with Parcel. It is recommended for people who are new to React and want to understand the problems that CRA solves before using it. Parcel is a fast bundler that does not require a config file and provides features like tree shaking, caching, code splitting, and live reload out of the box.

Features:

• No need for a config file with Parcel bundler.
• Fast build and rebuild times with caching.
• Tree shaking out of the box with multicore processing.
• Code splitting and live reload are available by default.

Installation:

1. Create a new folder and initialize the project with yarn init -y (or any package manager of your choice).
2. Create a .babelrc file in the project root folder and add the following content:

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

3. Add a start script and a build script in the package.json file:

"scripts": {
  "start": "parcel src/index.html",
  "build": "parcel build src/index.html"
}

4. Change src/index.html to the route of your main HTML file.
5. Set up the folder structure as mentioned in the guide.
6. In the index.html file, import the index.js file and add a <div> element with the id root where the React content will be added.
7. In the index.js file, add the basic React code.
8. Install additional extras by running the following commands:

• To install PropTypes for prop validation, run yarn add -D prop-types.
• To install autoprefixer for CSS autoprefixing, run yarn add -D autoprefixer postcss.
• Create a .postcssrc file in the project root folder and add the following content:

{
  "plugins": {
    "autoprefixer": {}
  }
}

• Create an index.scss file and import it in the index.js file.

Summary:

The Parcel React Boilerplate provides a simplified and lightweight setup for creating React apps using Parcel bundler. It focuses on offering the essential features needed for React development without the additional complexity of tools like Create React App. The guide explains the installation process and highlights the benefits of using Parcel, such as its fast build times, tree shaking, code splitting, and live reload capabilities. Additional extras like prop validation with PropTypes and CSS autoprefixing with autoprefixer can be easily added for convenience during development.