This document discusses best practices for React architecture, including: 1. Using architecture documentation to explain features and introduce newcomers to the system in a unified way. 2. Using scaffolding as a form of documentation that provides reusable code examples. 3. Improving component clarity through prop and state destructuring. 4. Implementing smart and dumb components and techniques like delegating presentation logic and minimizing unnecessary props. 5. Using snapshot testing and encapsulating styles to components to improve maintainability.

1. SUBJECTIVE BEST
PRACTICES FOR REACT
WOJCIECH PIĄTKOWSKI

2. ARCHITECTURE DOCUMENTATION
▸ explains how to write features
▸ a contract between team
members
▸ unified way of getting pieces
together
▸ discussion about
architecture in one place
▸ newcomers can be quickly
introduced to

3. ARCHITECTURE DOCUMENTATION
▸ can get outdated easily
▸ it’s a theory
▸ no one really reads it :)

4. SCAFFOLDING
▸ it’s also a documentation
▸ provides real code that
can be reused very
quickly
Scaffolding Reflux Component

5. SCAFFOLDING
▸ used often thus it’s likely
to get update when
something changes.
Scaffolding Reflux Component

6. SCAFFOLDING
▸ you can easily write your own to match often custom needs of a project
▸ or use one of third party projects
Use example of
https://www.npmjs.com/package/react-scaffold
▸ or even fork one of those on
github too much your needs

7. REACT COMPONENTS CLEARNESS - DESTRUCTING PROPS AND STATE
D
E
S
T
R
U
C
T
E
D

8. REACT COMPONENTS CLEARNESS - DESTRUCTING PROPS AND STATE
D
E
S
T
R
U
C
T
E
D

9. REACT COMPONENTS CLEARNESS - DESTRUCTING PROPS AND STATE
NOT
D
E
S
T
R
U
C
T
E
D

10. SMART AND DUMP COMPONENTS
Smart component
- displays three dump
components
- connects to a store through
this.store = chairsStore
- triggers action
chairActions.createChair
Dump component
- displays simple form
- has no state

11. SMART AND DUMP COMPONENTS
Smart component
- div’s witch css classes were
added
- css classes holds
presentational function which
belongs to to dump
components
- chairs.css is imported
which adds styles to
elements with css classes
- thanks to it smart
components now holds also
presentational
Let’s delegate presentational
function to somewhere else…

12. SMART AND DUMP COMPONENTS
Smart component
- It’s previous presentational
features were moved to
ChairsManger
- ChairsManger receives
all it’s content via children
prop …
…which makes wrapping each
child separately very hard

13. SMART AND DUMP COMPONENTS
Smart component
- all props that previously were
sent to each child dumb
component, are grouped and
passed to ChairsManager
- ChairsManager does all
the presentational work
Making ChairsManager more flexible - #1

14. SMART AND DUMP COMPONENTS
Dump component
- recevies all props
- passes each prop to specific
child dump component
- there are no unique for
ChairsManager props
- a lot of props are just passed
further, they don’t do real job
here
Making ChairsManager more flexible - #1

15. SMART AND DUMP COMPONENTS
Smart component
- there are no data passed to
ChairsManager that would
normally be passed to dump
components
- Dump components itself are
passed to ChairsManager
Making ChairsManager more flexible - #2

16. SMART AND DUMP COMPONENTS
Dump component
- receives props
elements/components
through props
- those props may be
interpreted as slots where
other can components can fit
- there are no „dead” props
Making ChairsManager more flexible - #2
This is simplified example. In
real project structures are more
complicated. General idea is to
avoid having too many props
passes to a component only to
have them passed further.

17. PRACTICAL TESTING OF REACT COMPONENTS
Deep snapshot testing
- those test are super simple to
write
- thanks to scaffolding they
may require zero effort
- they don’t test behavior
- rather than that they are
freezing already working
component
- when any of its children is
changed the snapshot test
will alert us
- action can be taken if
necessary or simply quick
update of snapshot test

18. STYLES ENCAPSULATIONS
- globals styles should be
avoided
- styles can be easily
encapsulated with a css
class specific to a component
- effort of creating a new style
file for each component can
be minimized thanks to
scaffolding
- minimizes chances of styles
collision (some extra
strategies can be added like
project related prefixes)
- keep styling close to related
component - easier to
maintain
ComponentName.less

19. HOT MODULE RELOADING + REACT
- Working with minimalistic
source maps - eval
- faster bundling
- no problems with source
maps while using HMR
- target of babel transpiration
does not have to be ES5
which means even faster
bundling
- http://kangax.github.io/compa
t-table/es2016plus/
support of ES2016+ is great!
- babel-preset-env picks
minimal number of
transformers base on
specified target, e.g chrome
v61
- dev: ‚eval’
thanks to that modules are
displayed with generated
code which is close to ES6+

20. HOT MODULE RELOADING + REACT
- code is ES2016+ without
classes
- of course no JSX
- but the code is in general
readable
- and probably sooner or later
it will be possible not to
transform ES6 classes

21. HOT MODULE RELOADING + REACT
- unfortunately due to possible
bug in react-hot-loader
transformation of ES6
classes is necessary
- react-hot-loader
currency is in beta version:
3.0.0-beta.7
what gives hope that problem
soon will be solved

22. LAST WORDS - LINTING
▸ the sooner it’s set up the better
▸ introducing some of useful linters rules in late phase of the project is either impossible or very hard to do
so
▸ for those rules which does not support —fix it’s still possible to automize thanks to additional transformers
e.g. ESLints’s rule sort-comp has a separate transformer in react-codemod
▸ configuration of ESlint can be
accelerated by picking one of
already prepared config, e.g.
eslint-config-airbnb,
eslint-config-eslint
The full list of most popular configs
can be found at Github:
dustinspecker/awesome-eslint