29 October 2020

#ReactJS

#ReactJS

Key Concepts


S.No Topic Sub-Topics
1Introduction to ReactWhat is React, SPA Architecture, Virtual DOM, React Features, Prerequisites
2Environment SetupNode & npm, Create React App, Folder Structure, Dev Server, Basic App
3JSX BasicsJSX Syntax, Embedding Expressions, Babel, JSX Rules, Differences from HTML
4ComponentsFunctional Components, Class Components, Props Basics, Component Reuse, Composition
5Props & StateProps Usage, Passing Data, useState Hook, State Definition, State vs Props
6Event HandlingEvent Basics, Synthetic Events, Event Binding, Passing Params, Event Objects
7Conditional RenderingIf/Else, Ternary, Logical &&, Conditional Component, Fragments
8Lists & KeysDynamic Lists, Array.map(), Key Importance, Nested Lists, List Styling
9FormsControlled Components, Uncontrolled Components, Submit Handler, Text Inputs, Form Validation
10useEffect HookEffects Intro, Dependency Array, Cleanup, API Calls, Multiple Effects
11React RouterRouter Setup, Routes, Link & NavLink, URL Params, Navigate
12Context APICreateContext, Provider, useContext, Avoid Props Drilling, State Sharing
13Custom HooksWhy Custom Hooks, Rules, Business Logic Hook, Reusable Hook, useFetch
14Performance OptimizationReact.memo, useMemo, useCallback, Batching, Re-render Control
15State ManagementLifting State, Global Store, Redux Intro, Reducer, Actions Flow
16Redux ToolkitRTK Install, createSlice, Store Setup, Provider, Dispatch & Selector
17Async OperationsAxios, Fetch API, Async/Await, Error Handling, Loading States
18Error BoundariesFallback UI, Logging, Try/Catch, Boundary Component, Debugging
19Optimization IIProfiler, Pure Components, Code Splitting, Lazy Loading, Tree Shaking
20TestingJest Basics, RTL Intro, Mocking API, Unit Tests, Snapshot Testing
21Advanced PatternsHOC Pattern, Render Props, Compound Components, Provider Pattern, Hooks Composition
22React with TypeScriptTS Setup, Props Typing, State Typing, Custom Types, Interfaces
23StylingCSS Modules, Styled Components, Tailwind CSS, Material UI, Chakra UI
24AuthenticationLogin Flow, JWT Token, Protected Routes, Session Storage, Role-Based UI
25DeploymentBuild App, Netlify, Vercel, GitHub Pages, Environment Config
26Next.js BasicsSSR, SSG, Routing, Layouts, API Routes
27ArchitectureFolder Structure, Atomic Design, Feature Based Structure, Clean Code, Service Layer
28Best PracticesDRY Principle, KISS, Performance Tips, Error Handling, Security
29Project DevelopmentUI Planning, Component Design, Data Flow, State Logic, Router + Redux
30Final ReviewCode Cleanup, Documentation, Testing Coverage, Refactor, Deployment

Interview question

Basic Level

  1. What is ReactJS?
  2. What is the difference between React and Angular?
  3. What is JSX in React?
  4. Why do we use JSX instead of JavaScript?
  5. What is a component in React?
  6. What is the difference between functional and class components?
  7. What are props in React?
  8. What is state in React?
  9. Difference between state and props?
  10. What is Virtual DOM in React?
  11. Explain the concept of one-way data binding.
  12. What is create-react-app?
  13. What is the purpose of render() method?
  14. What are lifecycle methods in React?
  15. What is a controlled component?
  16. What is an uncontrolled component?
  17. How do you handle events in React?
  18. What are fragments in React?
  19. What is the purpose of key in React lists?
  20. What is conditional rendering?
  21. How do you update the state in React?
  22. What is React Router?
  23. What is context API?
  24. What are hooks in React?
  25. What is useState hook?

Intermediate Level

  1. What is useEffect hook used for?
  2. Difference between useEffect and lifecycle methods?
  3. What causes a re-render in React?
  4. What is prop drilling?
  5. How to avoid prop drilling?
  6. What is useContext hook?
  7. What are custom hooks?
  8. What is memoization?
  9. What is React.memo?
  10. What is useMemo hook?
  11. What is useCallback hook?
  12. Difference between useMemo and useCallback?
  13. How do you fetch data in React?
  14. What is axios?
  15. What is lazy loading?
  16. What is error boundary?
  17. What is suspense in React?
  18. Explain code splitting in React.
  19. What is ReactDOM?
  20. Difference between JSX and HTML?
  21. What are controlled inputs?
  22. How do you share data between siblings?
  23. What is Context Provider and Consumer?
  24. What is Redux?
  25. How do you implement routing?

Advanced Level

  1. What is Redux architecture?
  2. What are actions in Redux?
  3. What are reducers in Redux?
  4. What is a Redux store?
  5. What are middleware in Redux?
  6. What is Redux Thunk?
  7. Difference between Redux Thunk and Saga?
  8. What is createSlice in Redux Toolkit?
  9. What is immutability in React?
  10. How do you optimize performance in React?
  11. What is reconciliation algorithm?
  12. What is hydration?
  13. What is Render Props pattern?
  14. What are Higher Order Components (HOC)?
  15. What are compound components?
  16. Context vs Redux?
  17. What is SSR in React?
  18. What is SSG?
  19. What are API routes in Next.js?
  20. What is hydration mismatch?
  21. What is StrictMode in React?
  22. What is priority rendering?
  23. Explain batching in React.
  24. What are portals in React?
  25. What is tree-shaking?

Expert Level

  1. How does React?s Fiber architecture work?
  2. Explain the reconciliation algorithm in depth.
  3. Difference between useLayoutEffect and useEffect?
  4. What is concurrent mode in React?
  5. Explain React render phases (render/commit).
  6. How do you build reusable component libraries?
  7. Explain micro-frontends with React.
  8. What is React Profiler?
  9. How do you debug performance issues?
  10. SSR vs CSR?
  11. Explain static site generation use-cases.
  12. How does React work internally with DOM?
  13. Rules of React Hooks?
  14. How to create custom middleware in Redux?
  15. Explain observer pattern in React.
  16. Difference between context selector and global state?
  17. Explain atomic design architecture.
  18. How to optimize React app for SEO?
  19. How do you avoid unnecessary re-renders?
  20. How does Suspense work internally?
  21. Explain state normalization.
  22. Explain Flux architecture in detail.
  23. How do you handle error logging in production?
  24. How do you structure large enterprise React apps?
  25. Explain distributed state management in complex applications.

Related Topics