A minimal React app boilerplate with Jest testing, PostCSS and Parcel bundler set up
This contains a collection of useful file setup I've been using so far to get started with a simple, client-side only React app, whilst also providing for testing and CSS processing.
git clone https://github.com/vlbee/react-boilerplate.git
npm i
npm test
npm run test:watch
npm start
npm run build
react-boilerplate
├── __mocks__
│ ├── fileMock.js
│ └── styleMock.js
├── package-lock.json
├── package.json
└── src
├── assets
│ └── favicon.ico
├── components
│ ├── app.js
│ ├── button
│ │ ├── button.css
│ │ ├── button.js
│ │ └── button.test.js
│ └── errorBoundary.js
├── index.html
├── index.js
├── styles
│ ├── _normalize.css
│ └── styles.css
└── utils
└── fetch.js
Bundling is being handled by Parcel. Build files will be outputed into .cache
and dist
folders.
CSS and JS file will automatically be minified with the 'npm run build' script.
Minifiers are not used with hot module replacement when running the npm start
script.
__mocks__
- this folder contains mock files to be ignored when running Jest tests.
Package.json config:
"jest": {
"moduleNameMapper": {
"\\.(css|less|styl|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
}
Includes PostCSS set up with Autoprefixer and Normalize.css.