React.
js Complete Theory Notes with Details and Examples
1. What is React? React is a JavaScript library used to build user interfaces. It is especially used for
creating Single Page Applications (SPAs). It allows developers to create reusable UI components
that efficiently update and render when the data changes using a virtual DOM.
Example: const element = Hello, React!;
2. Why React? - Fast and efficient with virtual DOM - Component-based architecture for reusability -
Strong community and ecosystem - Easy to integrate with other libraries (Redux, Axios, etc.)
3. JSX (JavaScript XML) JSX allows you to write HTML-like code in JavaScript, making UI
development easier and more readable.
Example: const element = Hello, World!;
4. Components Components are the building blocks of a React app. They can be functional or
class-based.
Functional Component: function Welcome() { return Hello!; }
Class Component: class Welcome extends React.Component { render() { return Hello!; } }
5. Props Props are inputs passed to components. They are immutable.
Example: function Greet(props) { return Hello, {props.name}; }
6. State State holds dynamic data inside components.
Example using useState: const [count, setCount] = useState(0);
7. useState Hook A Hook that lets you add React state to functional components.
Example: const [name, setName] = useState("");
8. useEffect Hook Performs side effects like data fetching, updating DOM, etc.
Example: useEffect(() => { console.log("Component mounted"); }, []);
9. Conditional Rendering Used to show content based on conditions.
Example: {isLoggedIn ? : }
10. Lists and Keys Used to render a list of items.
Example: const items = ['Pen', 'Book', 'Phone']; items.map((item, index) => {item});
11. Event Handling React handles events like onClick, onChange.
Example: alert('Clicked!')}>Click
12. Forms in React Controlled components manage form data using state.
Example: setName(e.target.value)} />
13. Lifting State Up Move state to a common parent to share between child components.
14. React Router For page navigation in SPAs.
Example: import { BrowserRouter, Routes, Route } from 'react-router-dom'; } /> } />
15. Hooks Overview - useState: Manage state - useEffect: Side effects - useContext: Share data
globally - useRef: Access DOM elements - useReducer: Manage complex state logic
16. Context API Allows passing data without props.
Example: const MyContext = React.createContext();
17. useRef Hook Access DOM or persist values.
Example: const inputRef = useRef();
18. useReducer Hook Use when state logic is complex.
Example: const reducer = (state, action) => { return {...}; }; const [state, dispatch] =
useReducer(reducer, initialState);
19. Project Structure (Typical) src/ ■■■ components/ ■■■ pages/ ■■■ App.js ■■■ index.js
20. API Integration Call APIs using useEffect.
Example: useEffect(() => { fetch("https://api.example.com/data") .then(res => res.json()) .then(data
=> setData(data)); }, []);
21. React Lifecycle (Class-based) - Mounting: constructor, render, componentDidMount - Updating:
componentDidUpdate - Unmounting: componentWillUnmount
22. Virtual DOM A lightweight version of real DOM. It improves performance by updating only the
changed elements.
23. Unidirectional Data Flow Data flows from parent to child using props.
24. Controlled vs Uncontrolled Components - Controlled: Managed by React using state -
Uncontrolled: Managed by DOM using refs
Example: Controlled: setText(e.target.value)} /> Uncontrolled:
25. React Interview Tips - Revise concepts: JSX, props, state, hooks - Explain component types
with examples - Prepare small projects or tasks - Practice API integration and routing
--- END OF NOTES ---
