React.
js Complete Theory Notes
1. What is React? React is a JavaScript library for building user interfaces, especially for
single-page applications. It helps create reusable UI components and updates efficiently using a
virtual DOM.
2. Why React? - Fast and efficient - Reusable components - Virtual DOM - Strong community
support - Easy integration with other libraries
3. JSX (JavaScript XML) JSX allows writing HTML-like code inside JavaScript. It improves
readability and makes UI development more intuitive.
4. Components React uses components to build UI. Components can be functional or class-based.
- Functional Components: Simple JavaScript functions returning JSX. - Class Components: ES6
classes extending React.Component.
5. Props Props (properties) are used to pass data from parent to child components. They are
read-only.
6. State State is a built-in object used to contain data or information about the component. It is
mutable and managed within the component.
7. useState Hook A React Hook used to manage state in functional components.
8. useEffect Hook Performs side effects in components (e.g., data fetching, subscriptions). It
replaces lifecycle methods like componentDidMount.
9. Conditional Rendering Render elements conditionally using ternary operators or logical &&.
10. Lists and Keys Render multiple items using .map(). Keys help React identify which items have
changed.
11. Event Handling Handle user interactions using event handlers like onClick, onChange.
12. Forms in React React handles form data using controlled components with state updates.
13. Lifting State Up Sharing state between components by moving it to the closest common
ancestor.
14. React Router Used for navigation in single-page apps. - Components: BrowserRouter, Routes,
Route, Link
15. Hooks Overview - useState: Manage local state - useEffect: Side effects - useContext: Global
state sharing - useRef: Access DOM elements - useReducer: Manage complex state
16. Context API Provides a way to pass data through the component tree without passing props
manually at every level.
17. useRef Hook Gives access to DOM elements or persists values across renders without
re-rendering.
18. useReducer Hook Alternative to useState for managing complex state logic.
19. Project Structure (Typical) src/ ■■■ components/ ■■■ pages/ ■■■ App.js ■■■ index.js
20. API Integration Use useEffect with fetch or axios to call APIs.
21. React Lifecycle (Class-based) - Mounting: constructor, render, componentDidMount - Updating:
componentDidUpdate - Unmounting: componentWillUnmount
22. Virtual DOM A lightweight copy of the actual DOM. React updates the virtual DOM and then
applies the changes to the real DOM efficiently.
23. Unidirectional Data Flow Data flows from parent to child via props. Makes the app predictable
and easy to debug.
24. Controlled vs Uncontrolled Components - Controlled: Form elements controlled by React state.
- Uncontrolled: Form elements managed by the DOM directly using refs.
25. React Interview Tips - Understand basic concepts (JSX, state, props) - Practice small projects
and components - Learn and explain hooks clearly - Know the difference between functional and
class components - Revise common hooks and use cases
--- END OF NOTES ---
