React

Question 1

What is React?

Answer 1

A JavaScript library for building user interfaces.

Question 2

What is a React element?

Answer 2

Object but it contains a typeof key that has a value of symbol(react.element)

Question 3

How do you mount a React element to the DOM?

Answer 3

Call the render method of the root object.
root.render( ).

Question 4

What is JSX?

Answer 4

it is a syntax extension to JavaScript, that allows us to describe React’s object tree using a syntax that resembles that of an HTML template.

Question 5

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

Answer 5

We need react for when the babel-loader translates the JSX it changes the syntax to React.createElement, and if React is not defined / imported it will throw an error.

Question 6

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

Answer 6

install the plugin-transform-react-jsx
devDependencies - @babel/plugin-transform-react-jsx

Question 7

What is a React component?

Answer 7

Reusable pieces of code / Functions that return a React element to be rendered to the page.

Components are like JavaScript functions, They accept inputs (called props) and they return React elements describing what should appear on the screen.

Question 8

How do you define a function component in React?

Answer 8

The simplest way to define it is with a JavaScript Function.
Name of the function component has to start with an Uppercased letter

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

Question 9

How do you mount a component to the DOM?

Answer 9

make a user defined component.
create a react element containing component name
root.render(react element)

Question 10

What are props in React?

Answer 10

objects that gets passed from one component to another

Question 11

How do you pass props to a component?

Answer 11

key value pairs that look like html attributes

< ComponentName name=”Alvaro” color=”blue”.
^ ^ ^ ^

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

surround any JavaScript expression with curly braces.

Question 13

How do you create “class” component in React?

Answer 13

define a class that extends React.Component and has a render function.

Component Name must start with an uppercase.
Component has to include extends React.Component.
Component also requires a render( ) method.

class ComponentName extends React.Component {
render( ) {
return (
<h1> { this.props.name } </h1>
);
}
}

Question 14

How do you access props in a class component?

Answer 14

The This Object in front of the props object.

<h1>Hello, {this.props.name}</h1>

this.props is the object which contains the Attributes which we have passed to the parent component.

Question 15

What is the purpose of state in React?

Answer 15

keep track of values that change overtime.

Question 16

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

Answer 16

we pass it as a prop.
if the event is a click it would be onClick as a prop

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

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.
Most often you would use IDs from your data as keys:
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

An input form element whose value is controlled by React in this way is called a “controlled component”.

Question 20

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

Answer 20

value and onChange props