https://github.com/oscarmorrison/react-webpack-starter
⚽️ Best react webpack start (with es6 and other basics)
https://github.com/oscarmorrison/react-webpack-starter
babel beginner-friendly es6 eslint jest react scss webpack
Last synced: 8 months ago
JSON representation
⚽️ Best react webpack start (with es6 and other basics)
- Host: GitHub
- URL: https://github.com/oscarmorrison/react-webpack-starter
- Owner: oscarmorrison
- License: mit
- Created: 2017-01-18T18:36:35.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-08-28T23:41:09.000Z (almost 8 years ago)
- Last Synced: 2025-04-10T13:52:31.109Z (about 1 year ago)
- Topics: babel, beginner-friendly, es6, eslint, jest, react, scss, webpack
- Language: JavaScript
- Homepage: http://oscarmorrison.com/react-webpack-starter/
- Size: 190 KB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React, Webpack, Babel, Jest, ESLint Starter
[](https://travis-ci.org/oscarmorrison/react-webpack-starter) [](https://github.com/oscarmorrison/react-webpack-starter/issues)
[](https://github.com/oscarmorrison/react-webpack-starter/blob/master/LICENSE)[](https://github.com/oscarmorrison/react-webpack-starter/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](https://facebook.github.io/react/):
a javascript library for building interfaces.
- a basic setup, with an example index.jsx entry file.
### [Webpack 4](https://webpack.js.org/):
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](https://babeljs.io/):
The compiler for writing next generation JavaScript. transpile your code from es6 to js.
### [Jest](https://facebook.github.io/jest/):
Delightful JavaScript Testing.
- Setup with sensible defaults, with 3 example unit tests.
### [ESLint](http://eslint.org/)
The pluggable linting utility for JavaScript and JSX.
- A good eslint configuration extended from [Airbnb's](https://github.com/airbnb/javascript) 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](https://github.com/oscarmorrison/react-webpack-starter/archive/master.zip), and run:
`yarn setup`