React and JSX

Question 1

What is JSX?

Answer 1

JSXis an XML-like syntax extension to ECMAScript w/o any defined semantics.

It is calledJSX, and it is a syntax extension to JavaScript.
Used to write HTML tags inside JavaScript.

JSXis an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code

Question 2

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

Answer 2

JSX works with React.render() or createElement(); belongs to React

Question 3

What is a React component?

Answer 3

Conceptually, components are like JavaScript functions.

Components let you split the UI into independent, reusable pieces.

Think about each piece in isolation.

Question 4

How do you define a function component in React?

Answer 4

Function name (props) {
  Return (rendered React elements)
}

Question 5

How do you mount a component to the DOM?

Answer 5

By using ReactDOM.render

Question 6

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

Answer 6

Use babel loader and install the babel-plugin that transforms React JSX

Question 7

What are props in React?

Answer 7

They are objects; Props stand for properties; used to pass data between React components

Question 8

How do you pass props to a component?

Answer 8

As an argument

Question 9

How do you write JavaScript expressions in JSX?

Answer 9

Put them in brackets

Question 10

How do you create “class” component in React?

Answer 10

keyword class name keyword extends react.component {
   render() {
      return the react elements
  }
}

Question 11

How do you access props in a class component?

Answer 11

this.props

Question 12

What is the purpose of state in React?

Answer 12

To keep track of values that will change over time

Question 13

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

Answer 13

Pass the event handler to the react React element’s prop

Question 14

What are controlled components?

Answer 14

A component who value is controlled by React

Question 15

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

Answer 15

Value and onChange

Question 16

WhatArraymethod is commonly used to create a list of React elements?

Answer 16

.map()

Question 17

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

Answer 17

.id

Question 18

When does React call a component’s componentDidMount method?

Answer 18

After render() the first time;

componentDidMount()is invoked immediately after a component is mounted (inserted into the tree).

Question 19

Name three React.Component lifecycle methods.

Answer 19

componentDidMount, componentDidUpdate,

componentWillUnmount

Question 20

How do you pass data to a child component?

Answer 20

Props

Question 21

Describe React component lifecycle

Answer 21

// — mounting phase —
// constructor -> render -> componentDidMount -> …time passes … ->

// —updating phase —
// setState() or parent re-renders -> render (again!) -> componentDidUpdate