Scribd
Upload
8 views

React Sheat

The document outlines a React training schedule covering various topics such as components, state management, hooks, and API integration from January to December. It includes links to official documentation for each topic and suggests practical programs to reinforce learning. The training culminates in advanced concepts like Redux and Material UI, along with hands-on projects to apply the knowledge gained.

Uploaded by

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

React Sheat

The document outlines a React training schedule covering various topics such as components, state management, hooks, and API integration from January to December. It includes links to official documentation for each topic and suggests practical programs to reinforce learning. The training culminates in advanced concepts like Redux and Material UI, along with hands-on projects to apply the knowledge gained.

Uploaded by

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

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.

You might also like