React

Question 1

What is React?

Answer 1

React is a JavaScript library for building User Interfaces. It is not a framework.

Question 2

What is React responsible for?

Answer 2

React is only responsible for the View layer.

Question 3

How do you install React?

Answer 3

Install react with npm install react

Question 4

How do you put React into a file?

Answer 4

Import React in every file you need it with import React from “react”

Question 5

What is a React Element?

Answer 5

• A React Element is the smallest building block. It’s a representation of a small piece of your UI.
• React.createElement returns a React Element:
  React.createElement(type, options, children)

Question 6

What is ReactDOM?

Answer 6

ReactDOM is the glue between React and the DOM. ReactDOM is separate from React because you can write React for native applications.

Question 7

What is reconciliation?

Answer 7

Reconciliation is the process of syncing the Virtual DOM to the actual DOM.

Question 8

How do you install ReactDOM?

Answer 8

• Install ReactDOM with npm install react-dom
• Import ReactDOM’s createRoot method with import {createRoot} from “react-dom/client”
• The root element is where ReactDOM will render your UI
  createRoot(root).render(element);

Question 9

What manages the root element?

Answer 9

• ReactDOM completely manages the root element
• Apps built with React have a single root element (The most common use case)

Question 10

What is JSX?

Answer 10

• JSX is a special syntax for React that makes it easier to represent your UI
• JSX looks similar to HTML but it is not HTML
• JSX code you write gets transformed into React.createElement
• JSX is not part of your browser. You need a tool to transform it into valid JavaScript.
• A JSX element is an object.
• You can treat a JSX element like an object.
• You can assign a JSX element to a variable.
• You can return a JSX element from a function.

Question 11

How do attributes get passed in JSX?

Answer 11

• Attributes in JSX get passed as the 2nd argument of React.createElement(…)
• <div></div>is how you would give the class active to this element.
• You need quotes around attribute values that are strings.

Question 12

What is an expression?

Answer 12

• An expression is any valid JavaScript code that resolves to a value
• Expressions in JSX need to be wrapped inside curly braces: {expression}

<h1>You have {2 + 3} notifications</h1>

is an example of JSX with an expression.

Question 13

What is a React Component?

Answer 13

• A React Component is a function that returns one React Element describing a section of the UI.
• Components defined with a function are called function components.
• React Components promote code reuse and are easier to debug.
• A React Component’s name has to start with an uppercase.
• Use UpperCamelCase when naming React Components

Question 14

What are props?

Answer 14

• Props is short for properties.
• Props is an object received as the first argument of a Component.
• Attributes on Components get converted into an object called Props.
• Props make components more reusable.

Question 15

What are children?

Answer 15

• props.children represents the content between the tags of a Component.
• props.children can be an array or a single item.
• props.children can contain text and/or React Elements and/or React Components.

Question 16

What shouldn’t React Components do?

Answer 16

• All React Components should never modify their props.
• React expects Components to be pure so that it can efficiently update the DOM only when/where necessary.

Question 17

How do you use clsx?

Answer 17

• You can install clsx with npm install clsx
• clsx is a tiny utility for constructing className strings conditionally.
• clsx({“your-class-name”: booleanValue}) is the generic syntax for clsx.

Question 18

What is array destructuring?

Answer 18

Array destructuring is a shorter syntax for creating variables out of the items of an array.

Array destructuring works regardless of the data types in the array.

Question 19

What is a State?

Answer 19

• State refers to any variable defined inside a Component with the intent to update later.
• State variables can be updated from inside the component.
• When a state variable is updated, the component automatically re-renders.

Question 20

What is useState?

Answer 20

• useState allows us to create a state variable in a Component
• useState is a named export that needs to be imported
• You can import useState and React: import React, {useState} from “react”;
• useState is one of many React Hooks.

Question 21

How does useState work?

Answer 21

• The useState() function takes the initial_value as the only argument.
• The useState() function returns an array of 2 items
• Always destructure the useState into abc and setAbc where abc is the name of the state
• The default value of the state variable returned by useState will be the same as the initial_value passed to useState().

Question 22

What happens when you change state?

Answer 22

When you change the state, React will call the Component function again to re-render

Question 23

What’s a closure?

Answer 23

• A closure is where an inner function has access to the outer function’s variables.
• Functions in JavaScript have access to their outer scope. This is called closures.
• Closures is what you get when you define a function; it’s not something you have to “enable” or decide to use.
• Functions defined inside another function can use the variables defined in the outer function.

Question 24

What’s conditional state change?

Answer 24

Conditional state change is when you wrap the state set function with an if condition to satisfy some business logic.

Question 25

What’s the logical && operator?

Answer 25

• The logical && operator is a JavaScript feature that allows chaining two expressions. The 2nd expression will only execute if the first one returns true.
• Using the logical && operator in JSX makes it easier to render elements or components conditionally.

Question 26

What are the two rules of Hooks?

Answer 26

• Rules of hooks #1: Only call Hooks from React functions
• Rules of hooks #2: Only call Hooks at the Top Level and never call hooks inside loops, conditions, or nested functions.
• React relies on the order in which Hooks are called

Question 27

Explain arrays.

Answer 27

• Arrays are objects in JavaScript.
• [] === [] is the same as new Array() === new Array()
• {} === {} is the same as new Object() === new Object()
• [] === [] is false because it’s comparing 2 different instances of arrays
• {} === {} is false because it’s comparing 2 different instances of objects
• When you assign a variable to an object or array, it does NOT copy it. It will reference its value.

Question 28

What’s an immutable array?

Answer 28

An immutable object is one that cannot be changed. As we cannot (or sometimes, should not) modify an immutable object, we create an entirely new object based on the original, leaving the original object unchanged.

Question 29

What does the spread operator do?

Answer 29

• The spread operator in an array creates a shallow copy.
• […existingArray, “newValue”] adds newValue to the array in an immutable way because it creates a copy of it.

Question 30

How do you update an array in an immutable way?

Answer 30

.map helps you update an array in an immutable way.

Question 31

Why should you use .slice and not .splice?

Answer 31

.slice is immutable, whereas .splice mutates the array.

Question 32

How do you remove items from an array in an immutable way?

Answer 32

.filter helps you remove items from an array in an immutable way.

Question 33

What should you do whenever you iterate with .map in JSX?

Answer 33

• Whenever you iterate with .map in JSX, you should provide a key.
• The key should be unique. As a last resort, you can use the index of the map iteration (which is the 2nd argument)
• The key allows React to update the DOM efficiently with the least amount of operations.

Question 34

What’s an easy way to immutably remove a key from an object?

Answer 34

const {keyToRemove, …rest} = obj is an easy way to immutably remove keyToRemove from an object.