A simple prototype to demonstrate how to use Context and HOCs to manage state.
Add a Pokémon to your Pokédex, which tracks what Pokémon you've seen on your journey, by selecting a Pokémon from the dropdown on the left and clicking Add. After a Pokémon from the dropdown is added the Pokédex, it is removed from the dropdown.
Demo: https://react-pokedex-context.onrender.com/
npm install and then npm start.
Each branch represents a step in the process.
master -- Basic setup. No working functionality.
- 1-create-context -- create the Context and Provider
- 2-use-provider -- using the Context Provider without HOCs
- 3-hocs -- refactor code to use HOCs
- 4-decorators -- refactor code to use decorators
DropdownSection and PokedexSection are sibling components, but they share the same state! How would we get them to update at the same time?
One option is to put all the state management inside App. This would mean that we'd have the pass that to DropdownSection and PokedexSection as props. This is fine for how simple this is. But what if DropdownSection were the grandchild of OtherComponent and PokedexSection were the great-grandchild of YetAnotherComponent? We'd have to drill those props all the way down! (Hence, "prop drilling.")
Another option is to use Redux, but for an app this simple, there is no need for that much overhead.
Context solves this problem for us!
Walkthroughs of each step will be in that branch's readme. Each step will have a corresponding comment in file(s) mentioned in that step.