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

.
├── 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.