| Basic |
|
|
| Introduction to React.js |
Introduction to React.js, Virtual DOM, React philosophy |
Link |
| Setting Up React Environment |
Installing Node.js and npm, Create React App |
Link |
| JSX (JavaScript XML) |
Syntax extension for JavaScript, JSX elements, JSX expressions |
Link |
| Components |
Functional Components, Class Components, Props, State, Lifecycle methods |
Link |
| Handling Events |
Event handling in React, Synthetic events, Event object |
Link |
| Conditional Rendering |
Rendering UI conditionally, Conditional operator, && operator, Ternary operator |
Link |
| Lists and Keys |
Rendering lists of data, Keys for dynamic lists, Lists with map() |
Link |
| Forms |
Handling forms in React, Controlled components, Uncontrolled components, Form validation |
Link |
| Styling Components |
Inline styles, CSS Modules, Styled Components |
Link |
| Intermediate |
|
|
| Lifecycle Methods |
Component lifecycle methods: Mounting, Updating, Unmounting, useEffect() Hook, Cleanup functions |
Link |
| React Hooks |
useState, useEffect, useContext, useRef, useMemo, useCallback, useReducer, Custom Hooks |
Link |
| Context API |
Sharing state between components, useContext Hook, createContext, Provider pattern |
Link |
| Routing with React Router |
Client-side routing in React applications, BrowserRouter, Route, Switch, useParams, useHistory, Route guards |
Link |
| Higher-Order Components |
Reusing component logic, Higher-order component pattern, Render props pattern, Composition vs Inheritance |
Link |
| Error Boundaries |
Handling errors in React applications, ErrorBoundary component, componentDidCatch lifecycle method |
Link |
| Performance Optimization |
Optimizing React applications for performance, Memoization, useMemo Hook, PureComponent, React.memo(), Virtualized lists |
Link |
| Forms with Formik |
Form management library for React, Formik components, Form validation with Yup, Formik context |
Link |
| State Management with Redux |
Global state management in React applications, Redux concepts, Actions, Reducers, Store, connect() function, useSelector and useDispatch Hooks |
Link |
| Advanced |
|
|
| Server-Side Rendering (SSR) |
Rendering React components on the server, Next.js for SSR, Server-side rendering with Express.js |
Link |
| Testing React Applications |
Unit testing with Jest and React Testing Library, Snapshot testing, Mocking modules and components, End-to-end testing with Cypress |
Link |
| Serverless Functions with React |
Integrating React with serverless functions, AWS Lambda, Netlify Functions, Serverless framework |
Link |
| Progressive Web Apps (PWA) |
Building progressive web applications with React, Service workers, Web App Manifest, Offline support |
Link |
| GraphQL with Apollo Client |
Integrating GraphQL with React using Apollo Client, Queries, Mutations, Subscriptions, ApolloProvider |
Link |
| Internationalization (i18n) |
Adding multilingual support to React applications, i18next library, Internationalization best practices |
Link |
| Real-Time Data with WebSockets |
Integrating WebSockets for real-time data updates, WebSocket protocol, Socket.io library |
Link |
| Micro Frontends |
Building modular, independently deployable frontend applications, Micro Frontends architecture, Module Federation plugin for Webpack |
Link |
| React Native |
Building mobile applications with React Native, Components, Navigation, State management, Native modules |
Link |