Prerequisites
Before you start learning React, you should have some basic understanding of the following.
What is React?
React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
Create a React Project with Vite
In this article, we will learn how to start a React project. We will learn how to install Node.js and a package manager like npm or yarn. We will also learn how to create a new React project using a tool like Vite.
Fundamentals
This page will give you an introduction to 80% of React. If you understand the concepts on this page, you will be able to understand the rest of the React documentation.
Functional Component
Functional components are the simplest type of component. They are functions that return some HTML. In this article, we will learn about functional components and props in React.
Forms and Tables
The form is used to get input from the user. A table is used to display data in a tabular format. In this blog, we will learn how to create a form and a table in React. I will use API to get the data from the server and display it in the table. The form will be used to send the data to the server.
Form with MUI and Table with AntD
There are many libraries that reduce the amount of time and code we need to write. In this I am using two very useful libraries Material UI and Ant Design. Material UI for creating form and Ant Design for creating table.
Routing
Routes in React are used to navigate between different pages in the application. In this blog, we will learn how to do routing in React.
Data Fetching Patterns
Learn the right way to fetch data in React — from basic useEffect patterns to React Query for production-grade server state management.
localStorage for Session Management
localStorage is a way to store data in the browser's localStorage. Data is stored against the domain, so it can be accessed from different pages of the same domain. This is useful for storing data that is not sensitive, such as user login details, or session data. One can see the data in the browser's localStorage by opening the developer tools. Data is stored against a key and can be retrieved using the key.
Custom Hooks
Learn how to build your own reusable hooks in React to extract and share stateful logic across components.
useReducer
Manage complex component state with useReducer — the hook that brings Redux-style state management into individual components.
Context API
Share state across your component tree without prop drilling using React's built-in Context API.
Redux
Redux is a library that helps you manage your state predictably. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time-traveling debugger.
Error Boundaries
Catch JavaScript errors in React component trees and display fallback UI instead of crashing the entire app.
Performance Optimization
Learn useMemo, useCallback, React.memo, and lazy loading to keep your React app fast as it grows.