React

Question 1

What is Webpack?

Answer 1

It is a static module bundler for modern JavaScript applications (takes all the files and bundles them into one for your application)

Question 2

What is the advantage of using Webpack (or a similar bundler)?

Answer 2

It internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.

Question 3

What is Babel

Answer 3

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Question 4

What is the advantage of using Babel (or a similar transpiler)?

Answer 4

So you can work on old applications using newer code/methods

Question 5

What is React?

Answer 5

React is a way to let you build user interfaces out of individual pieces called components.

Question 6

What is a React element?

Answer 6

A React element is what gets returned from components (a custom written DOM element)

Question 7

How do you mount a React element to the DOM ?

Answer 7

Attaching/Appending/Rendering

Question 8

What is JSX?

Answer 8

JSX is an extension to the JavaScript language syntax which provides a way to structure component rendering using syntax familiar to many developers commonly used in React

Question 9

How does React use JSX to render components?

Answer 9

const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(

<React.StrictMode>
<ComponentName></ComponentName>
</React.StrictMode>

);

Question 10

What is a React component?

Answer 10

Independent and reusable bits of code

Question 11

How do you define a component in React?

Answer 11

With a capital letter, and return a jsx

Question 12

How do you mount a component to the DOM (or “render” a component)?

Answer 12

By attaching it to the root. calls the function when it sees it wrapped in <>. Takes the result of calling the function and puts it in the DOM.

Question 13

What are props in React?

Answer 13

A type of object where the value of attributes of a tag is stored

Question 14

How do you use props in a component?

Answer 14

By passing them as an attribute and setting their value as the value of the attribute

Question 15

How do you write JavaScript expressions in JSX?

Answer 15

Within curly braces

Question 16

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

Answer 16

As an argument/prop

Question 17

What is the naming conventions for event handlers?

Answer 17

Event names are written in camelCase

Question 18

What are some custom event handler props a component may wish to define?

Answer 18

onClick, onSubmit, onChange

Question 19

What is the naming convention for custom event handler props?

Answer 19

Usually with the prefix on*

Question 20

What is an eventHandler?

Answer 20

A function that occurs when something is activates it

Question 21

What is an eventHandler?

Answer 21

A function that occurs when something is activates it

Question 22

What are hooks in React?

Answer 22

useState or any other function starting with “use”. Hooks are special functions that are only available while React is rendering.

Question 23

What are “Rules of Hooks”? (if necessary, re-read the “Pitfall” box in State)

Answer 23

Only call hooks at the top level. Only call hooks from react functions. Call hooks from react function components. Call hooks from custom hooks.

Question 24

What is the purpose of state in React?

Answer 24

To contain data or information about the component

Question 25

Why can’t we just maintain state in a local variable?

Answer 25

It would be gone after it gets re-rendered

Question 26

What two actions happen when you call a state setter function?

Answer 26

It will update the variable and trigger react to render the component again

Question 27

When does the local state variable get updated with the new value?

Answer 27

After useState has been called

Question 28

How do controlled components differ from uncontrolled components?

Answer 28

Controlled components refer to components that have their state and behavior controlled by the parent component

Question 29

What are some advantages of using uncontrolled components?

Answer 29

You don’t have to declare state

Question 30

Which style do you prefer?

Answer 30

controlled

Question 31

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

Answer 31

useState

Question 32

What are some popular npm packages for creating forms in React?

Answer 32

react final form

Question 33

What are some advantages of using controlled components?

Answer 33

You can have a live search bar. You do things with that individual value

Question 34

When would we want to create a list of React components?

Answer 34

Whenever you need to have lists coming from a database or from a user

Question 35

Why is it important for React components to be data-driven?

Answer 35

So that the only thing that changes is the data

Question 36

Where in the component code would a list of React components typically be built?

Answer 36

Inside the function body

Question 37

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

Answer 37

.map

Question 38

Why do components in a list need to have unique keys?

Answer 38

Because react need to keep track incase they want to reorder or remove

Question 39

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

Answer 39

A number, must be in the outer most element

Question 40

What are two ways React components can interact?

Answer 40

Passing properties from a parent component to children components, and by responding Events from children components

Question 41

How can multiple React components share state?

Answer 41

By removing state and passing components to their closest parent and then passing it down to them via props

Question 42

What are the steps to “lift state up”?

Question 43

When would you want to lift state up?

Question 44

When is a component “mounted” to the DOM?

Question 45

What is a React Effect?

Question 46

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

Question 47

When do Effects run?

Answer 47

After the page renders, ands runs as things change

Question 48

What function is used to declare an Effect?

Answer 48

useEffect

Question 49

What are Effect dependencies and how do you declare them?

Answer 49

When an effect should run and declare them in the array

Question 50

Why do you want to clean up from an Effect?

Question 51

How do you clean up from an Effect?

Question 52

When does the cleanup function run?

Question 53

What is the purpose of React “context”?

Answer 53

Allows you to share information to any component, by storing it in a central place and allowing access to any component that requests it. (must be a child)

Question 54

What values can be stored in context?

Answer 54

Information to any component

Question 55

How do you create context and make it available to the components?

Answer 55

import { createContext } from ‘react’;
export const AppContext = createContext();

Question 56

How do you access the context values?

Answer 56

Through props with the help of useContext method in React

Question 57

When would you use context? (in addition to the best answer: “rarely”)

Answer 57

When building large applications

Question 58

What is React custom hooks?

Answer 58

Reusable functions that a React JS software developer can use to add special and unique functionality to the React applications

Question 59

When are custom hooks useful? When are they not required?

Answer 59

When you need to reuse more than a few times

Question 60

What is the syntax (or naming convention) for writing a custom hook?

Answer 60

Starts with the word “use” and may call other Hooks

Question 61

How do you call a custom hook?

Answer 61

Same way as a normal hook

Question 62

When do custom hooks execute?

Answer 62

Every time the component is rendered.