React JS Part 2
Faical Abderraouf Khennouche
1.
2.
3.
4.
Proptype.
React Router.
Redux.
Hooks.
Proptype
Definition (Officiel)
Runtime type checking for React props and similar objects.
Definition
Proptype is a way to check that the passed props you are getting from the parent are
accurate and as you expected.
Proptypes work with both stateless and stateful components.
How to use Proptypes
Installation
It comes in a separate package, so you have to install it via npm or yarn.
Just run the command npm install --save prop-types
Importing
We make sure to import it in our components
Then we need to assign an object to the Component.proptypes which will contain all of our
type checks and validations.
When to use Proptypes
At the creation of any component that we need to validate its props.
Why we use Proptypes
Validate the type of the passed props.
https://reactjs.org/docs/typechecking-with-proptypes.html
React Router
Definition (Officiel)
React Router is a collection of navigational components that compose declaratively with
your application. Whether you want to have bookmarkable URLs for your web app or a
composable way to navigate in React Native, React Router works wherever React is
rendering.
Definition
React Router is a library that will help you render a certain component according to
certain route.
How to use React Router
React router will render a specific component when the corresponding route is matched.
We need two main things
List of components.
List of routes.
We have two kinds of routers.
Browser Router
This kind of router is like the normal browser router, routes get pushed and traced in the
browser’s history.
Using this method requires us to add more configuration to the server to make it render
the index page for all the matched routes of the website.
Hash Router
This router is not traced or pushed to the browser’s history, it’s like the anchor tag route.
The Hash router will render routes as www.example.com/#/users for example.
Using this method does not require us to make any server configuration because the
index page will be always rendered.
We can make nested routes
To retrieve parameters from the url we make use of (useParams) function
When to use React Router
We use React Router when we need to handle routes in our application, make redirections,
authenticate and authorize client to access some routes, and also to make default pages.
Why we use React Router
We use React Router when we want to make our application scalable since we can add as
many components with their associated routes as we want, and in a very easy way.
We can make default paths so that if none of the routes
match, the user will be redirected to it, like a 404 page for ex.
Redux
Definition (Officiel)
Redux is a predictable state container for JavaScript apps.
Definition
Redux is a state management tool that can be used with any front end architecture to help
manage the state of the application across all components.
How to use Redux
Action
Is an object describing what event will occur.
Reducer
Is responsible to change the state according to the dispatched action.
Store
●
●
●
Store is like a globalized state.
We subscribe to it to get the current state when a new action is dispatched.
We use it to dispatch actions.
Dispatch
It will send the action to the reducer using the store.
Using Redux with React
To use React with Redux we need to add react-redux library
To share our state across all the components we need a provider
We create an Actions and Reducers folders
Each action will return an object containing a type and a payload
Each reducer will return a function that will change the state according to the passed
action.
We combine all reducers using combineReducers from redux
And in the final component, we use useSelector and useDispatch to get and set the state.
When to Redux
●
●
A lot of state to manage.
State is distributed over all components.
Regrouping the state in one place will help us track, update and read the state.
Why we use Redux
Root (index.js)
Component G1
Component G2
Component G1
Component G2
Component G2
Component G2
Hooks
Definition (Officiel)
Hooks are functions that let you “hook into” React state and lifecycle features from
function components.
Hooks don't work inside classes — they let you use React without classes.
How to use Hooks
● useState()
● useEffect()
When to Hooks
When we need state management inside a functional component.
Why we use Hooks
To avoid using the class component which will make the code smaller, bug free and more
readable.
Thank you