Day Topic
2-Jan Introduction to React
4-Mar Components and JSX
7-May Props and State
9-Aug Hooks
11-Oct Forms and User Input
14-Dec Lists and Keys
15-16 Managing State
17-19 React Redux
20-21 Advanced Hooks
22-24 API Integration
25-26 Material UI Framework
27-28 Routing with React Router
29-30 DOM and Virtual DOM
Links
Official React Documentation:
[Link](https://reactjs.org/docs/getting-started.html)
React JSX Introduction:
[Link](https://reactjs.org/docs/introducing-jsx.html)
React Props and State:
[Link](https://reactjs.org/docs/components-and-
props.html)
React Hooks: [Link](https://reactjs.org/docs/hooks-
intro.html)
React Forms: [Link](https://reactjs.org/docs/forms.html)
Lists and Keys in React:
[Link](https://reactjs.org/docs/lists-and-keys.html)
React Component Lifecycle:
[Link](https://reactjs.org/docs/state-and-lifecycle.html)
Official Redux Documentation:
[Link](https://redux.js.org/introduction/getting-started)
Advanced React Hooks:
[Link](https://reactjs.org/docs/hooks-reference.html)
Fetching Data with React:
[Link](https://reactjs.org/docs/faq-ajax.html)
Material-UI Documentation: [Link](https://material-
ui.com/getting-started/installation/)
React Router Documentation:
[Link](https://reactrouter.com/web/guides/quick-start)
Understanding Virtual DOM:
[Link](https://reactjs.org/docs/faq-internals.html)
Programs
1. Create a "Hello World" React app that displays a greeting message.
2. Build a simple "About Us" page using React components.
1. Build a header component and a footer component, and render them
in an app.<br>2. Create a navigation menu using JSX.
React Props and State: [Link](https://reactjs.org/docs/components-and-
props.html)
1. Implement a counter using the useState hook and display the
count.<br>2. Use the useEffect hook to fetch and display data from a
public API.
1. Create a registration form with at least five fields, including text
inputs, checkboxes, radio buttons, and a number input.<br>2.
Implement form validation to ensure all fields are filled correctly.
1. Build a dynamic list of products using the map() function.2. Create a
"To-Do List" app with the ability to add and remove tasks.
1. Build a toggle button that changes its state based on user
interaction.<br>2. Create a login page with conditional rendering for
login and logout.
1. Set up Redux in an app to manage a shopping cart with actions and
reducers.<br>2. Connect components to the Redux store to display cart
items and handle actions like adding and removing items.
1. Use useRef to create a button that counts the number of times it's
clicked.<br>2. Implement a state management system using
useReducer for a real-time chat application.
1. Fetch data from a public API (e.g., a weather API) and display the
current weather conditions.<br>2. Create a user registration form that
sends data to a server using POST requests.
1. Build a responsive contact form using Material-UI components with
input fields, text areas, and buttons.<br>2. Create a styled dashboard
page using Material-UI cards and lists.
1. Create a simple DOM manipulation example by changing the style
and content of an element based on user interaction.<br>2. Optimize
rendering in a larger app by implementing shouldComponentUpdate()
or React.memo() to prevent unnecessary re-renders.
