React Basic

1. What is React.js?

Answer:
React.js is a JavaScript library developed by Facebook for building fast and interactive user interfaces, especially for single-page applications (SPAs). It allows developers to create reusable UI components and manage application state efficiently.

2. What are the key features of React?

Answer:

• JSX (JavaScript XML) – Allows writing HTML inside JavaScript.
• Component-based architecture – UI is broken down into reusable components.
• Virtual DOM – Efficiently updates the UI by comparing changes in a virtual representation of the DOM.
• Unidirectional data flow – Data flows in a single direction, making debugging easier.
• Hooks (introduced in React 16.8) – Enables state and lifecycle features in functional components.

3. What is JSX? Why is it used in React?

Answer:
JSX (JavaScript XML) is a syntax extension for JavaScript that allows writing HTML inside JavaScript code.
Example:

jsxCopyEditconst element = <h1>Hello, React!</h1>;

JSX makes the code more readable and allows React to convert it into JavaScript calls to create UI elements.

4. What is the Virtual DOM in React?

Answer:
The Virtual DOM (VDOM) is a lightweight copy of the actual DOM. When changes are made to the UI:

1. React updates the Virtual DOM.
2. It compares the new Virtual DOM with the previous one (diffing).
3. Only the changed parts are updated in the real DOM (reconciliation).

This improves performance since modifying the real DOM is slow compared to working with a virtual one.

5. What are Components in React?

Answer:
Components are the building blocks of a React application. There are two types:

1. Functional Components – Simple, stateless, and use hooks for state.
2. Class Components – Stateful and use lifecycle methods (older approach).

Example of a Functional Component:

jsxCopyEditfunction Greeting() {
  return <h1>Hello, World!</h1>;
}

Example of a Class Component:

jsxCopyEditclass Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

6. What is the difference between Class Components and Functional Components?

React recommends functional components with hooks because they are simpler and improve performance.

7. What are Props in React?

Answer:
Props (short for properties) are used to pass data from a parent component to a child component.

Example:

jsxCopyEditfunction Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Using the component
<Welcome name="John" />

Here, "John" is passed as a prop to the Welcome component. Props are read-only (immutable).

8. What is State in React?

Answer:
State is an object that holds component-specific data and determines how the component behaves. Unlike props, state is mutable (can change over time).

Example using useState Hook:

jsxCopyEditimport { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

Here, useState(0) initializes the count state with 0, and setCount updates it when the button is clicked.

9. What is the difference between State and Props?

10. What is the difference between Controlled and Uncontrolled Components?

Example of a Controlled Component:

jsxCopyEditfunction Form() {
  const [input, setInput] = useState("");

  return (
    <input value={input} onChange={(e) => setInput(e.target.value)} />
  );
}

Here, value is controlled by React’s state.

Example of an Uncontrolled Component:

jsxCopyEditfunction Form() {
  return (
    <input type="text" ref={inputRef} />
  );
}

Here, the input value is handled by the DOM, not React.

11. What is the importance of Keys in React?

Answer:
Keys help React identify which items have changed, are added, or removed in a list.

Example:

jsxCopyEditconst items = ["Apple", "Banana", "Orange"];

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

Why are keys important?

• Helps React efficiently re-render lists.
• Prevents unnecessary re-renders and improves performance.

12. What is Fragment in React?

Answer:
A Fragment allows grouping multiple elements without adding extra DOM nodes.

Example:

jsxCopyEditimport React from "react";

function Demo() {
  return (
    <>
      <h1>Hello</h1>
      <p>Welcome to React!</p>
    </>
  );
}

This prevents unnecessary <div> wrappers in the DOM.

13. What is the difference between React and ReactDOM?

Example usage:

jsxCopyEditimport React from "react"; // Core React
import ReactDOM from "react-dom"; // DOM rendering

ReactDOM.render(<App />, document.getElementById("root"));

14. What is Create React App (CRA)?

Answer:
create-react-app is a tool to quickly set up a new React project without configuration.
Command to create a React app:

bashCopyEditnpx create-react-app my-app
cd my-app
npm start

It sets up Webpack, Babel, ESLint, and other necessary configurations automatically.

15. What is the difference between React.js and React Native?