Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.
Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.
For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Data Science and Machine Learning - 16 wks
Full-Stack Software Developer - 16w
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
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:
Why is it so hard to share data throughout the entire application? Where are my global variables?
Why is it so hard to pass data between components? A.K.A. props. Props are fine when you want to pass data between parent and child, but what happens when we need to go deeper? This is called "Props Hell" or "Prop Drilling".
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.
Data propagation and re-rendering: when this centralized global state (store) changes, it triggers a re-render of all the child components (your entire application), which produces new data to show 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 provides the data to many Consumers, and 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 signals work: TV channels emit a data signal, and all TV antennas consume this signal, receiving 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 susceptible 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 only by a limited set of functions. Just like the regular state, we don't change the state, we set it again. 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...
Ok, after a couple of hours to make the context API implementation simpler without using bindings... this is what I got in 5 simple steps!:
createContextfunction from React. That object will be shared within all the consumers during the application's 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) and the functions (actions).
Note that we have to export both
ContextWrapperso that all child 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).
TodoListcomponent, knowing that we can use
useContext()hook 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
useContext hook that you see above
In its destructured variant. Pay attention to how that also simplifies the way we then access the store: