React Redux Starter App
This app is intended as an exemplar of how we like to build React apps. You can clone this, and start the app to see
It is built off the awesome React Redux Starter Kit, but unlike the starter kit, this repo is intended to be very opinionated.
We'll explain all our choices though and if you don't like them, just swap them out for something else!
What's Included?
- React Redux, React Router (obviously)
- Webpack & Babel (Un-changed from the starter kit, so all the same tasks work. See README-redux.md)
- React Storybook - Separate your presentational components from your containers, then view your presentational components individually in an this cookbook-style app.
- CSS Modules with SASS
- Responsive grids with flex, via Bootstrap 4 - We use Bootstrap Loader to load only the normalize.css reset file, and the responsive grid classes. All other CSS should be written in your own CSS modules, but the grid classes are too handy not to use.
Setup Instructions
$ git clone https://github.com/DeloitteDigitalUK/react-redux-starter-app.git
$ cd react-redux-starter-app
$ npm install # Install project dependencies
$ npm start # Compile and launchCommon commands:
npm run <script> |
Description |
|---|---|
start |
Serves your app at localhost:3000. HMR will be enabled in development. |
storybook |
Launches React Storybook at localhost:9001, with HMR enabled. |
compile |
Compiles the application to disk (~/dist by default). |
dev |
Same as npm start, but enables nodemon for the server as well. |
dev:no-debug |
Same as npm run dev but disables devtool instrumentation. |
test |
Runs unit tests with Karma and generates a coverage report. |
test:dev |
Runs Karma and watches for changes to re-run tests; does not generate coverage reports. |
deploy |
Runs linter, tests, and then, on success, compiles your application to disk. |
deploy:dev |
Same as deploy but overrides NODE_ENV to "development". |
deploy:prod |
Same as deploy but overrides NODE_ENV to "production". |
lint |
Lint all .js files. |
lint:fix |
Lint and fix all .js files. Read more on this. |
Bootstrap
We deliberately use as little of Bootstrap as possible. The grid functions and normalize.css are handy, but other than that, we'd rather write CSS modules with no outside dependency.
If you would like to use more of Bootstrap, edit the .bootstraprc file and enable the relevant modules.
If you want to enable any of the JavaScript features, look at Bootstrap Loader's setup instructions for some extra steps to take.