- Getting Started with React
- React Basics
- Intermediate React
- Advanced React
- Optimizing React Applications
- State Management in Large Applications
- React Ecosystem
- Building Real-World Applications
- Advanced Patterns and Best Practices
- Continuous Learning
- What is React?
- Why use React over other frameworks?
- Overview of React ecosystem
- Installing Node.js and npm
- Setting up a code editor (VS Code)
- Creating a React app with create-react-app
- ES6+ features: let, const, arrow functions
- Destructuring, template literals, modules
- Spread/rest operators, default parameters
- Promises, async/await
- What is JSX?
- Embedding expressions in JSX
- JSX limitations and rules
- Functional vs. Class components
- Component structure and naming conventions
- Props: passing data to components
- Introduction to state in React
- useState hook for functional components
- State immutability
- Handling events in React
- Synthetic events
- Passing arguments to event handlers
- if-else and ternary operators in JSX
- Logical AND (&&) operator for short-circuit evaluation
- Rendering lists with map()
- Importance of keys and how to use them
- Controlled vs. uncontrolled components
- Handling form submissions
- Validation basics
- Class component lifecycle methods (e.g., componentDidMount, componentDidUpdate)
- Introduction to the useEffect hook
- Inline styles
- CSS modules
- Styled-components
- Tailwind CSS with React
- useEffect for side effects
- useContext for managing context
- useReducer for complex state management
- Custom hooks: when and how to create them
- React Router: installing and setting up
- Dynamic routes and URL parameters
- Navigation with Link and useNavigate
- Nested routes and layouts
- Global state with Context
- Replacing Redux with Context API
- Best practices for using Context
- Handling errors in React components
- Implementing an error boundary
- React memoization (React.memo, useMemo, useCallback)
- Code-splitting with React.lazy and Suspense
- Avoiding unnecessary re-renders
- Unit testing with Jest
- Component testing with React Testing Library
- End-to-end testing with Cypress
- Using React Developer Tools
- Common debugging strategies
- Setting up Redux
- Actions, reducers, and the store
- Connecting React with Redux (react-redux)
- Redux Toolkit: simplifying Redux setup
- Recoil
- Zustand
- MobX
- Introduction to Next.js
- Static site generation (SSG) vs. SSR
- Making a React app a PWA
- Adding service workers
- Apollo Client setup
- Querying and mutating data
- Setting up TypeScript with React
- Typing props and state
- Todo App
- E-commerce site with cart functionality
- Blog platform with a CMS backend
- Social media feed
- REST APIs: fetching and posting data
- GraphQL APIs
- Authentication with Firebase/Auth0
- Hosting on Vercel or Netlify
- Deploying React apps to AWS/Heroku
- Optimizing for production with build
- Higher-order components (HOCs)
- Render props
- Compound components
- Code splitting and lazy loading
- Component composition over inheritance
- Effective use of PropTypes or TypeScript
- Follow blogs, newsletters, and podcasts
- Contribute to React open-source projects
- React Fiber and concurrent rendering
- Server components
- Modern alternatives: Remix, Astro