React

Question 1

What is React?

Answer 1

JavaScript library (framework) for building interfaces

Question 2

What is a React element?

Answer 2

Object that describes a HTML element (DOM node)

Question 3

How do you mount a React element to the DOM?

Answer 3

Call the render method of the root object then pass the react element into it

Question 4

What is Babel?

Answer 4

A JavaScript compiler that converts new JavaScript terminology to old JavaScript terminology

Question 5

What is a Plug-in?

Answer 5

Enhances a program’s capabilities

Question 6

What is a Webpack loader?

Answer 6

Allows us to pre-processs files as we import or “load” them

Question 7

How can you make Babel and Webpack work together?

Answer 7

• Install the proper devDependencies within the package.json
• Use the Babel loader

Question 8

What is JSX?

Answer 8

A syntax extension of JavaScript that produces React “elements” and lets us write HTML-like syntax

Question 9

Why must the React object be imported when authoring JSX in a module?

Answer 9

The React object has the methods needed to create the React elements

Question 10

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

Answer 10

• Install babel-loader, @babel/core, and the plugin @babel/plugin-transform-react-jsx using NPM (don’t forget webpack and babel in general)
• Set the loader to run with the plugin in the webpack.config.js file
• When Webpack starts bundling from npm run build, it will process .jsx files using the plugin

Question 11

What is a React component?

Answer 11

A function that outputs a React element

Question 12

How do you define a function component in React?

Answer 12

• similar function style to JS
• Name of the function component must start with a capital
• Has one parameter props
• returns a React element
• Arguments are accessed with curly braces containing an expression, usually accessing the props object

Question 13

How do you mount a component to the DOM?

Answer 13

• Query for the root DOM element
• Use ReactDOM.createRoot() method to create the React DOM root
• Within that. use render() method with the desired React elements created from the React component inside

Question 14

What are props in React?

Answer 14

Props is an object that is passed to a React component

Question 15

How do you pass props to a component?

Answer 15

Pass ‘props’ to a component with key value pair attributes

Objects, variables, anything other than a string must be in curly braces

Question 16

How do you write JavaScript expressions in JSX?

Answer 16

Wrap them in curly braces, otherwise they’re the same as JavaScript expressions

Question 17

How do you create “class” component in React?

Answer 17

class (name starting with capital letter), extends React.component and code block with render method inside it

Question 18

How do you access props in a class component?

Answer 18

this.props

Question 19

What is the purpose of state in React?

Answer 19

State allows a React element to not only handle events but also keep the functionality of handling events within the component

Question 20

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

Answer 20

Within the return of the React element (the render()), add the event as a prop to the React element and specify the handler function as the value to that prop but remember to enclose it within curly braces and specify that it is a method of this

Question 21

What are controlled components?

Answer 21

Form element controlled by react

They render the form control and the state of the form control

Question 22

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

Answer 22

• value that holds the associated key value in curly braces {this.state}
• onChange event handler that uses setState()

Question 23

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

Answer 23

the map method

Question 24

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

Answer 24

An ideal key would be one that uniquely identifies a list item from its siblings, from the source data

Question 25

What does React call a component’s ‘componentDidMount’ method?

Answer 25

After the first successful render is called for the first time

Question 26

Name 3 React.Component lifecycle methods.

Answer 26

• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()
• render()

Question 27

How do you pass data to a child component?

Answer 27

The parent can hold the data in its state, and pass that data as a prop to the child component when creating the child element

In short, via PROPS