React Complete Topics - Questions and
Answers
1. Introduction to React
✅ What is React?
React is an open-source JavaScript library used to build user interfaces, especially single-
page applications. It is component-based and developed by Facebook.
✅ Why use React?
- Component reusability
- Virtual DOM for fast updates
- Cross-platform support
- SEO-friendly with SSR
- Strong tooling and community
✅ React Features
- JSX
- Virtual DOM
- One-way data binding
- Component-based
- Hooks for functional components
✅ React vs Angular vs Vue
| Feature | ReactJS | Angular | Vue |
|--|--|--|--|
| Type | Library | Framework | Progressive Framework |
| DOM | Virtual | Real | Virtual |
| Language | JSX | TypeScript | JS + HTML |
2. Environment Setup
✅ Installing Node.js & npm
Node.js is required to run JavaScript tools. npm helps install libraries like React.
✅ Create React App (CRA)
Use `npx create-react-app app-name` to scaffold a React project with Webpack, Babel,
ESLint configured.
✅ CRA Folder Structure
- public/: static files
- src/: app components
- package.json: dependencies
3. JSX (JavaScript XML)
✅ What is JSX?
JSX is a syntax extension to JavaScript that allows writing HTML within JavaScript code.
✅ JSX vs HTML
- JSX uses camelCase (e.g., className)
- JSX expressions use {}
- All tags must be closed
✅ Syntax and Rules
Return one root element, wrap JavaScript logic inside {}, and self-close void elements.
4. Components
✅ Functional Components
These are simple JavaScript functions that return JSX.
✅ Class Components
Class-based components extend React.Component and have lifecycle methods.
✅ Props
Props are inputs passed from a parent component to a child.
✅ PropTypes & Default Props
Used to enforce data types and set default prop values.
5. State Management
✅ What is State?
State is a built-in object to store dynamic data in a component.
✅ useState Hook
useState is a Hook that lets you add state to functional components.
✅ State vs Props
State is mutable and local to the component. Props are immutable and passed from parent.
✅ Lifting State Up
Move state to a common ancestor to share data between child components.
6. React Lifecycle (Class)
✅ Mounting
componentDidMount runs after component is added to the DOM.
✅ Updating
componentDidUpdate runs after state/props change.
✅ Unmounting
componentWillUnmount is called before the component is removed.
✅ Lifecycle Methods
Includes constructor, render, componentDidMount, etc.
7. Hooks
✅ useState, useEffect
Hooks let you use state and lifecycle features in functional components.
✅ Rules of Hooks
Only call hooks at the top level and from React functions.
✅ Hook vs Lifecycle Comparison
Hooks like useEffect can replicate multiple lifecycle methods in one.
8. Event Handling
✅ Handling Events in JSX
Use camelCase syntax and pass function references.
✅ Common Events
onClick, onChange, onSubmit, onMouseEnter, etc.
✅ this Binding in Class Components
Use constructor binding or arrow functions to retain 'this'.
9. Conditional Rendering
✅ if/else Conditions
Used inside render logic to conditionally show components.
✅ Ternary Operator
Simplifies if/else into one line using `condition ? A : B`.
✅ Logical &&
Renders content only if condition is true.
10. Lists and Keys
✅ .map() Function
Used to render a list of elements from an array.
✅ Assigning Keys
Each list item should have a unique 'key' prop.
✅ Key Best Practices
Avoid using index as key unless items are static.
11. Forms
✅ Controlled Components
Inputs controlled by React state.
✅ onChange, value Binding
Set value and handle onChange to sync input.
✅ Form Submission Handling
Prevent default form action and handle submit logic.
12. Data Binding in React
✅ One-way Data Binding
Data flows from parent to child components.
✅ Declarative UI
React defines what UI should look like based on state.
✅ Difference from Two-way Binding
Unlike Angular, React does not automatically sync UI ↔ state.
13. React Router (Basic Intro)
✅ SPA
Single Page Application routes different components without page reload.
✅ react-router-dom Installation
Install via `npm install react-router-dom`.
✅ BrowserRouter, Route, Link, Switch
Basic components for navigation and routing in React.
14. Styling in React
✅ Inline CSS
Use object notation inside JSX.
✅ CSS Modules
Scoped CSS styles loaded via import.
✅ Styled Components
CSS-in-JS library for styling components.
15. Redux & State Management
✅ What is Redux?
A global state management library.
✅ Redux Store, Actions, Reducers
Store holds state, actions describe changes, reducers apply changes.
✅ Redux Toolkit
Simplifies Redux setup with createSlice and configureStore.
✅ useSelector and useDispatch
Hooks to interact with Redux state and dispatch actions.
✅ Comparing Redux with useContext/useReducer
Redux scales better, but useContext + useReducer is simpler for small apps.
16. Bundlers & Build Tools
✅ Folder/File Structure
Organize by feature or component.
✅ Component Reusability
Split components logically and reuse.
✅ Performance Tips
Use lazy loading, memoization, and avoid unnecessary re-renders.
✅ React Developer Tools for Debugging
Chrome extension to inspect React component tree.
17. Miscellaneous & Best Practices
✅ Folder/File Structure
Maintain organized folder hierarchy.
✅ Component Reusability
Break UI into small reusable components.
✅ Performance Tips
Use `React.memo`, avoid deep prop passing.
✅ Debugging Tools
Use React Developer Tools and console logs.
