react-webpack-starter

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 dist folder 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

This site is open source. Improve this page.