Skip to content
/ strangeluv Public template

How I Learned to Stop Worrying and Love React

License

Notifications You must be signed in to change notification settings

BigRoomStudios/strangeluv

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

strangeluv

How I Learned to Stop Worrying and Love React

Build Status dependencies devDependency Status

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

Requirements

  • node 14.x.x

Getting Started

Click the green "Use this template" button above or install manually using git:

$ git clone --depth=1 --origin=strangeluv --branch=strangeluv git@github.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
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.

Application Structure

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

Development

Style

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!

Developer Tools

Works nicely with the Redux DevTools Chrome Extension and React DevTools Chrome Extension.

Testing

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.

Deployment

For development (npm start)

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 server/plugin.js.

Thank You

  • 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.

About

How I Learned to Stop Worrying and Love React

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published