React

Question 1

What is a webpack?

Answer 1

webpack, at its core, is a code bundler. It takes your code, transforms and bundles it, then returns a brand new version of your code.

Question 2

What are the three main steps a webpack needs to do?

Answer 2

1) webpack needs to know the starting point of your application, or your root JavaScript file.
2) webpack needs to know which transformations to make on your code.
3) webpack needs to know to which location it should save the new transformed code.

Question 3

What are the three different parts of a Component?

Answer 3

1. states (data, arrays, etc.)
2. lifecycle methods (life cycle events: allows you to hook into different lifecycle events)
3. UI

Question 4

How do you specify what the UI of a component will look like?

Answer 4

Use the render() method

Question 5

How do you call the react render?

Answer 5

ReactDOM.render()

Question 6

What are the two arguments that ReactDOM.render() take?

Answer 6

The first is a react element, the second is where we want to render the react element in the DOM.

Question 7

What is the syntax for using a component?

Answer 7

, where App is the name of the component.

Question 8

What does webpack do?

Answer 8

Webpack bundles all of our modules together.

Question 9

What does babel do?

Answer 9

Babel compiles JSX code into normal JavaScript so that the browser can understand it.

Question 10

What does –save-dev do?

Answer 10

Saves the packages required to build your app to the json.package devdependicies object. DevDevependencies are all the packages your app needs to build. While DevDependencies are all the packages your app needs to run.

Question 11

What does webpack-dev-server –open do?

Answer 11

Webpack-dev-server bundles your code into a local cache so it loads faster, and opens it on whichever localhost it is hosted on. This is faster than without because you would have to compile it to a dist folder. This is great for development because it is faster.

Question 12

What is a react element?

Answer 12

React element describes what you want to see on the screen. Not so simply put, a React element is an object representation of a DOM node

Question 13

What is the render component syntax?

Answer 13

ReactDOM.render(< Hello />, document.getElementById(‘app’))

Question 14

What are props?

Answer 14

for passing data from one component to another child component and that system is through props. props are to components what arguments are to functions.

Question 15

When making a list what do you need to include so React can efficiently know which items are removed or added?

Answer 15

A key. The syntax is:

arr.map(function(name) {
return <li> {name.name} </li>;
})}

Question 16

What are PropTypes?

Answer 16

PropTypes allow you to declare the “type” (string, number, function, etc) of each prop being passed to a component. Then, if a prop passed in isn’t of the declared type, you’ll get a warning in the console.

Question 17

How can you tell what ‘this.’ is referencing?

Answer 17

Look at where the function is invoked, and what is the function being called on. What the function being called on (aka “to the left of the dot”, e.g: steve.sayName()) is what this is referencing.

Question 18

What does call do?

Answer 18

Every function has a call property which can be used to invoke the function on the argument. Any “this” used in the function will refer to the argument in the function call.

E.g. sayName.call(stacey); this invokes the sayName function on the stacey object.

You can supply additional arguments for parameters as the function after stacey

Question 19

what does apply do?

Answer 19

Apply is the same as call. It invokes a function on an object, and also parses out the additional arguments for parameters for the function from the data structure you give it.

E.g.

sayName.apply(stacey, languages);

where stacey is the object sayName is being invoked on, and languages is an array data structure which will be parsed out for the parameters on sayName

Question 20

what does bind do?

Answer 20

It returns a function based on the arguments that you provide. This explicitly defines this

Question 21

What is the benefit of an arrow function over a function declaration?

Answer 21

In an arrow function “this” refers to the context being invoked on. Whereas, function “this” refer to its internal context, unless you pass a ‘this’ as a second argument when mapping