Migrating to React’s New Context API – kentcdodds

📝 Article => Migrating to React’s New Context API by @kentcdodds  | #ReactJS

  • Because of this significant change, I’m making an update to my advanced component patterns course on Egghead.io to use the new API rather than the old one.
  • The Old Context APIHere’s the version of the implementation with the old context API: – const TOGGLE_CONTEXT = ‘__toggle__’ – function ToggleOn({children}, context) { – const {on} = context[TOGGLE_CONTEXT] – return on ?
  • null : = { – [TOGGLE_CONTEXT]: ToggleButton(props, context) { – const {on, toggle} = context[TOGGLE_CONTEXT] – return ( – Switch on={on} onClick={toggle} {…props} / – ) – } – ToggleButton.contextTypes = { – [TOGGLE_CONTEXT]: Toggle extends React.Component { – static On = ToggleOn – static Off = ToggleOff – static…
  • on}), – () = ) – getChildContext() { – return { – [TOGGLE_CONTEXT]: { – on: this.state.on, – toggle: this.toggle, – }, – } – } – render() { – return div{this.props.children}/div – } – }With the old API, you had to specify a string for what context your component…
  • Here’s my new version of this same exercise: – const ToggleContext = React.createContext({ – on: false, – toggle: () = {}, – })class Toggle extends React.Component { – static On = ({children}) = ( – ToggleContext.Consumer – {({on}) = (on ?

With the recent release of React 16.3.0 came an official context API. You can learn more about the why and how behind this API from my previous blog post: “React’s ⚛️ new Context API”. Because of…
Continue reading “Migrating to React’s New Context API – kentcdodds”

desklamp

  • To create a nested route (like /home/homey ), simply nest the component inside of the component within and your route will be created .
  • Container gives you the container component with all the application state.
  • The function call returns the current state object.
  • Desklamp allows you to keep your state in a single state object.
  • // Child components become your routable urls

clean routing and state container for react
Continue reading “desklamp”

Getting Started ReactJS State Propagation

Getting Started ReactJS State Propagation
☞

  • The list will only be updated if the list changes, not on every re-render triggered by the parent component.
  • We will look at the Immutable JavaScript library created by Facebook in order to understand more efficient ways to notify React when a component needs to be re-rendered.
  • The new value is used to update the state of the input component’s parent component.
  • As the parent component, Color is responsible for maintaining the state and triggering the re-rendering of its child components.
  • The child component is not responsible for updating anything with the new data, it simply passes that data along to its parent component which performs the update.

An earlier article explored data within a React component. Data is represented by two structures–properties and state. The former is used to represent immutable data,
Continue reading “Getting Started ReactJS State Propagation”