Create React App Redux

An opinionated initial React Redux configuration based on create-react-app

Scripts

Install dependencies using yarn or npm manager:

yarn install

Start development version:

yarn start

For building a production version use:

yarn build

Design notes

Folder structure

Due to a specific domain, reducers and actions are reused on different pages, therefore they are put to src/reducers and src/actions folder appropriately. In general domain/feature/page oriented component file structure is used:

• actions - actions and their tests
• components - organized by page and tests
• config - cofiguration files
• reducers - reducers and their tests
• selectors - selectors used to select domain objects from normalized data
• styles - css styles written using BEM and SCSS

More reasoning on folder structure: The 100% correct way to structure a React app (or why there’s no such thing)

CSS design

BEM methodology was used for writting CSS styles. CSS styles are located under src/styles folder. General structure is:

• core - css variables and reset
• layouts - reusable container layouts
• modules - reusable modules
• pages - page dependant styling

Plain BEM was used due to the fact that BEM methodology itself solves global namespacing and other issues. Styled-components is an option I will consider using in future app versions.

More reasoning about CSS usage: Stop using CSS in JavaScript for web development

Unit tests

src/setupTests.js holds project test env configuration. Technologies used:

• enzyme - a wrapper for React test utils
• chai - assertion library
• mocha - a test framework
• jsdom - a javascript DOM implementation

Note: I have used Mocha instead of create-react-app native Jest due to Jest issues while using jsdom and rendering canvas related elements to DOM.

Features

Feature	References
Redux configuration	https://github.com/reactjs/react-redux
Redux-form and validation	github.com/erikras/redux-form
Redux selectors	Computing Derived Data
Router v4	github.com/ReactTraining/react-router
BEM and SCSS	getbem.com
JWT authentification	jwt.io
Async/await presets	MDN Async Functions
Mobile version navigation
Unit tests examples