1.
Basic Concepts
• Overview of [Link]
• Virtual DOM and reconciliation
• Setting up [Link] development environment (using tools like Create
React App)
• What is nodeJS & NPM
• What is `Parcel/Webpack`? Why do we need it?
• What is `.parcel-cache`
• What is `npx` ?
• What is difference between `dependencies` vs `devDependencies`
• What is Tree Shaking?
• What is Hot Module Replacement?
• Difference between `[Link]` and `[Link]`
• Why should I not modify `[Link]`?
• What is the `dist` folder?
• What is `browserlists`
• Read about dif bundlers: vite, webpack, parcel
• Read about: ^ - caret and ~ - tilda
• References -
o Official React Documentation: [Link]
o Create React App: [Link]
o Creating your own create-react-app:
[Link]
f3c693b84658
o Parcel Documentation: [Link]
o Parcel on Production: [Link]
o BrowsersList: [Link]
2. JSX (JavaScript XML)
• Understanding JSX in [Link] (v16+)
• JSX expressions and embedding JavaScript
• Differences between JSX and HTML
• Behind the Scenes of JSX
• Babel & parcel role in JSX
• Is JSX mandatory for React?
• Is ES6 mandatory for React?
• What is Reconciliation in React?
• What is React Fiber?
• Why do we need keys in React? When do we need keys in React?
• Can we use index as keys in React?
• What is a Config Driven UI ?
• Fragments in JSX
• Reference Websites -
o Official React Documentation on JSX : [Link]
markup-with-jsx
o [Link]
o MDN Web Docs on JSX: [Link]
US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
o Babel: [Link]
o Attribute Type: [Link]
US/docs/Web/HTML/Element/script#attr-type
o JS Modules: [Link]
US/docs/Web/JavaScript/Guide/Modules
o Babel Playground: [Link]
o React without JSX: [Link]
o Virtual DOM: [Link]
o Reconciliation: [Link]
o React Fiber Architecture: [Link]
o React Without ES6: [Link]
o Index Keys as Anti-Pattern: [Link]
is-
an-anti-pattern/
3. Components
• Class components vs. functional components in [Link] (v16+)
• Creating and using components
• Lifecycle methods (in class components)
• What is the order of life cycle method calls in Class Based Components
• Why do we use componentDidMount?
• Why do we use componentWillUnmount? Show with example
• Why do we use super(props) in constructor?
• Hooks (in functional components) - useState, useEffect, etc.
• Reusability and component composition
• What is the difference between Named Export, Default export and * as
export?
• What is the importance of [Link] file
• Reference Websites -
o React Official Documentation on Components:
[Link]
o Tutorialspoint -
[Link]
o React Life Cycle Method Diagram - [Link]
lifecycle-methods-diagram/
4. Props and State
• Props and PropTypes in [Link]
• State management with useState and setState
• Context API for managing global state
• Immutability and pure components
• What is the difference between Monolith and Microservice?
• Reference Websites:
o React Documentation on State and Lifecycle: [Link]
a-
components-memory
o [Link]
o React Props vs. State: [Link]
5. Handling Events
• Event handling in [Link]
• Binding event handlers
• Handling events with hooks (useCallback, useMemo)
• SyntheticEvent vs. NativeEvent
• Event delegation in [Link]
• Why do we make API calls inside useEffect Hook?
• How will useEffect behave if we don't add a dependency array ?
• What is Optional Chaining?
• What is Skeleton UI / Shimmer UI?
• What is the difference between JS expression and JS statement
• What is CORS?
• What is async and await?
• What is the use of `const json = await [Link]();` in Fetch method
• Reference Websites -
o React Official Documentation on Handling Events:
[Link]
o React Event Handling: [Link]
6. Conditional Rendering
• Conditional rendering techniques in [Link]
• Using ternary operators and logical && operator
• Element variables and fragments for conditional rendering
• Conditional rendering with hooks (useEffect, useState)
• Reference Websites -
o Conditional Rendering in React: [Link]
rendering
o React Conditional Rendering: [Link]
rendering/
7. Optimizing Techniques
• When and why do we need lazy()?
• What is suspense?
• Advantages and disadvantages of using this code splitting pattern?
• When do we and why do we need suspense?
• References -
o [Link]
o [Link]
8. Lists and Keys
• Rendering lists in [Link]
• Using map() to iterate over lists
• Keys and their importance in React
• Fragment as a key container
• Reference Websites -
o Lists and Keys in React: [Link]
o React Lists and Keys: [Link]
9. Forms and Controlled Components
• Handling forms in [Link]
• Controlled vs. Uncontrolled components
• Formik library for form handling
• Form validation and error handling with Yup
• Reference Websites -
• Forms in React: [Link]
• React Controlled Components: [Link]
controlled-
components
10. React Router
• React Router v5+ for routing in [Link] applications
• Setting up routes and nested routes
• Navigation with Link and NavLink components
• Route parameters and query strings
• What is SPA?
• What is difference between Client Side Routing and Server Side Routing?
• How do you create Nested Routes react-router-dom cofiguration
• Read abt createHashRouter, createMemoryRouter from React Router docs.
• Reference Websites -
o React Router Documentation: [Link]
o Tutorialspoint:
[Link]
o Client Side Routing - [Link]
o Formik - [Link]
11. State Management (Redux or Context API)
• What is prop drilling?
• What is lifting the state up?
• What is Context Provider and Context Consumer?
• If you don’t pass a value to the provider, does it take the default value?
• State management in [Link] with Redux
• Redux Toolkit for simplifying Redux setup
• Context API for state management and useContext hook
• Comparison between Redux and Context API
• useContext vs Redux
• Advantage of using Redux Toolkit over Redux
• Explain Dispatcher
• Explain Reducer
• Explain slice
• Explain selector
• Explain createSlice and the configuration it takes.
• Reference Websites -
o Redux Official Documentation: [Link]
o React Context API: [Link]
o Lifting the state up - [Link]
components
o UseContext - [Link]
12. Testing:
• How do you perform unit testing in [Link] applications?
• Explain the concepts of Jest and Enzyme in [Link] testing.
• What are the different types of tests you can perform in [Link]
applications?
• Discuss strategies for testing [Link] components that use hooks.
• How do you simulate user interactions in [Link] tests?
• What are different types for testing?
• What is Enzyme?
• Enzyme vs React Testing Library
• What is Jest and why do we use it?