React

Question 1

[React Elements]

What is React?

Answer 1

A JavaScript library / framework for building user interfaces

Question 2

[React Elements]

What is a React element?

Answer 2

a plain JS object with a list of properties describing what an actual HTML element should have

Question 3

[React Elements]

How do you mount a React element to the DOM?

Answer 3

calling the render method of the root object and passing a real DOM element as an argument

Question 4

What is the difference between library and a framework?

Answer 4

Library - code already made by someone else

Framework - have IoC (inversion of control)

Question 5

[Babel Intro]

What is Babel?

Answer 5

A JavaScript compiler

Converts ECMAScript 2015+ code into backwards compatible version of JS

Question 6

[Babel Intro]

What is a Plug-in?

Answer 6

a software add-on that enhances the software

Question 7

[Babel Intro]

What is a Webpack loader?

Answer 7

preprocesses the code, creates a main.js that is ready to run in the browser

Question 8

[Babel Intro]

How can you make Babel and Webpack work together?

Answer 8

babel loader

Question 9

[React JSX]

What is JSX?

Answer 9

A syntax extension to JavaScript

Question 10

[React JSX]

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

Answer 10

because JSX produces React elements

Question 11

[React JSX]

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

Answer 11

with webpack, babel and babel loader, and jsx plug-in

Question 12

[React Function Components]

What is a React component?

Answer 12

JavaScript functions or class that take props and returns React elements

Question 13

[React Function Components]

How do you define a function component in React?

Answer 13

function ComponentName (props) {
           return (
                      < Text Content { destructure: prop.property } / >
           )
};

Question 14

[React Function Components]

How do you mount a component in the DOM?

Answer 14

create a react element through the component and add it to the root

Question 15

[React Props & Expressions]

What are props in React?

Answer 15

arbitrary inputs

Question 16

[React Props & Expressions]

How do you pass props to a component?

Answer 16

pass it in the component function argument

Question 17

[React Props & Expressions]

How do you write JavaScript expressions in JSX?

Answer 17

using { }

Question 18

[React Class Components]

How do you create ‘class’ component in React?

Answer 18

class CustomEle extends React.Component {
       render() {
            return ( React element )
       }
}

Question 19

[React Class Component]
How do you access props in a class component?

Answer 19

this.props.propName

Question 20

[React Events and State]

What is the purpose of state in React?

Answer 20

a data model of things that will change over time in a React element

Question 21

[React Events and State]

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

Answer 21

create the handler method
bind the handler to the props
< element event={this.handler} /

Question 22

[React form controls]

What are controlled components?

Answer 22

Components that have limitations but take in inputs from users

Question 23

[React Form Controls]

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

Answer 23

onChange

value prop

Question 24

[React Rendering Lists]

What ‘array’ method is commonly used to create a list of React elements?

Answer 24

.map()

Question 25

[React Rendering Lists]

What is the best value to use as a ‘key’ prop when rendering lists?

Answer 25

unique string IDs

Question 26

[Fetch in React]

When does React call a component’s ‘componentDidMount’ method?

Answer 26

after a component is mounted and rendered successfully (inserted in the DOM tree)

Question 27

[Fetch in React]

Name three React.Component lifecycle methods.

Answer 27

constructor()
render()
componentDidMount()

Question 28

[Fetch in React]

How do you pass data to a child component?

Answer 28

pass that into a child component’s props