31. What is JSX?
JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It lets you write HTML-like code inside JavaScript.
Example:
const element = <h1>Hello, world!</h1>;
JSX makes it easier to describe the UI structure, and it gets compiled to
React.createElement() under the hood.32. What is routing in frontend? (React Router)
Routing allows navigation between different pages in a single-page application (SPA).
React Router is a library that handles dynamic routing.
Example:
<Route path="/about" element={<About />} />
33. How do you handle forms in React?
Use controlled components where input values are tied to component state.
Example:
const [name, setName] = useState('');
<input value={name} onChange={e => setName(e.target.value)} />
34. What are lifecycle methods in React?
Used in class components to run code at different stages (mount, update, unmount):
•
componentDidMount()•
componentDidUpdate()•
componentWillUnmount()In functional components, the
useEffect() hook replaces these methods.35. What is Next.js?
Next.js is a React framework for production with features like:
• Server-side rendering (SSR)
• Static site generation (SSG)
• API routes
• Built-in routing and optimization
36. Difference between SSR, CSR, and SSG
• CSR (Client-Side Rendering): HTML loads, JS renders UI (React apps)
• SSR (Server-Side Rendering): HTML is rendered on server, faster first load
• SSG (Static Site Generation): Pages are pre-rendered at build time (e.g. blogs)
37. What is component re-rendering in React?
Re-rendering happens when state or props change. React compares virtual DOMs and updates only what’s necessary. Use
React.memo() or useMemo() to optimize.38. What is memoization in React?
Memoization stores the result of expensive computations.
•
React.memo() prevents unnecessary component re-renders•
useMemo() and useCallback() cache values/functions39. What is Tailwind CSS?
A utility-first CSS framework that lets you build custom designs without writing CSS.
Example:
<button class="bg-blue-500 text-white px-4 py-2">Click</button>
40. Difference between CSS Modules and Styled-Components
• CSS Modules: Scoped CSS files, imported into components
• Styled-Components: Write CSS in JS using tagged template literals
Both avoid global styles and support component-based styling.
Double Tap ❤️ For More