RRU 003: Advanced Component Patterns and Downshift with Kent C Dodds




React Round Up show

Summary: <p><strong>Panel: </strong></p> <ul> <li>Charles Max Wood</li> <li>Nader Dabit</li> <li>Kent C Dodds</li> <li>Cory House</li> </ul> <p>In this episode of React Round Up, the panel discusses advanced component patterns and <a href="https://github.com/paypal/downshift">Downshift</a>. They talk about different component patterns, especially render prop patters, and the fact that Downshift allows for your components to be much more useful generally for more people. They also note that the render prop patterns can help to separate logic from view, which makes things easier to develop.</p> <p><strong>In particular, we dive pretty deep on:</strong></p> <ul> <li>Component patterns</li> <li><a href="https://github.com/paypal/downshift">Downshift</a></li> <li><a href="https://egghead.io/courses/advanced-react-component-patterns">Egghead course</a></li> <li>What makes it advanced?</li> <li>Requires taking a step back and think about your components a little differently</li> <li>Is there a <a href="https://facebook.github.io/react-native/">React Native</a> version?</li> <li><a href="https://reactjs.org/">React</a></li> <li>Render prop patterns</li> <li>Code abstraction or code re-use</li> <li>Why Downshift is powerful</li> <li>Can use regular HTML and CSS with Downshift</li> <li>Allows you to be in charge of rendering</li> <li>What other places is the render prop pattern useful?</li> <li>What is the benefit of using a react component over a JS component?</li> <li><a href="https://github.com/jaredpalmer/awesome-react-render-props">Awesome React Render Props GitHub Repo</a></li> <li>Downshift is highly accessible</li> <li><a href="https://jqueryui.com/">jQuery UI</a></li> <li><a href="https://twitter.com/marcysutton?lang=en">@MarcySutton</a></li> <li>Render props reduce the amount of opinion that component has</li> <li>Choosing render props gives the consumer more power as well as more responsibility</li> <li>Render props are best used with open source projects</li> <li>And much, much more!</li> </ul> <p><strong>Links:</strong></p> <ul> <li><a href="https://reactdevsummit.com/">React Dev Summit</a></li> <li><a href="https://github.com/paypal/downshift">Downshift</a></li> <li><a href="https://egghead.io/courses/advanced-react-component-patterns">Egghead Course</a></li> <li><a href="https://facebook.github.io/react-native/">React Native</a></li> <li><a href="https://reactjs.org/">React</a></li> <li><a href="https://github.com/jaredpalmer/awesome-react-render-props">Awesome React Render Props GitHub Repo</a></li> <li><a href="https://jqueryui.com/">jQuery UI</a></li> <li><a href="https://twitter.com/marcysutton?lang=en">@MarcySutton</a></li> <li><a href="https://github.com/kentcdodds">Kent’s GitHub</a></li> <li><a href="https://kentcdodds.com/workshops/">Kent’s Website (with links to courses)</a></li> </ul> <p><strong>Picks:</strong></p> <p>Charles</p> <ul> <li><a href="https://blog.kentcdodds.com/">Kent’s blog</a></li> <li><a href="https://www.amazon.com/Potter-Hogwarts-Battle-Cooperative-Building/dp/B01EIKRP0K">Hogwarts Battle Board Game</a></li> <li>Take time to write leisure code</li> <li>Sign up for <a href="https://reactdevsummit.com/">React Dev Summit</a> with code KentCDodds for 10% off</li> </ul> <p>Cory</p> <ul> <li><a href="https://www.youtube.com/channel/UCSUkyvHHdLuFKkHyYxCmmcw">Manorisms YouTube Videos</a></li> </ul> <p>Kent</p> <ul> <li><a href="https://github.com/reactions/component">React Component Component</a></li> <li><a href="https://jordaneldredge.com/projects/winamp2-js/">Winamp2-js</a></li> <li><a href="https://tinyletter.com/kentcdodds">His Newsletter</a></li> <li>Beyond React 16 by Dan Abramov</li> </ul>