React.js fundamentals

Question 1

What is JSX in React?

Answer 1

JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together.

Question 2

How does the browser handle JSX code, and what tool can you use to make it work?

Answer 2

The browser doesn’t understand JSX because it’s not valid JavaScript. To make it work, JSX code needs to be transpiled using tools like Babel, which converts JSX into regular JavaScript code.

Question 3

What does JSX code get converted to by Babel?

Answer 3

JSX code gets converted into a series of React.createElement calls, which are JavaScript function calls that create and describe React elements.

Question 4

What is the syntax of React.createElement?

Answer 4

React.createElement(type, [props], […children])

Question 5

Why was React.Fragment introduced in React 16.2?

Answer 5

React.Fragment was introduced to allow developers to group multiple adjacent JSX elements without adding extra DOM nodes to the structure. This helps avoid unnecessary div tags or other wrappers.

Question 6

How can you add comments in JSX?

Answer 6

You can add comments in JSX using {/* /} inside curly braces, like this: {/ This is some text*/}.

Question 7

Can you include JavaScript code within JSX? If so, how?

Answer 7

Yes, you can include JavaScript code within JSX by placing it inside curly braces { }. You can only use expressions that evaluate to a value, known as JSX Expression Syntax.

Question 8

Which values are not displayed on the UI when used inside JSX?

Answer 8

Undefined, null, and boolean values are not displayed on the UI when used inside JSX, as they are treated as if they were not there

Question 9

Why is className used instead of class for adding a class attribute in JSX?

Answer 9

className is used in JSX instead of class because class is a reserved keyword in JavaScript. Accessing props.class would result in an error.

Question 10

In React, how are attribute names typically written?

Answer 10

In React, attribute names are typically written in camelCase, such as onClick instead of onclick.

Question 11

X define the structure and behavior of parts of the user interface. They encapsulate reusable pieces of UI, making it easier to manage and render complex interfaces. What is X?

Answer 11

React components

Question 12

What is the primary purpose of React DOM?

Answer 12

The primary purpose of React DOM is to render React components into the Document Object Model (DOM) of a web page. This allows developers to interact with and manipulate the web page’s structure and content.

Question 13

What are controlled components in React, and why are they used?

Answer 13

Controlled components are React components that manage form elements and their corresponding data by synchronizing the component’s state with user input. They are used to ensure that React controls the input’s value based on the component’s state.

Question 14

What are the key characteristics (3) of controlled components in React?

Answer 14

1. state control
2. event handling (e.g., onChange)
3. maintaining a single source of truth for input values.

Question 15

What is the concept of “lifting state up” in React?

Answer 15

In React, “lifting state up” refers to the practice of removing state from multiple components and moving it to their closest common parent. This allows you to manage the state centrally and pass it down to child components via props.

Question 16

How by using „key„ you can reset the state of a component in React?

Answer 16

By changing the key prop of an element. This effectively tells React that it’s a different element, causing it to unmount the previous instance and remount the new one.

Question 17

What is the advantage of using useReducer with a reducer function in React?

Answer 17

Using useReducer with a reducer function provides a more structured and organized way to manage state updates in React components, especially when state management requirements become more complex.

Question 18

How does React allow a parent component to make information available to any component in the tree below it without passing it explicitly through props?

Answer 18

React allows a parent component to share information with any component in the tree below it by using “context.” Context provides a way to pass data implicitly to descendant components, avoiding the need to pass it explicitly through props.

Question 19

What is the purpose of state in React components?

Answer 19

The purpose of state in React components is to represent data that can change over time and influence the behavior and rendering of the component.

Question 20

What is the main purpose of React hooks?

Answer 20

The main purpose of React hooks is to enable the use of state and other React features in functional components, simplifying state management and side effect handling.

Question 21

Where can you use hooks in React?

Answer 21

Hooks can be used only in functional components and must be used at the top level of the component.

Question 22

What is a characteristic feature of functions that are considered hooks in React?

Answer 22

Functions that are considered hooks in React start with the prefix use, such as useState and useEffect.

Question 23

What does the Effect Hook do in React?

Answer 23

The Effect Hook, as the name suggests, performs an effect each time there is a state change in the component.

Question 24

When does the useEffect hook run in React?

Answer 24

The useEffect hook runs when the state changes. You can also specify dependencies, and it will run only when those dependencies change. For example, useEffect(() => {}, [count]) will run the effect only when the count state changes.