evolving-patterns-in-react.md

Evolving Patterns in React

Speaker: Alex Moldovan

Date: 29.05.2018

Venue: Fortech

Description:

I'm preparing this Intermediate-Advanced React workshop and I thought I could give it a run inside the community.

This is the approximate curricula I will try to focus on, but I have no idea how much can be covered in approx 2 hours:

Advanced Component Design

• Conditional Rendering
• Using ESnext Class Properties
• Curried Event Handlers
• Stateless vs Pure Components Having Fun with Props
• Children Props
• Pass-through Props
• Destructuring Props Reusing and Composing in React
• Mixins
• High-Order Components
• Render Props Provider Pattern
• The new Context API State Management
• State Lifting
• When is Redux needed

• Please keep in mind that I will not go through the basics or React and I assume you know how to work with props/state, lifecycle hooks, etc. ** Bring your laptops, this will be a hands-on workshop

Slides:

• https://slides.com/alexmoldovan/deck-8-16#/ - Not very useful

Meeting notes

We used codesandbox to work on practical examples. Here are the sandboxes for each chapter:

Component Design

• Start - https://codesandbox.io/s/w2605o04x8
• Final - https://codesandbox.io/s/387v464m5m

Pure vs Stateless components

• Final - https://codesandbox.io/s/03k2xzo3zl

Having fun with props

• Start - https://codesandbox.io/s/r1r4q8kkzo
• Final - https://codesandbox.io/s/kkyzq8oz3v

Higher Order Components

• Start - https://codesandbox.io/s/qk90xw7zqj
• Final - https://codesandbox.io/s/vv198n1y00

RenderProps

• Start - https://codesandbox.io/s/nk9jvnp3wp
• Final - https://codesandbox.io/s/1824x2jnjj

Provider/Consumer

• Start - https://codesandbox.io/s/jvj9r1v91w
• Final - https://codesandbox.io/s/xpl9x4kmmq

References

• My Original Article
• React Children Explained
• React Patterns Course on Egghead
• Ryan Florence - Compound Components
• Michael Jackson - Never write another HOC
• React Context API