Insights of how we are using react components at Zoover. Creating a complete library of components to increase development speed and work with different teams.

1. React components
at
Experiment, fail, learn, rewrite.

2. Why React?
Same tools between teams, new js
tech stack, isolated components,
cool kids

3. Inspiration
• React Bootstrap
• Material UI with React
• Google Material
Components

4. Isolated Components
Inline Styles
• No Media Queries
• No Overwrite
• No CSS Animations
• No CSS States
Extra markup (wrapper)
Feed only data
Style as prop when needed

5. Start small then build
bigger components by
joining components
Atomic Design

6. • React Styleguidist
• Eslint - airbnb
• React Grid System
• ReactTransitionGroup
• Greensock js
• React Motion
• Zeplin
• Mobile detect
• React AB
Tools

7. Style Guide
• Use version tags
• Use bad examples not
happy ones
• Put it live
• Happy designers
• Enjoy

8. • Your friend and enemy
• Don’t be too strict
• Sometimes DOM is needed
• Interactive elements
• Same code style
everywhere
Linting

9. Get Responsive
• Make it configurable
• React Grid System
• Use Js events with
moderation
• Debounce, throttle
• Responsive Typography
• Responsive Images

10. Get Responsive
What?

11. • Don’t test the obvious
• Make sure that you at least
render something
• Higher level testing, page
functionality
• BDD with Cucumber js
• Browserstack
• React ID & classes
• Selenium
Testing

12. Questions
Thanks!