foundersandcoders / react-week

🔥 React 💧 Week 🌫
20 stars 5 forks source link

Destructuring morning challenge #4

Closed oliverjam closed 6 years ago

oliverjam commented 6 years ago

We did Diet Pattern Matching for FAC12 and it didn't go super well.

People got stuck figuring out confusing nested destructuring syntax before they really understood what was happening with the basic examples, so it ended up being more of a discussion of exactly how it worked at the end (I don't think any pair got more than 2 or 3 of the examples finished).

Workshop

We should create a new morning challenge specific to practical destructuring and how it's often used in React.

  1. Basic param destructuring ({ title, children }) => ...
  2. Destructuring inside a function: { title } = this.props
  3. Default parameters ({ title = "My title" } ) => ...
  4. Basic nesting ({ res: { data: { name } } }) => ...
  5. Rest spread to only use the props you care about ({ title, ...rest }) => <Thing title={title}><Other {...rest} /></Title>