🟢 Set 1: Very Simple (Beginner)

Questions and Answers

1. What is React JS?
👉 React JS is a JavaScript library used for building user interfaces, especially single-page applications.

2. What is a component in React?
👉 A component is a reusable piece of code that controls a part of the UI (User Interface).

3. What is JSX?
👉 JSX stands for JavaScript XML. It lets you write HTML inside JavaScript easily.

4. How do you create a component in React?
👉 You can create a component by writing a JavaScript function or class that returns JSX.

function MyComponent() {
  return <h1>Hello!</h1>;
}

5. What is the difference between a class component and a functional component?
👉 Class components use class syntax and have lifecycle methods, functional components are simple functions and use hooks for state and lifecycle.

6. What does render() do in a class component?
👉 It describes what the UI should look like by returning JSX.

7. How do you start a new React project?
👉 Use npx create-react-app my-app.

8. What is state in React?
👉 State is an object that holds data that can change over time and affect what is rendered on the screen.

9. How do you update state in React?
👉 By calling the setter function like setState (class) or setMyState (hook).

setCount(count + 1);

10. What is a prop in React?
👉 Props are inputs passed to components to customize them.

11. How do you pass props to a component?
👉 By adding attributes when using the component.

<MyComponent name="John" />

12. What are hooks in React?
👉 Hooks are special functions that let you use state and lifecycle features inside functional components.

13. What is useState hook?
👉 useState is a hook that lets you add state to functional components.

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

14. How do you import a component in React?
👉 Using import keyword.

import MyComponent from './MyComponent';

15. What does export default do?
👉 It allows a component or function to be exported so it can be imported elsewhere.

16. What is the virtual DOM?
👉 A virtual copy of the real DOM. React updates the virtual DOM first to find the best way to update the real DOM efficiently.

17. What is the difference between props and state?
👉 Props are passed by parent, while state is managed inside the component itself.

18. How do you create a simple button in React?
👉 Using JSX:

<button>Click Me</button>

19. What is useEffect used for?
👉 It is used to handle side-effects like API calls, timers, or manual DOM updates.

20. How do you handle events like onClick in React?
👉 By adding event handlers in JSX.

<button onClick={handleClick}>Click</button>

21. What is the correct way to write inline CSS in React?
👉 Using camelCase style objects.

const styles = { color: 'red' };
<p style={styles}>Hello</p>

22. What is a fragment (<> </>) in React?
👉 It lets you group multiple elements without adding extra nodes to the DOM.

<>
  <h1>Title</h1>
  <p>Subtitle</p>
</>

23. What tool do you use to create React apps easily?
👉 Create React App (CRA).

24. What is React Router?
👉 It is a library for adding page navigation (routing) in React applications.

25. What is the latest stable version of React (as of now)?
👉 React 18 (you should always check the official site for the latest update).