├── .gitignore └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # (つ ° ヮ °)つ Understanding React Context 2 | 3 | A repo containing different ways to manage state in React with simple examples. 4 | 5 | ## How to use this repo 6 | 7 | You've heard about the [Context API](https://reactjs.org/docs/context.html). You're ready to start using it. Here's a friendly step-by-step progression to using context to manage some portion of your state in your production app. 8 | 9 | Each flavor of state management is under a separate branch: 10 | 11 | 1. [Component State (setState)](https://github.com/matthamil/react-context/tree/1-component-state) 12 | 1. [Redux](https://github.com/matthamil/react-context/tree/2-redux-state) 13 | 1. [Context](https://github.com/matthamil/react-context/tree/3-context) 14 | 1. [Nested Context](https://github.com/matthamil/react-context/tree/4-nested-context) 15 | 1. [Unstated](https://github.com/matthamil/react-context/tree/5-unstated) _(this is awesome :sparkles:)_ 16 | 17 | Checkout each branch one-by-one and run `yarn run start` (or `npm run start`) to see the app in action. 18 | 19 | :warning: This repo is not an endorsement of using context for all of your state management problems. Obligatory Tweet from Dan Abramov: 20 | 21 |

22 | dan abramov 23 |

24 | 25 | ## Helpful Resources 26 | 27 | 1. [awesome-react-context](https://github.com/diegohaz/awesome-react-context) 28 | 1. [Unstated](https://github.com/jamiebuilds/unstated) 29 | 1. [Context API RFC](https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md) 30 | 1. [Context API pull request](https://github.com/reactjs/rfcs/pull/2/files) 31 | 32 | ## Practice using Context 33 | 34 | > But Matt, I want to understand Context better! What can I do? 35 | 36 | Well, you can read about some of the resources above :point_up:. You can also try to extend the app in this repo by doing the following exercises: 37 | 38 | 1. Extend the [Context](https://github.com/matthamil/react-context/tree/3-context) example to use a product category context to choose which type of products are rendered in the product list. 39 | 1. Extend the [Unstated](https://github.com/matthamil/react-context/tree/5-unstated) example to use the a currency context like the one in the [Nested Context](https://github.com/matthamil/react-context/tree/4-nested-context) example. 40 | 1. Create a PR and fix my bad code. 41 | 1. Follow me on [Twitter](https://twitter.com/_matthamil). 42 | --------------------------------------------------------------------------------