Please enable JavaScript.
Coggle requires JavaScript to display documents.
React JS - Coggle Diagram
React JS
Context API
With Hooks
Create a context
ContextProvider component
This component hold all the state and functions
Provide state as value argument in the return of component
Import ContextProvider in App.js
Wrap other components inside of Provider
Import Context in the individual component (Navbar for eg) using useContext Hook
With Reducers
Reducers are functions that contain all other state changing functions.
Clean the code when you have multiple functions in context file
Acts as a storage for State. Used when props need to be passed through multiple levels
Context.Consumer
Context.Provider
File Structure
Index.html
Contains main root element where all things are rendered
App.js
All the logic goes here
From here rendering of all components happens
Routing
Router
Switch (provides default route like 404 page)
Route
if using switch, make a route with component attribute only that will behave as default route
takes path and component as attribute
Link
It replicates the task of <a> and uses "to" as an attribute
Components
Building Blocks
Function Bases
Uses hooks for state
Class Based
have a state variable
Hooks
Special Functions which provide special functionality in Function Based Components
useState
allows to make state
useEffect
runs when the data in component changes(a delimiter can be set)
useContext
createContext