Master
React
in 20 days
1 Day
Introduction to React
Topic
What is React.js?
Resources
8 https://react.dev/lear5
8 https://www.simplilearn.com/tutorials/reactjs-
tutorial/what-is-reactjs
1
Questions
/ Explain the key features of React-
&/ What problem does React solve in web
development
/ Is React a JavaScript library or a
framework
/ How does React make it easier to build user
interfaces?
2
2 Day
Setting Up React
Topic
Setting up a React.js
development environment.
Resources
M https://reactnative.dev/docs/environment-setuT
M https://www.freecodecamp.org/news/react-
beginner-handbookO
M React Course - Beginner's Tutorial for React
JavaScript Library [2022]
3
Questions
5 List the steps to set up a basic React
development environment1
&5 What are the key files and folders generated
when you create a new React application
5 How do you start the development server
and view your React application in a web
browser
5 Are there any specific code editors or
Integrated Development Environments
(IDEs) commonly used for React
development
25 What is Babel, and why is it used in React
development?
4
3 Day
React JSX
Topic
Understanding JSX
(JavaScript XML) in React.
Resources
G https://react.dev/learn/writing-markup-with-js8
G https://react.dev/learn/javascript-in-jsx-with-curly-
brace<
G https://www.w3schools.com/react/react_jsx.asp
5
Questions
4 Write JSX code to render a simple <div>
element#
8 What is the key difference between JSX and
HTML when it comes to element attributes
Write JSX code to render a <h1> element
with the text "Hello, React!"#
Explain how you can apply CSS classes to
JSX elements#
Add conditional rendering to a JSX
component, so it displays one message if a
variable is true and another message if it's
false.
6
4-5 Day
React Components
Topic
Introduction to React
components.
Resources
T https://www.w3schools.com/react/
react_components.asN
T https://www.geeksforgeeks.org/reactjs-componentsI
T https://react.dev/learn/your-first-componenR
T https://react.dev/learn/passing-props-to-a-
component
7
Questions
What is a React component, and why is it
important
% Differentiate between functional and class
components in React
Create a functional React component called
Greeting that renders a <h1> element with a
greeting message of your choice
Develop a class-based React component
called Counter that displays a number and
has two buttons, one for incrementing the
number and one for decrementing it
4 Implement a functional component called
"Person" that receives a "name" prop and
displays "Hello, [name]."
8
5-6 Day
State and Props in React
Topic
Learning about state and props in
React.
Resources
V https://www.geeksforgeeks.org/reactjs-state-vs-
propsI
V https://legacy.reactjs.org/docs/faq-state.htmL
V https://www.freecodecamp.org/news/react-js-for-
beginners-props-state-explainedI
V https://react.dev/learn/state-a-components-
memory
9
Questions
4 Explain the difference between state and
props in React2
'4 How can you pass data from a parent
component to a child component in React?
Is it done through props or state
4 Describe a scenario in which you would use
state to manage data within a React
component. Provide an example use case2
4 What is the scope of state and props in a
React component? Are they accessible
throughout the component or limited to
certain parts
4 What happens when you modify the state of
a React component? How does React
handle re-rendering?
10
7 Day
Lists and Keys in React
Topic
Understanding lists and keys in
React.
Resources
> https://react.dev/learn/rendering-listE
> https://www.w3schools.com/react/react_lists.asH
> https://www.geeksforgeeks.org/reactjs-lists/
11
Questions
4 Construct a component called "ToDoList"
that takes an array of tasks as a prop and
renders an unordered list of tasks. Ensure
each list item has a unique key
+ Explain the importance of keys when
rendering lists in React
Create a React component called
ShoppingList that receives an array of
shopping items as a prop and renders an
ordered list (<ol>) with each item as a list item
(<li>)
Build a functional React component named
CommentList that accepts an array of
comment objects (each with a unique ID) as a
prop and displays a list of comments,
including the user's name and comment text.
12
8 Day
Events and Life Cycle Events
in React
Topic
Events and Life Cycle Events,
Responding to events in React
Resources
H https://react.dev/learn/responding-to-eventP
H https://www.w3schools.com/react/
react_events.asR
H https://www.javatpoint.com/react-eventP
H https://react.dev/learn/synchronizing-with-effects
13
Questions
12 What are React events, and how are they similar
or different from standard HTML events
*2 Describe the concept of the React event
handling system and its advantages in building
interactive web applications
2 Explain the React component lifecycle. What
are the major phases, and what happens during
each phase
2 Create a React component that renders a
button. Implement an event handler that logs a
message to the console when the button is
clicked
.2 Develop a React component that renders a list
of items. Implement an event handler that
allows users to remove items from the list when
a "Delete" button is clicked.
14
9-10 Day
Form Handling in React
Topic
Form Handling and Validation in
React
Resources
V https://www.w3schools.com/react/react_forms.asP
V https://legacy.reactjs.org/docs/forms.htmA
V https://www.freecodecamp.org/news/how-to-
validate-forms-in-react/
15
Questions
() Create a form with a checkbox input for
"subscribe to newsletter." Implement a
controlled component for the checkbox and
display a confirmation message when the
checkbox is checked
) Implement form validation for a phone
number input field. Ensure that the phone
number entered is in a valid format (e.g.,
xxx-xxx-xxxx) and display an error message
if it's not
) Implement real-time validation for an email
input field. Display a green checkmark icon
next to the input when the entered email is
valid and a red X icon when it's invalid.
16
11 Day
Context API in React
Topic
Context API, Server Side
Rendering
Resources
G https://react.dev/learn/passing-data-deeply-with-
contexV
G https://react.dev/reference/react/useContexV
G https://www.freecodecamp.org/news/server-side-
rendering-your-react-app-in-three-simple-
steps-7a82b95db82e/
17
Questions
2 Create a simple React application that uses
the Context API to manage the theme of the
application (e.g., light and dark mode). Allow
users to toggle between the two themes using
a button. Use the useContext hook to access
and apply the theme context
8 Explain the role of the useContext hook in
React. How does it enable components to
access values from the context
What is the purpose of the Context API in
React, and in what situations would you use it?
Provide an example scenario where using
context makes sense
What are the key steps involved in
implementing Server-Side Rendering (SSR) in a
React application? Briefly outline the process.
18
12 Day
Custom Hooks in React
Topic
Custom Hooks
Resources
2 https://react.dev/learn/reusing-logic-with-custom-
hook+
2 https://www.w3schools.com/react/
react_customhooks.as:
2 https://www.freecodecamp.org/news/how-to-create-
react-hooks/
19
Questions
$ What is a custom hook in React, and why
would you use one in your application
* Explain the difference between custom hooks
and built-in hooks in React. When would you
choose to create a custom hook instead of
using a built-in one
Can custom hooks have dependencies on
other hooks or external libraries? How can you
manage these dependencies effectively when
creating custom hooks
Build a custom hook called useKeyPress that
listens for a specific key press (e.g., the "Enter"
key) and returns a boolean indicating whether
that key is currently pressed. Use this hook in a
component to trigger an action when the user
presses the specified key.
20
13-14 Day
Styling in React
Topic
CSS in React, SASS in React,
Styled Components
Resources
S https://www.w3schools.com/react/react_css.asM
S https://create-react-app.dev/docs/adding-a-stylesheeO
S https://create-react-app.dev/docs/adding-a-sass-
stylesheeO
S https://www.freecodecamp.org/news/style-react-apps-
with-css/
21
Questions
67 Explain the concept of CSS Modules in React.
How do they help prevent class name conflicts
and improve encapsulation of styles
)7 Provide an example of how to create and use a
Styled Component in a React application.
Describe the benefits of using Styled
Components for styling
7 Build a React component that uses Styled
Components to style a custom button. Create
variations of the button (e.g., primary,
secondary) using props and conditional styling
7 Implement a dark mode toggle in a React
application using Styled Components. Create a
styled component for a toggle switch, and use it
to switch between light and dark themes.
22
15 Day
React Router
Topic
React Router
Resources
) https://reactrouter.com/en/main/start/tutoria1
) https://www.geeksforgeeks.org/reactjs-router,
) https://www.w3schools.com/react/react_router.asp
23
Questions
&' How can you implement a "404 Not Found"
page in a React Router application to handle
routes that do not match any defined
routes
' What is the purpose of the history object in
React Router, and how can you
programmatically navigate between routes
using it
' Explain the concept of nested routes in
React Router. When and why might you use
them in your application?
24
16 Day
Deploying a React
Application
Topic
Deploying a React Application
Resources
0 https://create-react-app.dev/docs/deploymen@
0 https://create-react-app.dev/docs/proxying-api-
requests-in-developmen@
0 https://www.netlify.com/with/react/
25
Questions
03 Walk through the steps to create a
production build of a React application
using Create React App (CRA). Discuss how
this build differs from a development build
.3 Choose a hosting platform (e.g., Netlify,
Vercel, or GitHub Pages) and deploy a
simple React application to it. Describe the
steps you took and any configuration
required.
26
Day 17- 18
Work on a project!
Now that you have a solid understanding of React
concepts and have explored various app ideas, it's time to
put your knowledge into action by working on your React
project.
Ideas of Apps you can work on
. To-Do List/Notes Ap=
. Weather Ap=
-. Recipe FindeC
O. Expense Tracker
27
17 Day
Project Setup and Planning
8> Set up your project environment. If you're using Create
React App or a similar tool, initialize your project:
> Plan your project's structure and components. Sketch
out a rough design or wireframe for your app:
> Create a GitHub repository to version control your
project.
28
18 Day
Building Components and
State Management
$9 Build the foundational components of your app based
on your project plan"
09 Implement component logic, including state
management using React's state and props as
appropriate"
9 Set up any forms or user input components required for
your app.
29
19 Day
Implement Features and
Functionality
8 Implement the core features and functionality of your
app. This may involve fetching data from APIs, handling
user interactions, and managing application state.
8 Test your app's features as you go, fixing any bugs or
issues that arise.
30
20 Day
Styling, Testing, and
Deployment
< Apply CSS or styling frameworks to make your app
visually appealing and user-friendly
< Conduct thorough testing and debugging to ensure
your app is robust and functional
< Once you're confident in your project's functionality
and design, deploy it to a hosting platform of your
choice. Document the deployment process for future
reference.
31
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
