Downloaded 29 times
More Related Content
Similar to Styled Components & React.js
Styled Components & React.js
- 1. 1 It’s place inthe front-end landscape… and in your . styled-components
- 2. 1. Introduction 2. Whatis CSS-in-JS? 3. Whaaat? 4. The CSS-in-JS Spectrum 5. What is styled-components? 6. How does it work? 7. What does it generate? 8. React’s Best Friend today’s agenda
- 3. about me grayson hicks front-enddeveloper greenville roots Graduated from The Iron Yard in 2016. ed-tech in asheville Swiss-army knife developer. agency life Front-end developer for Mediacurrent. @jamesgraysonhicks grayson.hicks@mediacurrent.com graysonhicks @graysonhicks
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. “CSS-in-JS” refers to a patternwhere CSS is composed using JavaScript. one CSS-in-JS definition
- 10. So stupid. another CSS-in-JSdefinition
- 11.
- 12.
- 14.
- 15. quick benefits scalespeedpowerdead codescope Scope • No morecrazy long selectors • Integration w/ third party code • Inline/hash-classes
- 16. scope quick benefits scalespeedpowerdead code Dead Code • HarnessJS to evaluate code • Smaller bundles • Browser and component specific
- 17. dead codescope quick benefits scalespeedpower Power • Functions • Props •Height/width • Parent elements • True global variables • Minification
- 18. powerdead codescope quick benefits scalespeed Speed • Minimal bundle •Reusability equals smaller bundle • Requires you to leverage • Matter of time until matches • Faster dev times as design system with components
- 19. speedpowerdead codescopequick benefits scale Scale • Grows indirect proportion to number of components • See issues with scope • See issues with dead code • Refactoring
- 20. all good things comein twos { } < /> object component
- 21. all good things comein twos { } < /> object component object style • Uses className • Separate stylesheet • More typical HTML/CSS/JS feel
- 22. all good things comein twos { } object < /> component component style • Still write CSS rules • More declarative • Blurs HTML/CSS/JS lines
- 23. the spectrum components objects styled-componentsglamorous emotion aphrodite css-modules
- 24.
- 25. styled-components “The basic ideaof styled-components is to enforce best practices by removing the mapping between styles and components.” • Uses declarative nature of components • Props instead of classes • Intrinsically links component and style • Full CSS support • Full JS support
- 26.
- 27.
- 28.
- 29. how it works styled function { } props </> tagged template literals `` extend
- 30. how it works styled function { } extend props </> tagged template literals `` • New ES6 feature • It’s a function!
- 31. how it works styled function { } extend props </> tagged template literals `` • New ES6 feature • It’s a function! • Uses interpolations, or string splitting • If you pass no interpolations, the first argument your function receives is an array with one string in it.
- 32. how it works styled function { } extend props </> tagged template literals `` • New ES6 feature • If you pass no interpolations, the first argument your function receives is an array with a string in it. • Uses interpolations, or string splitting • If you do pass interpolations, the array contains the passed string split at the positions of the interpolations. The rest of the arguments will be the interpolations, in order. In this case, interpolation is string, in SC it’s often a function with props.
- 33.
- 34.
- 35. props < /> tagged template literals `` how it works styled function {} extend • Sometimes too many props gets messy • Can also use the withComponent() method to change its underlying HTML element • Probably changing name in next major
- 36. extend props < /> tagged template literals `` how it works styled function {} • What if they’re not your components? Or not styled? • Look familiar?
- 37.
- 38. inline styles vs. class names {} .abc inline class names
- 39. inline styles vs. class names inlinestyles • Generates CSS and attaches via styles attribute • No full CSS (media queries, animation, etc. .a clas { } inline
- 40. { i inline styles vs. class names classnames • Generates style tags with hash class names • Full CSS and faster .abc class names
- 41. Why all ofthis makes styled-components React’s best friend?
- 42. react ❤ styled-components componentsdeclarative tightly coupled
- 43. react ❤ styled-componentstightly coupleddeclarative components • Doesn’t just ‘work with’ components, it’s built for it! • Makes render() function of your component match • Even comes with Theme component • Works React-Native
- 44. componentsreact ❤ styled-componentstightly coupleddeclarative • React defines itself by its ‘declarative views’
- 45. components react ❤ styled-components tightlycoupleddeclarative • React defines itself by its ‘declarative views’
- 46. declarative componentsreact ❤ styled-components tightlycoupled • A pattern seeing in other React libraries, including data • React started by tightly coupling markup with logic
- 51. react ❤ styled-components componentsdeclarative tightly coupled
- 52. True love? Yourthoughts and questions!