Parcel React App

Create React apps using Parcel as build tool.

Table of Contents

• Getting Started
  • Install
  • Usage
  • Development
  • Production
• Formatting and Linting
  • Formatting and Linting JS
  • Formatting and Linting Styles
• Testing
• License

Getting started

Install

Install parcel-react-app globally:

npm i -g parcel-react-app

Usage

To create a new app, run:

parcel-react-app new

First, you need to enter the name of the project (e.g. my-app), author of the project and then select the style type (css, scss, css-modules or styled-components). This will create a folder my-app and install all dependencies. Folder structure (for css):

my-app/
|-- config/
|   |-- jestSetup.js
|-- public/
|   |-- favicon.ico
|   |-- index.html
|-- src/
|   |-- components/
|   |   |-- App.scss
|   |   |-- App.js
|   |   |-- App.test.js
|   |-- images/
|       |-- parceljs.png
|       |-- reactjs.png
|   |-- index.scss
|   |-- index.js
|-- .babelrc
|-- .eslintrc.json
|-- .gitignore
|-- .prettierrc
|-- .stylelintrc
|-- package-lock.json
|-- package.json
|-- README.md

Development

Start the development server run:

npm run dev

This will automatically open http://localhost:3000 in your browser.

Production

Build for production run:

npm run build

This will bundle your application in the build folder.

Formatting and Linting

The app uses eslint and stylelint for linting and prettier for formatting files. Supports the following file extensions: .js, .jsx, .json, .md, .css and .scss.

To fix formatting issues:

npm run format

To lint your code:

npm run lint

Formatting and Linting JS

If you want to fix JavaScript issues:

npm run format:js

To lint JavaScript code:

npm run lint:js

This will also fix or lint if you have .json and .md files inside the src/ folder.

Formatting and Linting Styles

If you want to fix only style issues:

npm run format:style

To lint your style:

npm run lint:style

Testing

The app uses Jest a test runner and Enzyme a testing utilitis for React.

To run all unit tests:

npm run test

Run watch mode:

npm run test:watch

Get coverage report run:

npm run test:coverage

License

This project is licensed under the MIT License - see the LICENSE file for details.