React

Question 1

What are props in React?

Answer 1

props are arguments that are passed into react components

Question 2

How do you pass props to a component?

Answer 2

…

Question 3

How do you write JavaScript expressions in JSX?

Answer 3

by using {}

Question 4

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

Answer 4

By adding the @babel/plugin-transform-react-jsx to babel loader.

Question 5

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

Answer 5

because JSX is an extension of React. JSX compiles into react. Specifically React.createElement();

Question 6

What is JSX?

Answer 6

JSX is a syntax extension for describing what a UI should look like in React.

Question 7

How can you make Babel and Webpack work together?

Answer 7

By installing the babel loader and add it as a plugin to Webpack in a webpack config file.

Question 8

What is a Webpack loader?

Answer 8

Loaders are transformations that are applied to the source code of a module.

Question 9

What is a Plug-in?

Answer 9

A software component that adds a specific feature to an already existing program

Question 10

What is Babel?

Answer 10

Babel is a toolchain that is mainly used for converting ECMAScript 2015+ code into a backwards compatible version of JavaScript

Question 11

How do you mount a React element to the DOM?

Answer 11

By calling render method the the ReactDom object and passing it two arguments, the elements and the root DOM node.

Question 12

What is a React element?

Answer 12

A React element is a plain object that the ReactDOM translates into a DOM object

Question 13

What is React?

Answer 13

React is a JavaScript framework for building user interfaces

Question 14

What kind of modules can Webpack support?

Answer 14

ECMAScript, CommonJS, and AMD modules

Question 15

How do you execute Webpack with npm run?

Answer 15

by running the npm run build command. build is an npm script that bundles the modules into a main.js file.

Question 16

What is an NPM script?

Answer 16

A script in the package .json file that is used to automate repetitive tasks.

Question 17

How do you add a devDependency to a package?

Answer 17

By including the –save-dev command when installing an npm package.

Question 18

What is Webpack?

Answer 18

webpack is a static module bundler for modern JavaScript applications.

Question 19

How do you create “class” component in React?

Answer 19

class keyword, class name, extend keyword, React.components, and then declaration block.

Question 20

How do you access props in a class component?

Answer 20

this.props

Question 21

What is the purpose of state in React?

Answer 21

State is like our data model for react elements. It sets an initial value and that value cane be changed at a later time, and react will then render the element based on its current condition

Question 22

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

Answer 22

By adding it as a prop

Question 23

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

Answer 23

map method

Question 24

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

Answer 24

A string that uniquely identifies a list item among its siblings.

Question 25

What are controlled components?

Answer 25

A controlled component is a form component who’s state is managed by react.

Question 26

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

Answer 26

onChange and onSubmit

Question 27

When does React call a component’s componentDidMount method?

Answer 27

After it runs the render() method

Question 28

Name three React.Component lifecycle methods.

Answer 28

componentDidMount, componentDidUpdate, componentWillUnwmount

Question 29

How do you pass data to a child component?

Answer 29

via props