React componentsat

Experiment, fail, learn, rewrite.

Why React?

Same tools between teams, new js tech stack, isolated components,

cool kids

Inspiration

• React Bootstrap • Material UI with React • Google Material

Components

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

Start small then build bigger components by

joining components

Atomic Design

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

Tools

Style Guide

• Use version tags • Use bad examples not

happy ones • Put it live • Happy designers • Enjoy

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

everywhere

Linting

Get Responsive

• Make it configurable • React Grid System • Use Js events with

moderation • Debounce, throttle • Responsive Typography • Responsive Images

Get Responsive

What?

• 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

Questions

Thanks!