Skip to content
Simple boilerplate for starting a react application. Includes a base state manage library, simple user authentication, localisation and grouped logging.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.env
.eslintignore
.eslintrc.js
.gitignore
CODE_OF_CONDUCT.md
LICENSE
README.md
package.json
yarn.lock

README.md

Kondax's React Boilerplate

This project (KRB) serves as a small utility to starting a React application without the need to fiddle around with implementing state management, logging, localisation or authentication state handling. KRB is built on a few familiar community projects that should ease the very small learning curve of this project.

This project includes the base for:

  • State management
  • Grouped logging
  • Localisation
  • Syncing user's authentication state to the application

Dependencies

KRB is built on top of create-react-app. It uses the following external libraries:

  • State:

  • Logging:

  • Localisation:

    • react-intl which provides localisation and handles translation using string keys
  • eslint for linting, providing an overview during development that also hooks onto pre-commit and pre-push

  • husky for providing programmatic control over git hooks, specifically for linting

Design Overview

KRB is "plug and play" which means you can drop the project into your route folder and start developing without any required configuration. The only modifications necessary would be reducers, actions and translations.

For the time being, actions are stored in the relevant reducer files.

Apart from the provided project structure, the bulk of KRB is located in bootstrap.js. This file initialises the application which means translations, core application state (building, built, maintenance) and authenticating a user with a sessionKey (stored in localStorage).

Apart from making the above modifications you can start with development of your project straightaway. The index component (App) is located under src/components/App. This file has a very basic demonstration of state management, language selection, user authentication and the storage mechanism.

Storage Mechanism

Provided is a storage mechanism under src/utils/storage.js. This is simply a proxy that (when whitelisted) allows you to access and modify localStorage. You can find an example in the auth reducer.

Storage is accessed via Storage.key, with key being the namespace for the appropriate data. Storage.someKey would essentially run localStorage.get(PREFIX + '.someKey') and return the result. This also means that modifying Storage.someKey would update the record in localStorage[PREFIX + '.someKey'].

The Storage utility class also exports a NOT_SET symbol which can be accessed via import { NOT_SET } from 'utils/storage'. If a key does not exist in localStorage, is not whitelisted or fails to parse, the NOT_SET symbol will be returned.

Setting storage requires key's to be whitelisted. This can be done under the constants utility file by modifying the variable STORAGE_WHITELIST. The whitelist contains an array of allowed storage keys that are able to be accessed and/or modified.

const STORAGE_WHITELIST = [
	'language',
	'sessionKey'
]

This means that the project is limited to Storage.language and Storage.sessionKey. You can add additional permission by modifying the array above.

You can also modify the storage prefix by editing the STORAGE_PREFIX constant in the same file. This defaults to REACT_BOILERPLATE.

Grouped Logging

I've always been a fan of namespacing my logs. KRV provides a simple way to do so through the following:

import Logger from 'utils/logger';
const logger = new Logger('Application');

All logs sent through the above logger will now be namespaced under "Application". Below is an example of this in effect.

Console log demonstration

Logger exposes the following api:

{
	info,
	warn,
	error
}

It is capable of "infinite" arguments which allows pretty-printing of variables/objects by passing them as their own argument.

ESLint and Husky

Supplied is an .eslintrc.js config file which extends eslint:recommended and plugin:react/recommended. The react linting configuration is set for React version 16.4.2. It targets browser, node and es6 as it has been used for Chrome extensions which expose some node APIs.

The configuration file also includes a range of my own rules which are heavily based on Airbnb's JavaScript Style Guide. Most developers would have experience with these rules from the majority of public projects are utilise Airbnb's ruleset in one way or another.

Husky will run eslint . --fix for each commit and push. These commands will fail if the linter finds errors which loosely enforces the specific ruleset. This is very easy to bypass so I recommend setting up (travis-ci)[https://travis-ci.org] to run the linter for each pull request automatically. This was strictly implemented to provide awareness to the linting without having to manually check pull requests and without having to run eslint manually.

Conclusion

This project has been developed out of my personal code style. It is not a suggestion on how to implement your own projects but rather a simple utility to get projects up and running quickly. KRB is a very small project and is designed in a way that you can easily modify it yourself to follow your own code style.

If you have any suggestions and/or any bugs, please feel free to open an issue. I'll happily assist anybody that does so.

Thanks.

You can’t perform that action at this time.