React

Question 1

What is a Webpack?

Answer 1

Module bundler (that bundles JavaScript files for usage in a browser)

Question 2

How do you add a devDependenccy to a package?

Answer 2

npm install -D packagename

Question 3

What is an NPM script?

Answer 3

A way to bundle common shell commands for a project

Question 4

How do you execute Webpack with npm run?

Answer 4

npm run build

“build” is written in the “scripts” of the package.json file - it can be named something else too

Question 5

How are ES modules different from CommonJS modules?

Answer 5

o ES modules import everything before the code is executed unlike CommonJS modules which load dependencies on demand while the code is getting executed

o Different syntax (CommonJS uses require and ES uses import)

o ES module syntax is part of the language but CommonJS modules need a loader (it’s not an official standard- instead it’s a community library)

Question 6

What kind of modules can Webpack support?

Answer 6

o ECMAScript modules
o CommonJS modules
o AMD modules
o Web Assembly

Question 7

What is React?

Answer 7

A JavaScript library for building UI

Actually a framework

Question 8

What is a React element?

Answer 8

Plain object that describes what a DOM should look like

Question 9

How do you mount a React element to the DOM?

Answer 9

ReactDOM.render(element, [container])

Question 10

What is Babel?

Answer 10

JavaScript compiler used to convert latest ECMAScript code into a backwards compatible version of JS

Question 11

What is a Webpack loader?

Answer 11

Tool that pre-processes a file before importing with plug-ins

(Tool that helps webpacks interpret and translate files in order to bundle static assets)

Question 12

How can you make Babel and Webpack work together?

Answer 12

npm install babel-loader as a devDependency

Question 13

What is a Plug-in?

Answer 13

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

Question 14

What is JSX?

Answer 14

o JavaScript XML

o Syntax extension to JavaScript

Question 15

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

Answer 15

Because it’s used in the final code of babel outputs (babel calls React.createElement in its output so ‘createElement’ would not work without the ‘React’ object)

Question 16

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

Answer 16

1. npm install @babel/plugin-transform-react-jsx

2. npm install babel-loader

Question 17

What is a React component?

Answer 17

Function or a class that generates React elements

Question 18

How do you define a function component in React?

Answer 18

By writing a JavaScript function (and the function name MUST start with a capital letter)

Question 19

How do you mount a component to the DOM?

Answer 19

ReactDOM.render(ReactElementName, container)

Question 20

What are props in React?

Answer 20

o Arguments passed into React components

o Properties of an object

Question 21

How do you pass props to a component?

Answer 21

By giving it key:value pairs

Question 22

How do you write JavaScript expressions in JSX?

Answer 22

By surrounding it with curly braces

Question 23

How do you create “class” component in React?

Answer 23

class  extends React.Component {
    render () {
  }
}

Question 24

How do you access props in a class component?

Answer 24

this.prop.keyName

Question 25

What is the purpose of state in React?

Answer 25

To indicate a component’s current status

Question 26

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

Answer 26

As props to child components

Question 27

What are controlled components?

Answer 27

An input form element whose value is controlled by React

Question 28

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

Answer 28

• onChange

- value

Question 29

When does React call a component’s componentDidMount method?

Answer 29

After the first successful render

Question 30

Name three React.Component lifecycle methods.

Answer 30

o componentDidMount
o componentDidUpdate
o componentWillUnmount

and
o shouldComponentUpdate

Question 31

How do you pass data to a child component?

Answer 31

Using props