PROJECTS
React
CONTEXT API HELP
RESOURCESLearn more about how to use the Context API by using the
following resources:The official React documentation is a great place to start because
it is written so well and includes real-world examples that are easy
to follow.Courses and blog posts
I used the official docs to get started using Context, as well as
Flavio Copes’ guide to the Context API (https://flaviocopes.com/
react-context-api/) and Kent C Dodds’ course, Advanced React
Component Patterns, on egghead.io (https://egghead.io/courses/
advanced-react-component-patterns).
Those resources are great but there’s nothing like diving in and
trying it for yourself. It’ll be challenging to begin with but that’s
the best way to learn! I freely admit to getting frustrated, writing
poor implementations and having to start over many times before
I understood Context well enough to use it in a project. But if you
find you’ve given up, you only have to come back to it one more
time... until you finally crack it!
To do that, you could use two fantastic resources that have
recently become available:CodeSandbox
CodeSandbox (codesandbox.io) is an online editor for creating
apps in many languages, with built-in support for React. It’s like
CodePen but with support for JavaScript modules.Spectrum
Spectrum (spectrum.chat), built by the creator of styled-
components and recently acquired by GitHub, is rapidly becoming a
lively community. I’ve found it a great place to share ideas, ask for
help and chat about the latest developments in JavaScript, React
and other tools I use every day. Hope to see you there!}
}You might be able to see that on lines two and three,
we’re calling on our core library, React, not some
external dependency. That’s the first benefit already!
I like to set up the Consumer in this file, even
though we don’t use it here. It helps me keep track
of the logic when it’s all in one place. Inside our class
I’ve set up a few items in state to demonstrate what’s
going on here.
Next, create a module containing a few items the
user can interact with:import React from “react”;
import { MyContextConsumer } from “./Context”;
export default class Module1 extends React.Component {
render() {
return (
<div>
<hr />
<h2>Data Originates in this module</h2>
<MyContextConsumer>
{context => (
<div>
{context.state.aRangeofOptions.map((item, index)
=> (
<>
{item}
<input
type=”radio”
name=”selection”
key={item.Optionvalue}
onClick={() => context.state.onItemSelect(item)}
/>
</>
))}
<div style={{ margin: “20px 0” }}>
selected: {context.state.updatesOnClick || “none”}
</div>
</div>
)}
</MyContextConsumer>
</div>
);
}
}In this component, we can loop over an array in our
context.state to create a few checkboxes and a text
description of the output.
In the next module we’re basically going to
duplicate this code but leave out the loop. This
module is so we can demonstrate how context can be
passed down.Program communities are always a great place to go for help and the Spectrum
community platform is definitely one to visit