React Parcel App

Overview

This article provides a simple React boilerplate that utilizes the strengths of the Parcel bundler. It includes commonly used packages for React.js development and offers features such as bundle size analysis, compiler, instant feedback, and more. The article also explains the installation process and provides information on the folder structure and testing setup.

Features

• Parcel v2: Run and build your code, analyze bundle sizes, use a compiler, and get instant feedback. (Link: https://v2.parceljs.org/)
• React.js v17: Utilize the latest version of React.js for your development.
• Commons React libraries: Use commonly used React libraries such as react-router-dom, prop-types, and styled-components.
• CSS Flexibility: Benefit from CSS flexibility with options to reset and normalize CSS, use autoprefixer, and choose between CSS, Sass, or styled-components.
• Babel: Utilize Babel for transpiling your code.
• Prettier: Use prettier to clean up and format your files.
• Tests: Write tests using Jest and testing-library with the ability to customize the configuration.
• Basic Folder Structure: Start with a basic folder structure to bootstrap your project.

Installation

To install the React with Parcel app, follow these steps:

1. Choose a folder and create your application.
2. Start the development server on http://localhost:3000 by running the command: npm start.
3. Create production-ready bundles with a /build folder by running the command: npm run build.
4. Analyze your bundle sizes by checking the ./parcel-bundle-reports folder.
5. Clean up all files located at /src/ using prettify by running the command: npm run prettify.

Summary

This article introduces a React boilerplate that leverages Parcel’s strengths for a smooth development experience. It includes features such as bundle size analysis, CSS flexibility, commonly used React libraries, Babel for transpilation, and a testing setup using Jest and testing-library. The installation process is straightforward and the article provides additional information on folder structure and testing customization. Overall, this boilerplate offers a convenient starting point for React.js development with Parcel.