For all the self-taught geeks out there, here our content library with most of the learning materials we have produces throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Machine Learning Engineering (16 weeks)
Full-Stack Software Developer
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions and more.
Guides on different topics related to the technologies that we teach in our courses
Social & live learning
The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.
People say that React.js makes the easy stuff hard and the hard stuff easy. It's funny, because it's true 😓. These are some of the things they mean:
The Context API is here to solve some of those conundrums by:
Centralizing a global application state: Instead of being limited to local states on views, you can now share data on one central component and spread to its inner components (children, grandchildren and so forth). The centralized state is called store and we can spread it by using the Context.Provider and Context.Consumer
Data propagation and re-rendering: when this centralized global state (store) changes, it triggers a re-render of all of the children compoments (your entire application) which produces new data to show up in the UI. A central setStateish.
If you've already worked with react, you've probably felt the frustration of passing properties throughout your application, we call it "property hell".
The concept behind it is very simple: There is one big Provider, that provide the data to many Consumers, there's no limit in the amount of consumers you can use.
Every time the data stored within the Provider changes, all the Consumers update. It is very similar to how TV signal works: TV channels emit a data signal and all TV antennas consume this signal, receiveing the new content and rendering the image on the televisions.
Everyone has access to the global context now.
The store is now the most delicate piece of data in our application, and it is succeptible to bad usage, i.e. one bad change and the whole application will crash. To avoid this possible scenario we have to make sure the store's data is read-only for the consumers, and can be updated anew by a limited set of functions. Just like the regular state, we don't change the state, we set it anew. This architecture paradigm is called Flux.
We must split the store from the actions and the views (components) and make sure that the views call actions to update the store. We will never directly change the store from a view. I know, I'm being redundant on purpose...
createContextfunction from react. That object will be shared within all the consumers during the application lifetime, it will contain the application store and actions.
ContextWrappercomponent which will be used to pass the context (step 1) to the Consumers. The
ContextWrapper's state is where we declare our initial global state, which includes the data/Store
storeand the functions
actions. Note that we have to export both the
ContextWrapperso that all children components will have access to the Context. For this quick example we will be using the
<TodoList />component as our main component (the declaration is on the last step).
Step 4: Now we can create the
TodoList component knowing that we can use the
Context.Consumer (in classes) or
useContext() hook (in functions) to read the store from the global state (no props necessary).
In this case the component will render the to-do's and also be able to add new tasks to the list.
Very often we will use the hook that you see above
in its destructured variant. Pay attention how that also simplifies the way we then access the store: