How I Learned to Stop Worrying and Love React
Strangeluv is an opinionated, curated set of tools for building React applications.
- UI -
- Styles & Design -
- State -
- Routing -
- Errors -
- Builds -
- Production server -
- Development server -
- HMR -
- Tests -
- Lint -
Click the green "Use this template" button above or install manually using git:
$ git clone --depth=1 --origin=strangeluv --branch=strangeluv email@example.com: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
||Serves your app at
||Compile the application to
||Compile the application to
||Run tests with Jest.|
||Run production server.|
||Run production server, overriding
. ├── 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
A note on file- and directory-naming
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/index.js are preferred over
containers/CounterContainer/CounterContainer.js. The container may still be required into a file using the "full name" e.g.,
const CounterContainer = require('./containers/Counter');
.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!
Tests are automatically picked-up by Jest. You may add tests under any directory named
__test__ or in files suffixed
.test.js. If you wish to run a coverage report, run
npm test -- --coverage.
For development (
Runs webpack-dev-server with HMR enabled.
For production (
npm run serve)
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.
As a hapi plugin
The production deployment can also be served as a hapi plugin, located in