ReactJSDay 2018, React Advanced Patterns & Techniques

Thursday, 4th October 2018

Link to the training page

Teacher: @thekitze

This repository contains all the commits made during the workshop, below you can find the exercises list.

The repository contains also my code for the exercises, remember:

• I know that it could be improved in a lot of ways but it isn't the goal of this repo
• the exercises are made in an incremental way so I never removed the previous example. In the end, you will find all the exercises together
• you can see the code running on CodeSandbox
• the exercises themselves are useful to you only if you attended the workshop with the amazing @thekitze

Exercises

Higher Order Components

Slides

ex. 1: Download

• Create a HOC called withMouse
• It should send the mouse position (x and y) to the underlying component as props

ex. 2: Download

• Write a HOC called measureTime that will measure the time while a component is mounted
• This HOC should pass a secondsPassed prop to the original component

ex. 3: Download

• Create the fetchData HOC.
• Note that this HOC should also accept an url so you need to create a function that returns a HOC that returns a component… fun right?
• Fetch real data using window.fetch, you can use the Star Wars api: https://swapi.co/api/people/1
• Example usage: const WrappedApp = fetchData('https://swapi.co/api/people/1')(App);

Render Props

Slides

ex. 1: Download

• Recreate all the HOCs that we made, but using render props.
• The components should be FetchData, MeasureTime and MouseTracker and they should be in a components folder
• You can use the render or the children prop, it doesn’t matter.
• Use all of them in App.js

ex. 2: Download

• Create a KeyLogger component that’s gonna use render props
• Focus the KeyLogger component when it mounts (you can use refs for this) and set the tabIndex to 0
• When the user types something, pass lastKeystroke and typedText to the children
• Don’t save Backspace, Enter and Escape in the typedText prop, but show them in lastKeystroke
• Hint: use onKeyDown to capture keyboard events
• Make sure this component wraps everything in App

Compound components

Slides

ex. 1: Download

• For this exercise you need to create two components: Select and Option Usage:
• The Option component should be a functional component, and it should only receive props: onSelect, children and active
• The Select component should be a compound component, and it should have two states: when it’s opened and closed.
• You should keep an opened property in the state of the Select component, but the Option component shouldn’t care about it
• Select should accept a defaultValue prop which will set the initial value
• If Select is closed, it should display the currently selected option
• When clicking on Select it should present all the other options, and the selected option should be highlighted
• When clicking on an option, the state should be updated in Select
• To pass the state from Select to Option you should use the React.cloneElement() api

Controlled Components

Slides

ex. 1: Download

• Make the Select component controlled.
• It should accept the following props: value, opened, onSelect, onOpen
• Inside of it, check on every click if the component is controlled or not
• If the component is controlled, you should just call the callbacks (onSelect, onClick) etc
• If the component is not controlled, you should change the state internally
• If the component is controlled, make sure to compare to the outside props value and opened instead of comparing to the internal state
• Keep the state of the Select inside of the App component, and just pass it down to Select to make it controlled