/react-webpack-starter

React (+react-router v4), Webpack, HMR, Babel, TypeScript, PostCSS, Material Design, RxJS, Prettier

Primary LanguageJavaScript

react-webpack-starter

1. Features

  • ES5, ES6 (ES2015), ES2016, ESNext
  • webpack
    • webpack-dev-server + HMR
    • dynamic imports
  • typescript
  • babel + polyfills
  • jsx + react + react-router v4 + RxJS
  • material design (material-ui)
  • css + scss + postcss (CSS modules + cssnext)
  • prettier + linters
  • husky (precommit hook) + lint-staged

2. TODO list

  • auto manifest.json + service-worker
  • PWA features, assets caching
  • better application architecture
  • HMR for single component
  • tests - unit, e2e (cypress)
  • dynamic dependency injection container

3. Requirements

  • node (v8.9.4)
  • yarn (v1.3.2)

4. Installation

yarn # [enter] or yarn install

5. Scripts

* webpack-dev-server (watch mode)

$ yarn start
$ yarn start -- --host=0.0.0.0 # default: localhost
$ yarn start -- --port=8081 # default: 8080

* production build (output in ./dist)

$ yarn build

6. Capabilities

_ importing image files i.e. _.jpg,_.png,_.gif,\*.svg

before:

import image from "./example/path/image.png";

<img src={image} />;

after:

<img src="./assets/image/23tr82r3278r28332.png" />

_ using fonts (without import) in _.scss file

before:

@font-face {
    font-family: Font;
    src: url("./fonts/font.woff") format("woff");
}

after:

@font-face {
    font-family: Font;
    src: url("./assets/fonts/1387r122f3273.woff") format("woff");
}

_ importing _.json files

import file from "./path/image.json"; // { key: 'value' }

* using CSS modules - :local (default) and :global scope

before:

.myBox {
    color: red;
}
:global {
    .globalBox {
        color: blue;
    }
}

after:

._37f65 {
    color: red;
}
.globalBox {
    color: blue;
}

...and in JS:

import { myBox, globalBox } from "./box-styles.scss"; // myBox -> "_37f65", globalBox -> "globalBox"

<div className={myBox}>
    <div className={globalBox} />
</div>;