react-redux-architecture.md

React/Redux architecture

Tools

• Visual Studio Code: For its TypeScript integration
• TypeScript: Which can also replace React's PropTypes
• Create React app: For a PoC or a small project, you can easily use TypeScript following this guide
• Storybook: To develop your component standalone, see Storybook-driven development
• Babel
• Webpack
• CSS modules: To stop caring about CSS classes and class name convention, it makes your components truly standalone
• Autoprefixer
• Prettier: To prevent useless debate about code style
• React devtools: Chrome devtools for React, you can inspect components and interact with them with $r in the console
• Redux devtools: Allows you to see your state & actions, cancel actions, replay action, etc

Libraries

Core libraries

• React
• Redux
• React Router
• react-router-redux: To keep your state in sync with your router
• classnames: Small utilities to handle classnames (not React related at all)
• ress: normalize.css with good defaults

Libraries that I use and will re-use

• Recompose: Utilities for components and HOC
• Reselect: To manage how the data is retrieve from the state, it also memoized the calls to be more efficient
• redux-api-middleware: Best way to get & store data
• Formik: Easier & smaller than Redux Form, you could think that it would make sense to use it since you're using Redux but we had many issues with the later
• Pose & Popmotion: EAsy animations
• Jest: Testing library, it's built-in Create React app
• Enzyme: Test React component à la jQuery

Libraries that I want to try

• MobX
• Redux-Saga

React tips

• Don't abuse HOC, I find "Function as Child Components" much nicer & simpler when applicable

Redux tips

• Store only string & number, no complex object like Date (or worse, moment object, use date-fns if possible)
• If you have to send data back to an API, don't modify the data you're getting from it. It'll prevent you the headaches of transforming the input data and the output one

Folder architecture

I structure my code in an /app folder likewise:

app
├─ components
├─── ReusableComponent
├─ my-feature
│  ├─ components
│  ├─── ReusableComponentForThisFeature
│  ├─ MyComponent
│  └─── index.js
├─ MySubComponent
│  ├─ index.js
│  └─ styles.css
├─ index.js
└─ styles.css

Storybook-driven development

I create a story per component that I will call Main & a story per each sub-component, e.g:

MyComponent
├─ stories
│  └─ index.js
├─ MySubComponent
│  ├─ index.js
│  └─ styles.css
├─ index.js
└─ styles.css

import React from 'react'
import { storiesOf } from '@storybook/react'

import MyComponent from '../'
import MySubComponent from '../index'

storiesOf('MyComponent', module)
  .add('Main', () => (
  	<MyComponent />
  ))	
  .add('MySubComponent', () => (
    <MySubComponent />
  ))

Storybooks has many addons, here are the ones I'm using:

• addons-knobs: Allow the user to edit the props live, perfect to test all the cases or to show others
• addons-info: Adds a button at the top right of the screen that show the PropTypes of the component, see react-dates for an example
• addons-storyshots: Adds automatic Jest Snapshot Testing
• A custom one similar to addons-centered called blueprint

Use react-stubber to stub your containers.