/create-react-app-redux

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

Primary LanguageJavaScript

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