React

Question 1

What is Webpack?

Answer 1

It’s a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS), and it can be extended to support many different assets such as images, fonts and stylesheets.

Question 2

How do you add a devDependency to a package?

Answer 2

npm add –save-dev

Question 3

What is an NPM script?

Answer 3

They are typically commands, or a string of commands, which would normally be entered at the command line in order to do something with your application. Scripts are stored in a project’s package.

Question 4

How do you execute Webpack with npm run?

Answer 4

npm build

Question 5

How are ES Modules different from CommonJS modules?

Answer 5

ES - direct support for asynchronous loading and configurable modeule loading
javascript

commonJS - designed for synchronous loading
nodeJS

Question 6

What kind of modules can Webpack support?

Answer 6

ECMAScript
CommonJs
AMD modules

Question 7

What is React?

Answer 7

A JavaScript library for building user interfaces

Question 8

What is a React element?

Answer 8

an object

Question 9

How do you mount a React element to the DOM?

Answer 9

root.render(element)

Question 10

What is Babel?

Answer 10

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 11

What is a Plug-in?

Answer 11

a software component that adds a specific feature to an existing computer program

Question 12

What is a Webpack loader?

Answer 12

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

Question 13

How can you make Babel and Webpack work together?

Answer 13

babel-loader

Question 14

What is JSX?

Answer 14

syntax extension to javascript

Question 15

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

Answer 15

Since JSX compiles into calls to React.createElement, the React library must also always be in scope from your JSX code

Question 16

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

Answer 16

transform react jsx plugin

Question 17

What is a React component?

Answer 17

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Question 18

How do you define a function component in React?

Answer 18

function keyword name, params
return jsx

Question 19

How do you mount a component to the DOM?

Answer 19

root.render

Question 20

What are props in React?

Answer 20

objects

properties, passing data from one component to another

Question 21

How do you pass props to a component?

Answer 21

you write ButtonClick type=”asfd” in angled brackets

Question 22

How do you write JavaScript expressions in JSX?

Answer 22

surround it with curly braces

Question 23

How do you create “class” component in React?

Answer 23

class Classname extends React.Component {
render()
}

Question 24

How do you access props in a class component?

Answer 24

with this

Question 25

What is the purpose of state in React?

Answer 25

The state is a built-in React object that is used to contain data or information about the component
Keep track of values that change over time

Question 26

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

Answer 26

put it in when the react element is rendered

button onClick={this.handleClick}Click Me!/button;

Question 27

What are controlled components?

Answer 27

An input form element whose value is controlled by React in this way is called a “controlled component”.

Question 28

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

Answer 28

value and onchange

Question 29

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

Answer 29

map

Question 30

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

Answer 30

id (anything unique)

pokedex.map((pokemon, index) => function