Building React App 1 — Questions and Answers

Question 1: We can integrate reactJS in any of the existing web app

True (Correct answer)
False

Correct answer: True

ReactJS is designed to be highly modular and can be integrated into existing web applications incrementally. Developers don't need to rewrite their entire frontend; they can add React components to specific parts of an application, allowing for gradual adoption and coexistence with other frameworks or plain JavaScript.

Question 2: ReactJS does not need HTML or any of the HTML preprocessor to make UI elements

True
False (Correct answer)

Correct answer: False

ReactJS heavily relies on JSX (JavaScript XML), which is a syntax extension that allows you to write HTML-like code directly within your JavaScript. While it's technically possible to create UI elements using `React.createElement()` without JSX, JSX is the recommended and most common way to define UI structures in React, making it a crucial part of the development workflow.

Question 3: Props can be modified in child component directly like state

True
False (Correct answer)

Correct answer: False

Props (short for properties) are used to pass data from a parent component to a child component in React. They are read-only within the child component, meaning a child component cannot directly modify the props it receives. This ensures a unidirectional data flow and helps maintain predictable component behavior, unlike state, which is mutable and managed within a component.

Question 4: About hooks it is incorrect to say:

Hooks are functions that allow you to hook into React's state and lifecycle features from within functional components.
Hooks work inside classes and allow you to use React without classes.
We can create our own hooks.
Hooks don't work inside classes and allow you to use React without classes. (Correct answer)

Correct answer: Hooks don't work inside classes and allow you to use React without classes.

Hooks are a feature introduced in React 16.8 that allow functional components to 'hook into' React state and lifecycle features. A key characteristic of Hooks is that they *do not* work inside class components; they are specifically designed for functional components, enabling developers to write React applications entirely with functions and avoid class-based patterns.

Question 5: What is the result of the expression const [add, setSum] = useState(0) setSum(add + 4) setSum(adding - (1x2))

2 (Correct answer)
4
3
6

Correct answer: 2

Let's trace the state changes: `useState(0)` initializes `add` to 0. The first `setSum(add + 4)` updates the state to `0 + 4 = 4`. Assuming 'adding' is a typo for 'add', the second `setSum(add - (1*2))` then updates the state to `4 - 2 = 2`. Therefore, the final value of the state is 2.

Question 6: Is the use of JSX mandatory to develop with React?

Yes
No (Correct answer)
Sometimes

Correct answer: No

While JSX is the most common and recommended way to write React components due to its readability and expressiveness, it is not strictly mandatory. You can technically create React elements using `React.createElement()` calls directly. However, this approach is much more verbose and less intuitive, which is why JSX is almost universally adopted in React development.

Question 7: About lists in React, why should we use "keys"?

The braces interrupt the information listing flow.
Keys help React identify which items have changed. (Correct answer)
Keys are not mandatory.
The keys are mandatory to prevent the application from stopping.

Correct answer: Keys help React identify which items have changed.

When rendering lists of elements in React, `keys` are crucial for performance and correct behavior. Keys provide a stable identity to each item in a list, allowing React to efficiently identify which items have been added, removed, updated, or reordered. Without unique keys, React's reconciliation algorithm might struggle to update the UI correctly, leading to potential bugs and performance issues.

Building React App 1

We can integrate reactJS in any of the existing web app