How I Learned to Stop Worrying and Love React
Strangeluv is an opinionated, curated set of tools for building React applications.
- UI -
react
react-dom
- Styles & Design -
styled-components
@material-ui/core
@material-ui/styles
- State -
redux
react-redux
redux-thunk
strange-middle-end
normalizr
immer
- Routing -
react-router
react-router-dom
connected-react-router
strange-router
history
- Errors -
react-error-boundary
error-overlay-webpack-plugin
- Builds -
webpack
html-webpack-plugin
copy-webpack-plugin
file-loader
@babel/core
babel-preset-react-app
- Production server -
@hapi/hapi
@hapi/inert
- Development server -
webpack-dev-server
- HMR -
react-hot-loader
@hot-loader/react-dom
- Tests -
jest
@testing-library/react
- Lint -
eslint
@hapi/eslint-config-hapi
eslint-config-standard-react
- node
12.x.x
Click the green "Use this template" button above or install manually using git:
$ git clone --depth=1 --origin=strangeluv --branch=strangeluv [email protected]:bigroomstudios/strangeluv.git my-project
$ cd my-project
$ git checkout --orphan master # New branch without history
$ npm install # Install all dependencies
$ npm start # Start development server
npm run <script> |
Description |
---|---|
start |
Serves your app at localhost:3000 via webpack-dev-server. |
build |
Compile the application to build/ for production. |
build:dev |
Compile the application to build/ , overriding NODE_ENV to "development". |
clean |
Remove the build/ folder. |
test |
Run tests with Jest. |
serve |
Run production server. |
serve:dev |
Run production server, overriding NODE_ENV to "development". |
lint |
Lint all javascript in the repository. |
.
├── config/ # Project configuration settings
│ └── index.js # Configuration entrypoint
├── server/ # hapi server/plugin for production
│ ├── index.js # Server entrypoint
│ └── plugin.js # hapi plugin for arbitrary hapi deploy
└── src/ # Application source code
├── index.js # Application bootstrap and rendering
├── middle-end/ # Middle-end, i.e. redux and strange-middle-end
├── components/ # Reusable UI-only (dumb/stateless) components
├── containers/ # Reusable container (smart/stateful) components
├── public/ # Static assets (not imported anywhere in source code)
└── routes/ # Route definitions
├── index.js # Routing configuration
└── home/ # Route-specific directory
├── index.js # Route-specific routing configuration (optional)
├── components/ # Route-specific components
└── containers/ # Route-specific containers
Files should be named with dash-case.js
except in the case of containers or components, which should use PascalCase.js
. This includes reducer, action, and action-type files. Filenames need not repeat information specified by their directory names. For example, containers/Counter.js
or containers/Counter/index.js
are preferred over containers/CounterContainer.js
or containers/CounterContainer/CounterContainer.js
. The container may still be required into a file using the "full name" e.g.,
const CounterContainer = require('./containers/Counter');
Omitting the .js
extension in calls to require()
is preferred, as it allows one to transition a simple module at components/Counter.js
to a complex module with its own internals at components/Counter/index.js
without affecting how it is referenced.
We favor the hapi style guide. Yes, even when coding for the browser! The idea is to maintain fluency for developers who work both on the server and in the browser. It is supposed to be the same language, after all! Node and V8 move fast enough on their own, so we plan to keep up-to-date with that ecosystem rather than the hyperspeed with which transpilers make available incompletely-spec'd JS features. It's worth noting that for the time being that includes ES6 modules. We additionally have some standard React lint rules. Just npm run lint
to see how you're doing!
Works nicely with the Redux DevTools Chrome Extension and React DevTools Chrome Extension.
Tests are automatically picked-up by Jest. You may add tests under any directory named __test__
or in files suffixed .spec.js
or .test.js
. If you wish to run a coverage report, run npm test -- --coverage
.
Runs webpack-dev-server with HMR enabled.
Runs a hapi server located in server/
setup to serve the build/
directory plugin some logic to handle routing to work with client-side routing via the history API.
The production deployment can also be served as a hapi plugin, located in server/plugin.js
.
- Dave Zuko - for creating the boilerplate that we forked (at v3). It contains a huge amount of effort from dozens of collaborators, and made for a fantastic start.
- create-react-app - We took many cues from create-react-app while choosing and configuring the tooling for strangeluv v2.