React/Webpack

Question 1

What is React?

Answer 1

A javascript library for building interfaces

Question 1

What is a React element?

Answer 1

An HTML element created using React syntax, and the smallest building block of a React app

Question 2

How do you mount a React element to the DOM?

Answer 2

ReactDOM.render() method

Question 3

What is Babel?

Answer 3

A JS compiler that comverts ES code into a backwards compatible version of JS

Question 4

What is a Webpack loader?

Answer 4

They preprocess files as they are imported, allowing for frontend build steps to be handled

Question 5

How can you make Babel and Webpack work together?

Answer 5

by installing the babel loader as a dev dependency when using Webpack

Question 6

What is JSX?

Answer 6

A syntax extension that allows you to create React elements using HTML-like markup

Question 7

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

Answer 7

JSX creates React elements, which require React in order to be built

Question 8

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

Answer 8

You install the transform-react-jsx npm plugin as a dev dependency along with the babel loader and webpack

Question 9

What is a React component?

Answer 9

A function that accepts inputs called props and returns a React element

Question 10

How do you define a function component in React?

Answer 10

using normal function definitions or es6 classes

Question 11

How do you mount a component to the DOM?

Answer 11

use ReactDOM.render(), with function name and root css selector as parameters

Question 12

What are props in React?

Answer 12

Properties that can be passed into a component

Question 13

How do you pass props to a component?

Answer 13

Enclose the prop value in curly brackets and assign it to a property on the prop object of the component

Question 14

How do you write JavaScript expressions in JSX?

Answer 14

Enclose the expression in curly braces

Question 15

How do you create “class” component in React?

Answer 15

• Use the class keyword, followed by function name, followed by extends keyword then React.Component
• Next line: render()
• Next line: return keyword, react element type, js expression with this. included

Question 16

How do you access props in a class component?

Answer 16

this.props.nameOfValue

Question 17

What is the purpose of state in React?

Answer 17

Allows you to store variables in a React component
Useful for values that can change over time or need to be updated

Question 18

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

Answer 18

bind the event to this in the class constructor function

Question 19

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

Answer 19

map

Question 20

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

Answer 20

\A string that uniquely identifies a list item among its siblings, such as an id

Question 21

What are controlled components?

Answer 21

An input form element that is controlled by react in that it renders a form and also controls what happens in that form

Question 22

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

Answer 22

onChange and value

Question 23

When does React call a component’s componentDidMount method?

Answer 23

once the component is rendered

Question 24

Name three React.Component lifecycle methods.

Answer 24

componentDidMount, componentDidUpdate, componentWillUnmount

Question 25

How do you pass data to a child component?

Answer 25

assigning that data to props and passing the props to the child component

Question 26

What is Webpack?

Answer 26

Webpack is a tool that lets you bundle javascript applications together

Question 27

How do you add a devDependency to a package?

Answer 27

Use the –save-dev keyword when installing the npm package

Question 28

What is an NPM script?

Answer 28

A piece of code that executes a task when run using node and is located in the package json file under scripts

Question 29

How do you execute Webpack with npm run?

Answer 29

Npm run then the name of the script

Question 30

What kind of modules can Webpack support?

Answer 30

o ES, CommonJS, AMD, Assets, webAssembly