prince-gh / react.js-roadmap

📚 React.js Syllabus

Topic	Description	Link
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