React

Question 1

What is React?

Answer 1

a JavaScript library for creating user interfaces.

Question 2

What is a React element?

Answer 2

Plain object describing a component instance or DOM node and its desired properties.

Question 3

How do you mount a React element to the DOM?

Answer 3

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

container is where you want to add the element.

Question 4

What is JSX?

Answer 4

a syntax extension to JavaScript; produces React “elements”; fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, …children) function.

Question 5

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

Answer 5

Since JSX compiles into calls to React.createElement, the React library must also always be in scope from your JSX code.

Babel transform it into create call, will be undefined???

Question 6

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

Answer 6

Babel compiles JSX down to React.createElement() calls.

Use babel-loader and @babel/plugin-transform-react-jsx packages.

Question 7

What is a React component?

Answer 7

Takes input and returns a React element

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions.

They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Question 8

How do you define a function component in React?

Answer 8

First letter has to be capitalized, has to return a react element

function Welcome(props) {
  return &lth1>Hello, {props.name}&lt/h1>;
}

Question 9

How do you mount a component to the DOM?

Answer 9

function Welcome(props) {
  return &lth1>Hello, {props.name}&lt/h1>;
}

const element = &ltWelcome name=”Sara” />;
ReactDOM.render(
element, document.getElementById(‘root’)
);

Question 10

What are props in React?

Answer 10

object passed into a React component

Question 11

How do you pass props to a component?

Answer 11

const element = (
    &ltComponentName property-name="string" /&gt
    &ltComponentName property-name={1 + 2} /&gt
);

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

Inside curly brackets {}

Question 13

How do you create “class” component in React?

Answer 13

To define a React component class, you need to extend React.Component. The only method you must define in a React.Component subclass is called render(). All the other methods described on this page are optional.

class Welcome extends React.Component {
   render() {
     return &lth1&gtHello, {this.props.name}&lt/h1>
   }
 }

Question 14

How do you access props in a class component?

Answer 14

use ‘this’ object

this.props.name

Question 15

What is the purpose of state in React?

Answer 15

State is data model in react; used in render logic to determine what the user should see; to keep of track of values that change over time

State is similar to props, but it is private and fully controlled by the component.

Store property values belonging to component

Question 16

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

Answer 16

Pass a prop in react element?

&ltbutton onClick={activateLasers}&gt
Activate Lasers
&lt/button&gt

pass function in curly bracket {}

Question 17

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

Answer 17

map() method

Question 18

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

Answer 18

A string uniquely to identify each sibling preferably an id

Use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys. When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort

Question 19

What are controlled components?

Answer 19

An input form element whose value is controlled by React

Question 20

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

Answer 20

value and onChange