1. React Fundamentals & JSX (Q1-Q25)
Q1. What is React and why is it used?
React is an open-source JavaScript library developed by Facebook for building user interfaces, specifically for single-page applications. It is used because it allows developers to create reusable UI components, manage the view layer of web apps efficiently, and handle data changes without reloading the page.
Q2. What are the key features of React?
The main features include the Virtual DOM for better performance, Component-based architecture for reusability, Unidirectional (one-way) data flow, and JSX (JavaScript XML) for writing HTML-like code within JavaScript.
Q3. What is JSX?
JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like structures directly inside your JavaScript files. React converts JSX into standard JavaScript objects that describe the UI.
Q4. Can React run in the browser without a transpiler like Babel?
Not directly. Browsers cannot read JSX because it isn’t standard JavaScript. You need a transpiler like Babel to convert JSX into standard React.createElement() calls that the browser can understand.
Q5. What is the Virtual DOM and how does it work?
The Virtual DOM is a lightweight copy of the actual DOM. When the state of an object changes, React first updates the Virtual DOM. Then, it compares the new Virtual DOM with a snapshot taken before the update (a process called “Diffing”) and only updates the specific parts of the real DOM that changed.
Q6. What is the difference between the Real DOM and the Virtual DOM?
The Real DOM updates the entire tree even if only one element changes, making it slow for complex UIs. The Virtual DOM is much faster because it only re-renders the specific components that have changed, reducing the workload on the browser.
Q7. Why do we need to import React in a file when using JSX?
In older versions of React (before v17), every JSX element was compiled into React.createElement(). Therefore, the React library had to be in scope. In modern React (v17+), this is often handled automatically by the compiler, but it is still a standard practice in many projects.
Q8. What are components in React?
Components are the building blocks of a React application. They are independent, reusable pieces of UI that act like JavaScript functions. They accept inputs (props) and return React elements describing what should appear on the screen.
Q9. What is the difference between Functional and Class Components?
Functional components are simple JavaScript functions that return JSX. Class components are ES6 classes that extend React.Component and require a render() method. Today, functional components are preferred because they are easier to read and can use Hooks.
Q10. What is an Element in React?
A React Element is the smallest building block of React. It is a plain object that describes what you want to see on the screen (e.g., a <div> or a <button>). Unlike components, elements are immutable—once created, you cannot change their children or attributes.
Q11. What is the role of ReactDOM?
ReactDOM is a package that provides DOM-specific methods. Its primary job is to take your React elements and render them into the actual HTML DOM of the browser using ReactDOM.render() (or createRoot in React 18).
Q12. What is “One-Way Data Binding” in React?
One-way data binding means that data flows in only one direction: from parent components down to child components via props.This makes the code more predictable and easier to debug because you know exactly where the data is coming from.
Q13. How do you write comments in JSX?
In JSX, you cannot use standard HTML comments. You must wrap JavaScript comments inside curly braces, like this:
{/* This is a comment */}.
Q14. What are Fragments in React?
Fragments (<React.Fragment> or <>…</>) allow you to group a list of children without adding extra nodes to the DOM. This is useful when a component needs to return multiple elements but you don’t want to wrap them in an unnecessary <div>.
Q15. Why can’t you return multiple elements from a single component?
A React component must return a single “parent” element. This is because a function can only return one value. To return multiple elements, you must wrap them in a Fragment or a container element like a <div>.
Q16. What is the “root” DOM node?
The “root” node is a specific HTML element (usually <div id=”root”></div> in index.html) where the entire React application is injected and managed by React.
Q17. How does React handle camelCase in JSX attributes?
Since JSX is closer to JavaScript than HTML, React uses camelCase naming convention for attributes. For example, class becomes className, onclick becomes onClick, and tabindex becomes tabIndex.
Q18. What is the difference between a library and a framework, and why is React a library?
A framework (like Angular) provides a complete set of tools and dictates how you build your app. A library (like React) focuses on one specific thing—the View layer. You have the freedom to choose other libraries for routing, state management, and APIs.
Q19. What is the use of the create-react-app command?
create-react-app (CRA) is a tool that sets up a professional React development environment with zero configuration. It pre-configures Webpack, Babel, and a development server so you can start coding immediately.
Q20. What is an Expression in JSX?
An expression is any valid piece of JavaScript code (like a variable, a function call, or a math operation) that is wrapped in curly braces {} within JSX. Example: <h1>Hello, {userName}</h1>.
Q21. Can you use if-else statements inside JSX?
No, if-else statements do not work inside JSX because JSX is just syntactic sugar for function calls. Instead, you must use ternary operators (condition ? true : false) or logical && operators.
Q22. What is the significance of the public folder in a React project?
The public folder contains static assets that do not get processed by Webpack, such as index.html, the favicon, and the manifest.json. The index.html file is the entry point where your React app is rendered.
Q23. What is the purpose of the src folder?
The src (source) folder is where all the React logic lives. It contains your components, CSS files, images, and the main index.js or App.js files that Webpack processes during the build.
Q24. How do you render a React element into the DOM?
In React 18, you first create a root using ReactDOM.createRoot() by passing the target DOM element, and then call the render() method on that root.
Example:
const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(<h1>Hello World</h1>);
Q25. What are Props in React?
Props (short for properties) are read-only inputs passed from a parent component to a child component. They allow you to pass data and configuration, making components dynamic and reusable.
