/react-webpack-starter

⚽️ Best react webpack start (with es6 and other basics)

Primary LanguageJavaScriptMIT LicenseMIT

React, Webpack, Babel, Jest, ESLint Starter

Build Status contributions welcome
GitHubGitHub issues

This is the best, basic, batteries included webpack, babel, react, scss, starter repo available.

Getting started

git clone --depth 1 git@github.com: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