React

Question 1

What is React?

Answer 1

A JavaScript library for building user interfaces

Question 2

What is a React element?

Answer 2

It is the basic building block in a react application, it is an object representation of a virtual DOM node. React Element contains both type and property

Question 3

How do you mount a React element to the DOM?

Answer 3

const create = React.createElement(
‘h1’,
null,
‘Hello, React!’
);

const container = document.querySelector(‘#root’);
ReactDOM.createRoot(container).render(create);

Question 4

What is a React component?

Answer 4

a React component is a JavaScript function that you can sprinkle with markup.

Question 5

How do you define a function component in React?

Answer 5

With function Profile() { } you define a JavaScript function with the name Profile.

Question 6

How do you mount a component to the DOM?

Answer 6

const container = document.querySelector(‘#root’);
const root = ReactDOM.createRoot(container);
root.render(variable);

Question 7

What are props in React?

Answer 7

standardized way to pass arguments

Question 8

How do you pass props to a component?

Answer 8

list properties

Question 9

How do you write JavaScript expressions in JSX?

Answer 9

curly brackets

Question 10

What is the purpose of state in React?

Answer 10

A state variable to retain the data between renders.
A state setter function to update the variable and trigger React to render the component again.

Question 11

How to you pass an event handler to a React element?

Answer 11

<button onClick={handleClick}>{props.text}</button>;

Question 12

What are controlled components?

Answer 12

An input like <input></input> is uncontrolled. Even if you pass an initial value like <input></input>, your JSX only specifies the initial value. It does not control what the value should be right now.

Question 13

What two props must you pass to an input for it to be “controlled”?

Answer 13

value, onChange

Question 14

What Array method is commonly used to create a list of React elements?

Answer 14

filter() and map()

Question 15

What is the best value to use as a “key” prop when rendering lists?

Answer 15

something unique (don’t use array index - order may change)
Data from a database: If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.

Locally generated data: If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, crypto.randomUUID() or a package like uuid when creating items.

Question 16

What is a React Effect?

Answer 16

function that will execute in special cases

Question 17

When should you use an Effect and when should you not use an Effect?

Answer 17

when you have actions that need to be executed outside of rendered user actions/events

Question 18

When do Effects run?

Answer 18

1) after mount/render
2) when dependency changes

Question 19

What function is used to declare an Effect?

Answer 19

useEffect
parameters: callback function, dependency array

Question 20

What are Effect dependencies and how do you declare them?

Question 21

How do you clean up from an Effect?

Answer 21

returning a function from effect callback

Question 22

When does the clean up function run?

Answer 22

1) before the unmount
2) runs when things change and before it does, cleans up

Question 23

When does React call a component’s componentDidMount method?

Answer 23

This method is called during the Mounting phase of the React Life-cycle i.e after the component is rendered.

Question 24

Name three React.Component lifecycle methods.

Answer 24

Mounting, Updating, and Unmounting.

Question 25

How do you pass data to a child component?

Answer 25

you do this by using props.