React

Question 1

What is React?

Answer 1

A JavaScript framework for building user interfaces

Question 2

What is a React element?

Answer 2

A React Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents.

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render(element, $container)

Question 4

What is Babel?

Answer 4

• JavaScript Compiler

- Converts ES2015+ code into backwards compatible javascript for older browsers or environments

Question 5

What is a Plug-in?

Answer 5

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

Question 6

What is a Webpack loader?

Answer 6

A Webpack loader is a node module that applies transformations to the source code to of a module and outputs JavaScript

Question 7

How can you make Babel and Webpack work together?

Answer 7

Install all dev dependencies

• webpack
• webpack-cli
• babel-loader
• @babel/core
• @babel/plugin-transformation-react-jsx

Configure webpack.config.js file to

• use babel loader as the loader
• use plugin transform react jsx

Question 8

What is JSX?

Answer 8

JSX is a syntax extension to JavaScript

Question 9

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

Answer 9

So Babel understands to compile JSX to JS

Question 10

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

Answer 10

• Specify in webpack.config.js to check for jsx to bundle
• Babel loader sends preprocessed files to babel core
• Plugin for convert JSX is read
• Converts to JS

Question 11

What is a React component?

Answer 11

Components are like functions and classes, they accept props and return a React element

Question 12

How do you define a function component in React?

Answer 12

• Use JavaScript function syntax

function Example(prop) {}

Question 13

How do you mount a component to the DOM?

Answer 13

ReactDOM.render(element, container)

Question 14

What are props in React?

Answer 14

Props are an object of arguments passed into React components

Question 15

How do you pass props to a function component ?

Answer 15

Pass props in a function parameter

Pass props into constructor function and define this.props in the constructor

Question 16

How do you write JavaScript expressions in JSX?

Answer 16

Expression inside of curly brackets

{ 1 + 2 }

Question 17

How do you create “class” component in React?

Answer 17

• class Example extends React.Component

- render method & return React element

Question 18

How do you access props in a class component?

Answer 18

• Pass props in the constructor of a class

- this.props

Question 19

What is the purpose of state in React?

Answer 19

Data model that represents info about the current state

Question 20

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

Answer 20

• React event handlers are passes as props
• If function will be invoked by event, pass this.functionName inside curly brackets
• Bind this is necessary if the function is not being manually invoked

Question 21

When does React call a component’s componentDidMount method?

Answer 21

• After constructor

- After first render

Question 22

Name three React.Component lifecycle methods.

Answer 22

• componentDidMount
• componentDidUpdate
• componentWillUnmount

*Render and constructor are also lifecycle methods

Question 23

How do you pass data to a child component?

Answer 23

Through props