React Components: Playing simple and easy

Light talk on some of the good practices for React Components.

Presented at Moo Tech Tuesday.

http://mootechtuesday.eventbrite.co.uk

Transcript

1. React Components Playing simple and easy Henrique Alves
 Front-end at @FathomLondon #TechTuesday @healves82
2. Play simple football is hard @healves82 #TechTuesday
3. React embraces modularity. @healves82 #TechTuesday
4. Pillars of FP 
 – Pure functions
 – Immutability
 – Composition @healves82 #TechTuesday
5. Low level components 
 They represent the HTML element in your document. @healves82 #TechTuesday // layout/image.js // e.g. <Image src="cover.png"/> const Image = ({...props }) => ( <img {...props} /> );
6. Low level components @healves82 #TechTuesday /* const CoverImage = ({title, src}) => ( <img src={src} alt=`Front Cover – ${title}` /> ); */ const CoverImage = ({title, src}) => ( <Image src={src} alt=`Book Cover – ${title}` /> );
7. Low level components @healves82 #TechTuesday // layout/image.js const Image = ({...props }) => ( <img {...props} /> ); // components/cover-image.js const CoverImage = ({title, src}) => ( <Image src={src} alt=`Book Cover – ${title}` /> );
8. Low level components @healves82 #TechTuesday // image.js const Image = ({...props }) => { const style = { borderStyle: 'none' }; const styles = Object.assign({}, style, props.style ); return <img {...props} style={styles} /> };
9. You know what the component does by looking at its propTypes. @healves82 #TechTuesday
10. 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 };
11. Type checking with Flow @healves82 #TechTuesday type Props = { coverImage: CoverImage, title: string, author: string, price: number }; const BookItem = ({coverImage, title, author, price, ...props}: Props) => ( ... );
12. Any styling logic is added into the component not in the CSS. @healves82 #TechTuesday
13. Styling @healves82 #TechTuesday /* button.css */ .root { composes: bolder from 'typography'; }
14. I don’t compose CSS. @healves82 #TechTuesday
15. Styling @healves82 #TechTuesday const Button = () => ( <div className={styles.root}> <Text weight="bold">Button</Text> </div> );
16. 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'; }
17. 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') };
18. Don’t be religious. Don’t knock it without try. Pick the one that works better for your team. @healves82 #TechTuesday
19. Thanks @healves82