Complete Roadmap to Learn React

If you are new to React JS then you would have faced a problem that what to learn in react and what not to, what is more important and on which concept I need to focus more all these question pops up in mind every time we start learning new things.

In this blog we will be discussing a complete roadmap to learn react, On which part you have to focus more and a task at the end based on complete react concept.

If you will follow this roadmap then at the end you can say yourself that you know react Js in any of the interviews.

Lets not waste our time and start with first Prerequisites for Learning react.

Prerequisites for Learning React

• Html (basic)
• CSS (basic)
• JavaScript (intermediate)

Ya that's all you want to know before learning React.

If you know the Prerequisites then we are good to Go for learning React JS. Lets first see the Overview of and then we will discuss each one in detail.

Topics To learn in React

1. Basic React Concepts
2. Advance React Concepts
3. Hooks
4. React-Router
5. Store Management (Redux)
6. Api calls in React (Axios)
7. A task on Complete React Concept

Now lets discuss each Topics in details and how and where can you learn these concepts ,lets discuss everything.

1. Basic React Concepts

So in Basics react concepts we have to just focus on the following things.

• What is JSX ?
• How an Element is Rendered?
• What is components? (functional and class component)
• What is state and why they are required?
• What is props?
• How can we pass props from parent to child component?
• Conditional Rendering

Focus on these concepts more because these will be the base of your react building structure.

After learning these concepts lets move towards our Advance Concepts of React

2. Advance React Concepts

• How to Print list with the help of Map method in JSX and importance of key in list?
• Handling Forms in React
• How to pass data from child component to parent component?(Lifting State Up)
• How to use Reference(ref) in React?
• Fragments
• Component Lifecycle methods
• Higher order component.
• Context
• difference between Controlled and uncontrolled form

Congrats Now you know the React JS and their functionality .
Its time to strong your Concepts and learn about hooks in react.

3. Hooks
Moving forward hooks is the one of the most important concepts of react. Lets take a look at it.

• What is hooks?
• Some important hooks like useState, useEffect and useMemo.
• Some important rules of hooks.
• how to make a custom hook.

4. React Router

• What is Routing?
• How Routing is Done in React?
• Difference between Link and Navlink.
• UseNavigate, UseParams , UseSearchParams hooks.
• Nested Routing.
• Parameterise Routing.
• Conditional Routing.

5. Store Management (Redux)

• Why centralized State (store) is required?
• Basic informations about redux and redux toolkit
• What is Reducer in Redux?
• what are Actions and Action Type?
• How to get the store through useSelector hook?
• How to dispatch an action?
• Any middleware for redux and why middleware is required (Thunk or Saga)?

6. Api calls in React (Axios)

• What is Api and how we can fire a request through fetch?
• How Axios is better than fetch?
• How can we fire Get,Post,Put and Delete request through Axios?
• What is Axios Interceptor and Why it is required?

Task
Follow each step and move to next step after developing and verifying First one.

- Step 1

• create a react app using create react app CLI command
• Make 3 screens (login page , Dashboard , Users)
• Login Page should not have any navbar
• Rest all pages will have same navbar and user information will be their at on any corner of navbar
• You can choose your style of UI and be creative with it.
• Add Routing to your App.

- Step 2

• Make a Json Web server for fake Data to use as Api.
• Fill up Json server with some demo data of users. { user_name:"Ayush Shrivastav", user_email:"[e-mail]" password:"789365ayush" Role:"admin"/"user" Designation:"CEO" }
• Now use these data for the user login with the help of api call.