RRU 011: Simple React Patterns with Lucas Reis




React Round Up show

Summary: <p><strong>Panel: </strong></p> <ul> <li>Charles Max Wood</li> <li>Cory House</li> </ul> <p><strong>Special Guests</strong>: Lucas Reis</p> <p>In this episode of React Round Up, the panel discusses simple React patterns with Lucas Reis. Lucas works as a senior front-end developer at <a href="https://www.zocdoc.com/">Zocdoc</a> and previously worked in Brazil for an ecommerce company called <a href="https://ri.b2w.digital/">B2W</a>. He recently wrote a <a href="https://lucasmreis.github.io/blog/simple-react-patterns/">blog post</a> about simple React patterns that really took off and became popular on the web. They talk about this blog post, what defines a successful pattern, and then they discuss the different patterns that he has discovered in his years of <a href="https://reactjs.org/">React</a> programming.</p> <p><strong>In particular, we dive pretty deep on:</strong></p> <ul> <li>Lucas intro</li> <li>Tries to write blog posts as much as possible</li> <li><a href="https://lucasmreis.github.io/blog/simple-react-patterns/">Simple React Patterns blog post</a></li> <li><a href="https://reactjs.org/">React</a></li> <li>What does he mean by “successful” patterns?</li> <li>Three things that define good patterns</li> <li>Define successful?</li> <li>The mix component</li> <li>The Container/Branch/View pattern</li> <li>First successful pattern he has found</li> <li>Separation of concerns</li> <li>Common concern: are we worried about mixing concerns?</li> <li>If/else</li> <li>Can you encapsulate in the view?</li> <li>Pattern matching</li> <li>React loadable</li> <li>You need to think of 3 states at least</li> <li>Higher-order component</li> <li>Render props</li> <li>And much, much more!</li> </ul> <p><strong>Links:</strong></p> <ul> <li><a href="https://www.zocdoc.com/">Zocdoc</a></li> <li><a href="https://ri.b2w.digital/">B2W</a></li> <li><a href="https://lucasmreis.github.io/blog/simple-react-patterns/">Simple React Patterns blog post</a></li> <li><a href="https://reactjs.org/">React</a></li> <li><a href="https://www.infoq.com/presentations/Simple-Made-Easy"><em>Simple Made Easy</em> by Rich Hickey</a></li> <li><a href="https://github.com/lucasmreis">Lucas’s GitHub</a></li> <li><a href="http://lucasmreis.github.io/blog/">Lucas’s Blog</a></li> <li><a href="https://twitter.com/iamlucasreis">@iamlucasreis</a></li> </ul> <p><strong>Picks:</strong></p> <p>Charles</p> <ul> <li><a href="https://www.fullcontact.com/">FullContact</a></li> <li><a href="https://www.udemy.com/">Udemy</a></li> </ul> <p>Cory</p> <ul> <li><a href="https://conferences.oreilly.com/fluent/fl-ca">Fluent conf</a></li> <li><a href="https://github.com/mweststrate/immer">Immer</a></li> </ul> <p>Lucas</p> <ul> <li><a href="https://percy.io/">Percy</a></li> <li>Be studying the languages and be inspired!</li> </ul>