React

Question 1

What is React?

Answer 1

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

Question 2

What is a React element?

Answer 2

plain objects that describe what you want to see on the screen.

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render(element, container)

Using the ReactDOM.render( ) method:

ReactDOM.render(element, container[, callback])

ReactDOM.render( ) method takes a JSX expression, creates a corresponding tree of DOM nodes, and adds that tree to the DOM

Question 4

What is JSX?

Answer 4

JSX is a syntax extension to JavaScript that produces React “elements”
A nice and readable way of creating elements in React

Question 5

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

Answer 5

You need to import react and react-dom in order to create DOM elements in React

Question 6

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

Answer 6

Using a babel-loader along with a babel plugin to convert JSX

Question 7

What is a React component?

Answer 7

Pieces of reusable code
Components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

independent and reusable bits of code.
They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Question 8

How do you define a function component in React?

Answer 8

The simplest way to define a component is to write a JavaScript function.
You can also use an ES6 class to define a component.

By writing a JavaScript function that accepts props as a single argument and returns a React element

Question 9

How do you mount a component to the DOM?

Answer 9

Using ReactDOM.render( ) method - use the function name as the type

Question 10

What are props in React?

Answer 10

They are objects used to pass data between react components

Question 11

How do you pass props to a component?

Answer 11

props as a parameter in your function/class

Add the prop to your JSX like you would add an attribute to an HTML tag

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

wrap it in { } curly braces

Question 13

How do you create “class” component in React?

Answer 13

Begin with the class keyword followed by the className followed by extends React.Component and you must define the render( ) method.

Question 14

How do you access props in a class component?

Answer 14

this

Question 15

What is the purpose of state in React?

Answer 15

to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders
To store data that could be prone to change, and if it does change, trigger the render() method to update the DOM.
to control what you want the user to see on the webpage
To indicate a component’s current status*

Question 16

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

Answer 16

By assigning it to a prop on the react element - the prop starts with on & is in camelCase - the event handler is in camelCase.

As props to child components
as an attribute

Question 17

What are controlled components?

Answer 17

An input form element whose value is controlled by state

Question 18

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

Answer 18

value and onChange / handleSubmit and handleChange

Question 19

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

Answer 19

map ( ) method

Question 20

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

Answer 20

id or anything unique

Question 21

When does React call a component’s componentDidMount method?

Answer 21

After render, but before page is finished loading

Question 22

Name three React.Component lifecycle methods.

Answer 22

1. componentDidMount() - gets called right after first render
2. componentDidUpdate() - is given previous state & previous props. If state changes, this will be called once it has already been changed
3. componentWillUnmount() - called right before the component is removed from the DOM

constructor, render, componentDidMount

Question 23

How do you pass data to a child component?

Answer 23

as a prop to the child component