Create React apps using Parcel as build tool.
Install parcel-react-app globally:
npm i -g parcel-react-app
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
Start the development server run:
npm run dev
This will automatically open http://localhost:3000 in your browser.
Build for production run:
npm run build
This will bundle your application in the build
folder.
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
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.
If you want to fix only style issues:
npm run format:style
To lint your style:
npm run lint:style
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
This project is licensed under the MIT License - see the LICENSE file for details.