React, Webpack, Babel, Jest, ESLint Starter
This is the best, basic, batteries included webpack, babel, react, scss, starter repo available.
Getting started
git clone --depth 1 [email protected]:oscarmorrison/react-webpack-starter.git [new-project-name]
cd [new-project-name]
yarn setup
Overview:
React:
a javascript library for building interfaces.
- a basic setup, with an example index.jsx entry file.
Webpack 4:
a bundler for javascript and friends. Packs many modules into a few bundled assets.
- an excellent, basic webpack setup with the essentials.
- a production and a development configuration
- sensible loaders included:
- sass-loader: convert your scss to css.
- babel-loader: convert your es6 (ES2015) to js.
- file-loader: copy accross any required assets
- copy plugin, to dynamically build your
distfolder on each build
Babel:
The compiler for writing next generation JavaScript. transpile your code from es6 to js.
Jest:
Delightful JavaScript Testing.
- Setup with sensible defaults, with 3 example unit tests.
ESLint
The pluggable linting utility for JavaScript and JSX.
- A good eslint configuration extended from Airbnb's eslint-config
file structure
.
├── LICENSE
├── README.md
├── package.json
├── webpack.config.js
├── yarn.lock
├── src
│ ├── html
│ │ └── index.html
│ ├── js
│ │ ├── index.jsx
│ │ └── utilities
│ │ └── general.js
│ └── style
│ └── index.scss
└── test
└── generalUtility.test.js
yarn
this starter uses yarn by default, it includes the following yarn scripts:
watch: ./node_modules/.bin/webpack -d --watch
dev: ./node_modules/.bin/webpack-dev-server -d --hot --inline --progress --colors
build: NODE_ENV=production ./node_modules/.bin/webpack -p
test: yarn jest && yarn lint
test:watch: yarn jest:watch & yarn lint:watch
jest: ./node_modules/.bin/jest
jest:watch: ./node_modules/.bin/jest --watch
lint: ./node_modules/.bin/eslint src/js test --ext .js --ext .jsx
lint:watch: ./node_modules/.bin/esw src/js test --ext .js --ext .jsx -w --color --clear
download
You can download the repo here, and run:
yarn setup