React.js

Question 1

What is React?

Answer 1

React is a JavaScript library for building user interfaces.

Question 2

What is a React element?

Answer 2

A React Element is what gets returned from components.

It’s an object that virtually describes the DOM nodes that a component represents.

An element is a 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

By using ReactDOM.render

Question 4

What is JSX?

Answer 4

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

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

JSX is 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 5

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

Answer 5

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

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 is a React component?

Answer 7

Conceptually, components are like JavaScript functions.

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

Think about each piece in isolation.

Question 8

How do you define a function component in React?

Answer 8

Function Name (props) {
return (rendered React elements)
}

Question 9

How do you mount a component to the DOM?

Answer 9

By using ReactDOM.render on the react element

Question 10

What are props in React?

Answer 10

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

Question 11

How do you pass props to a component?

Answer 11

’ ‘ if it’s a string and { } if not.

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

put them in curly braces

Question 13

How do you create “class” component in React?

Answer 13

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

Question 14

How do you access props in a class component?

Answer 14

this.props

Question 15

What is the purpose of state in React?

Answer 15

To keep track of values that will change over time

Question 16

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

Answer 16

Pass the event handler to the React element’s prop
// pass in a function as an event handler

Question 17

What are controlled components?

Answer 17

a component whose input’s value is always driven by the React state. you can now pass the value to other UI elements too, or reset it from other event handlers.

Question 18

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

Answer 18

Value and onChange

Question 19

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

Answer 19

.map()

Question 20

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

Answer 20

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:

Question 21

When does React call a component’s componentDidMount method?

Answer 21

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

Question 22

Name three React.Component lifecycle methods.

Answer 22

constructor, render, componentDidMount, didunmount, update, error handling

Question 23

How do you pass data to a child component?

Answer 23

through props. (passing a prop as a javascript expression