React Components Playing simple and easy Henrique Alves
 Front-end at @FathomLondon #TechTuesday @healves82 

Play simple football is hard @healves82 #TechTuesday 

React embraces modularity. @healves82 #TechTuesday 

Pillars of FP 
 – Pure functions
 – Immutability
 – Composition @healves82 #TechTuesday 

Low level components 
 They represent the HTML element in your document. @healves82 #TechTuesday // layout/image.js // e.g. const Image = ({...props }) => ( ); 

Low level components @healves82 #TechTuesday /* const CoverImage = ({title, src}) => ( ); */ const CoverImage = ({title, src}) => ( ); 

Low level components @healves82 #TechTuesday // layout/image.js const Image = ({...props }) => ( ); // components/cover-image.js const CoverImage = ({title, src}) => ( ); 

Low level components @healves82 #TechTuesday // image.js const Image = ({...props }) => { const style = { borderStyle: 'none' }; const styles = Object.assign({}, style, props.style ); return }; 

You know what the component does by looking at its propTypes. @healves82 #TechTuesday 

PropTypes @healves82 #TechTuesday BookItem.propTypes = { coverImage: React.PropTypes.element.isRequired, title: React.PropTypes.string.isRequired, author: React.PropTypes.string.isRequired, description: React.PropTypes.string, price: React.PropTypes.number.isRequired }; 

Type checking with Flow @healves82 #TechTuesday type Props = { coverImage: CoverImage, title: string, author: string, price: number }; const BookItem = ({coverImage, title, author, price, ...props}: Props) => ( ... ); 

Any styling logic is added into the component not in the CSS. @healves82 #TechTuesday 

Styling @healves82 #TechTuesday /* button.css */ .root { composes: bolder from 'typography'; } 

I don’t compose CSS. @healves82 #TechTuesday 

Styling @healves82 #TechTuesday const Button = () => ( ); 

Atomic CSS Modules Michele Bertoli suggested an interesting approach combining Atomic CSS with CSS Modules. @healves82 #TechTuesday .tabs { composes: width-100 from 'size'; composes: reset from 'list'; composes: flex from 'display'; /* tablet and up */ composes: block from 'display/tablet'; } 

Helpers for inline styles @healves82 #TechTuesday // gradient.js // You can find some useful helpers at 
 // https://github.com/kitze/stylz export const linear = (fromColor, toColor) => ({ background: `linear-gradient(to bottom, ${fromColor}, ${toColor})` }); // button.js import {linear} from '../helpers/gradient.js'; const styles = { padding: 8, linear('#eee','#ddd') }; 

Don’t be religious. Don’t knock it without try. Pick the one that works better for your team. @healves82 #TechTuesday 

Thanks @healves82