- 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
- 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
- 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
- Don't abuse HOC, I find "Function as Child Components" much nicer & simpler when applicable
- 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
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
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.