Basics

Question 1

What are React elements?

Answer 1

Elements are what components are “made of”

Element —> <div></div>

Question 2

What are components?

Answer 2

• Reusable pieces that make up UI
• Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
• Such functions are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs.
• Components must return a single root element.

Question 3

Props

Answer 3

• When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”.
• React is pretty flexible but it has a single strict rule: All React components must act like pure functions with respect to their props

Question 4

React is pretty flexible but it has a single strict rule, what is it?

Answer 4

All React components must act like pure functions with respect to their props.

Question 5

What are pure functions?

Answer 5

They always return the same result for the same inputs.

Question 6

How is state different from props?

Answer 6

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

Question 7

What is an additional feature given to components defined as classes?

Answer 7

Local state is exactly that: a feature available only to classes.

Question 8

What is a class constructor?

Answer 8

The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name “constructor” in a class. A SyntaxError will be thrown if the class contains more than one occurrence of a constructor method.

A constructor can use the super keyword to call the constructor of a parent class.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get area() {
    return this.calcArea();
  }

calcArea() {
return this.height * this.width;
}
}

const square = new Rectangle(10, 10);

console.log(square.area);

Question 9

Where is state defined?

Answer 9

In the class constructor

Question 10

What is mount and unmount?

Answer 10

mount - is rendered to the DOM for the first time. This is called “mounting” in React.

unmount - whenever the DOM produced by the component is removed. This is called “unmounting” in React.

Question 11

What are three things you should know about setState()

Answer 11

• Do Not Modify State Directly
  For example, this will not re-render a component:

// Wrong
this.state.comment = 'Hello';
Instead, use setState():

// Correct
this.setState({comment: 'Hello'});
The only place where you can assign this.state is the constructor.

• State Updates May Be Asynchronous
  React may batch multiple setState() calls into a single update for performance.

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

For example, this code may fail to update the counter:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});
To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

State Updates are Merged

When you call setState(), React merges the object you provide into the current state.

For example, your state may contain several independent variables:

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }
Then you can update them independently with separate setState() calls:

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }
The merging is shallow, so this.setState({comments}) leaves this.state.posts intact, but completely replaces this.state.comments.

Question 12

When does componentDidMount() run?

Answer 12

after the component output has been rendered to the DOM.

Question 13

If you don’t use something in render(), it should it be in the state?

Answer 13

No

Question 14

Why state is often called local or encapsulated

Answer 14

It is not accessible to any component other than the one that owns and sets it.

Question 15

What does this mean? –> import React from ‘react’

Answer 15

Import everything in the react module into the variable React

Question 16

What two parameters does the render method in react-dom take?

Answer 16

component to render,

What DOM element it should render to

Question 17

How to comment in JSX?

Answer 17

{/* */}

Question 18

How do you format a Stateless functional component

Answer 18

const Header = (props) => {
  return (
)
}

//you don’t need this.props becuase it is not a react component, it is just a function

Question 19

How do you setup react router?

Answer 19

import { BrowserRouter, Match, Miss}

const Root = ()=> {
return (

<div>

</div>

)
}

Question 20

Why do you have to bind methods to react components in es6 classes?

Answer 20

Render method is the only method that binds to the component. Any other methods that use this will not automatically bind to the component. The keyword this inside the render method is bound to the component. the keyword this in methods defined in the es6 class are not bound to anything.

To fix this you must bind the the method to the component in a constructor method, bind it inside the render method, or define it in a function like this–> onSubmit={(e) => this.goToStore(e)}

Question 21

What are Controlled Components?

Answer 21

In HTML, form elements such as , , and typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().

We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input.

Question 22

How do you update a property of an object in state?

Answer 22

this.setState({
result: Object.assign({}, this.state.result, { hits: updatedHits })
});

OR

const hits = this.state.result.hits.filter(isNotId);
    this.setState({
      result: { ...this.state.result, hits: hits }    
    });

Question 23

How would you conditionally render a component or element from within the render method?

Answer 23

{result
?
: null
}

OR

{ result &&

}

Question 24

Pretend you are in the Table component. How would you assign variable names to all the passed props into table using es6?

Answer 24

const { list, pattern, onDismiss, isSearched } = this.props;

Question 25

When is the render method called?

Answer 25

The render() method is called during the mount process too, but also when the component updates.

Question 26

What are the 4 steps of the mounting process?

Answer 26

1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount()

Question 27

How do you update a property of an object in state?

Answer 27

this.setState({
result: Object.assign({}, this.state.result, { hits: updatedHits })
});

Question 28

How would you conditionally render a component or element from within the render method?

Answer 28

{result
?
: null
}

Question 29

How do you prevent default behavior of a form in react?

Answer 29

event.preventDefault();

Question 30

How do you import a variable as an alias?

Answer 30

import { firstname as foo } from ‘./file1.js’;

Question 31

How would you write proptypes for this stateless functional component?

const Button = ({ onClick, className = ‘’, children,}) =>

{children}

Answer 31

import PropTypes from ‘propTypes’

Button.propTypes = {
onClick: PropTypes.func,
className: PropTypes.string,
children: PropTypes.node,
};

Question 32

What is React?

Answer 32

React is an open-source JavaScript library created by Facebook for building complex, interactive UIs in web and mobile applications.

The key point in this answer is that React’s core purpose is to build UI components; it is often referred to as just the “V” (View) in an “MVC” architecture. Therefore it has no opinions on the other pieces of your technology stack and can be seamlessly integrated into any application.