Scribd
Upload
473 views9 pages

React JS Roadmap

This document outlines a 31-day challenge to learn React by building projects. It is divided into 4 weeks covering React fundamentals, advanced concepts, state management and APIs, and practical applications. Each week focuses on specific topics and includes practice questions and project ideas. The final days are dedicated to a capstone project to incorporate everything learned over the previous 28 days. Upon completing the challenge, participants will have a solid understanding of React and experience to showcase in their portfolio.

Uploaded by

ichibi22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
473 views9 pages

React JS Roadmap

This document outlines a 31-day challenge to learn React by building projects. It is divided into 4 weeks covering React fundamentals, advanced concepts, state management and APIs, and practical applications. Each week focuses on specific topics and includes practice questions and project ideas. The final days are dedicated to a capstone project to incorporate everything learned over the previous 28 days. Upon completing the challenge, participants will have a solid understanding of React and experience to showcase in their portfolio.

Uploaded by

ichibi22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Master

React
in 31 Days

#Dec’23 Challenge
*Disclaimer*
Everyone learns uniquely.

What matters is developing the


problem solving ability to solve new
problems.

This Doc will help you with the same.

1
Week 1

Fundamentals and Components

Day 1-7 React Basics

Topics:
JSX, Components, Props, State, Lifecycle Methods, Handling Events

Practice Questions
bt Explain the difference between a class component and a functional
componentZ
_t How does React's state differ from propsV
Ut Describe the lifecycle of a React component.

Project Ideas
bt To-Do App: Create a simple to-do application to practice state
managementZ
_t Weather Widget: Fetch weather data from an API and display it.

2
Week 2
Advanced Concepts
Day 8-14 Diving Deeper
Topics:
Hooks, Context API, Higher Order Components, Routing with React
Router

Practice Questions
\s What are React Hooks, and how do they work[
ds Describe the purpose and use of the Context API.

Project Ideas
\s Blog Platform: Implement a simple blog with React Router for
navigationš
ds Shopping Cart: Utilize Context API for managing a shopping cart.

3
Week 3

State Management and APIs

Day 15-21 State Management & APIs

Topics:

Redux, Axios for API Calls, Thunk/Saga Middleware

Practice Questions

^r Explain the flow of data in a Redux application[

qr How do you handle asynchronous actions in Redux?

Project Ideas

^r E-commerce Site: Build a small e-commerce platform with Redux[

qr Stock Tracker: Create an app to track stock prices using external

APIs.

4
Week 4
Real-world Applications
Day 22-28 Practical Applications
Topics:
Performance Optimization, Testing with Jest & React Testing Library

Practice Questions
ku How do you optimize a React application for performancer
_u Describe how to test a React component.

Project Ideas
ku Social Media Dashboard: Incorporate advanced features and
optimize performance
_u Appointment Scheduler: Implement a full-fledged scheduling
application.

5
Final Stretch
Capstone Project
Day 29-31 Capstone Project
Project
Develop a comprehensive project that incorporates everything learned
in the past 28 days. Suggestions include a Personal Portfolio, a Small
Business Website, or a Custom Content Management System.

Resources to learn from:


Introduction to React Js + Installation | Complete React Course in
Hindi #1

Full React Course 2020 - Learn Fundamentals, Hooks, Context API,


React Router, Custom Hooks

https://react.dev/learn

6
Celebrate your progress
and share your projects with the
community. By the end of this challenge,
you will have a solid understanding of
React JS, practical experience, and a
portfolio to show for it.

Happy Coding

7
Why

Bosscoder?
1000+ Alumni placed at Top
Product-based companies.

More than 136% hike for every 



2 out of 3 working professional.

Average package of 24LPA.

Explore More

You might also like