3) React Basics

Question 1

command for creating a react app?

Answer 1

npx create-react-app app-name

Question 2

command script translation: react-scripts build

Answer 2

converts code from the src folder and fitting a lighter version of that code into the public folder.

Question 3

command script translation: react-scripts build

Answer 3

creates a react app

Question 4

command script translation: react-scripts test

Answer 4

runs the test code

Question 5

command script translation: react-scripts eject

Answer 5

reveals the configuration code for Babel and webpack so that we can manage it ourselves

Question 6

What project folder actually contains the files that we wll deplooy to a server?

Answer 6

public

Question 7

What does the React library allow us to do?

Answer 7

We can write html like syntax in javascript files

Question 8

You should never use the eject script until …

Answer 8

you have to

Question 9

biggest advantage class components have over function components

Answer 9

state and lifecycle methods

Question 10

JSX syntax for a button that changes a string state property onClick

Answer 10

this.setState({ string: “Abeche” })}>

Question 11

What counts as a javascript expression inside of JSX?

Answer 11

Anything between curly braces

Question 12

what property name does JSX use for html classes? why?

Answer 12

className

because class already means something in javascript

Question 13

What method must you use to modify state in react? why?

Answer 13

this.setState()

it alertts the reactDOM that a change has been made

Question 14

what does the map() method do?

Answer 14

returns the return of whatever function passed into it, iterated over each element in the array.

Question 15

Why does react need each element in a state property array to have a unique ID

Answer 15

react needs to know which element to change if one of them changes so that it does not have to re-render everything.

Question 16

what is the purpose of this line:

class App extends Component {

Answer 16

component is an object that we get from react that comes with useful functionality.

Question 17

what is this called? (component):

import React, { Component } from “react”;

Answer 17

destructuring

Question 18

Single page applications request ___ instead of ___

Answer 18

data instead of entire pages

Question 19

What makes SPA so fast?

Answer 19

re-rendering the page is handled by javascript more so than server requests.

Question 20

where do lifecycle methods come from?

Answer 20

the Component object from React.

Question 21

What are lifecycle methods?

Answer 21

methods that get called at different stages of when the component gets rendered.

Question 22

what does the componentDidMount() method do?

Answer 22

calls whatever code is inside of it when the component is rendered onto the DOM for the first time.

Question 23

What is the significance of the bold code?

componentDidMount() {

fetch(“https://jsonplaceholder.typicode.com/users”)

.then((response) => response.json())

.then((users) => console.log(users));

}

Answer 23

presents the fetched data as a .json object (new promise) which allows us access to the information that we want.

Question 24

steps for assigning API data to a state attribute? (3)

Answer 24

1. fetch the data
2. convert data to json
3. save that json data to the state using setState()

Question 26

What kind of parameter does the setState method take?

Answer 26

an JS object

Question 27

When a component relies on API data, the state attribute for that data should be initialized as ...

Answer 27

an empty array

Question 28

What are the two ways of building components in React?

Answer 28

classes functions

Question 29

Where do the props that the components receive come from?

Answer 29

properties passed into the component tags: ex.

Question 30

what is the .children attribute of the props object?

Answer 30

anything in between the component tags: ex. **# Che**

Question 31

Where should css styling be imported?

Answer 31

into the component that it styles

Question 32

Why do we break our JSX code into so many components?

Answer 32

for reusability

Question 33

state turns into ___ when it gets passed down.

Answer 33

props

Question 34

the react developer tool is great for seeing how ...

Answer 34

information gets passed down.

Question 35

What html tag do we use for search input

Question 36

tag attribute that triggers an event everytime something changes in an element?

Answer 36

onChange

Question 37

how do you reference the value of an input field in a callback function?

Answer 37

e.target.value

Question 38

.setState is an ___ function call.

Answer 38

asynchronous

Question 39

asynchronous vs synchronous

Answer 39

wait (runs other code while waiting) vs immediate

Question 40

what is the second argument that you can put into this.setState()?

Answer 40

a callback function that allows us to do something with our state after we set it. (because asynchronous)

Question 41

What is a synthetic event?

Answer 41

an event that the react robot reports

Question 42

Why should you never use this.setState() in the render method of a component class?

Answer 42

rendering calls this.setState() and this.setState() triggers rendering; a never ending loop is created.

Question 43

const { monsters, searchField } = this.state; what is the above technique called and what is it equivalent to?

Answer 43

destructuring ## Footnote const monsters = this.state.monsters; const searchField = this.state.searchField;

Question 44

what does the filter method do?

Answer 44

acts on an array and returns all iterations of that array that meet the crtieria of the callback function.

Question 45

how does .includes() method work?

Answer 45

returns a boolean based on if the value that it is acting on includes the argument passed into it.

Question 46

When should you use a functional component over a class component?

Answer 46

when you don't think you will need state or lifecycle methods

Question 47

Where should the state be placed?

Answer 47

in a trickle-down only position to whatever components need it.

Question 48

When you write your own class methods the this. keyword gets bound ...

Answer 48

different depending on how you write that method.

Question 49

How do you make sure that the context of "this" is correct in all of the methods before any code gets written.

Answer 49

put this code in the constructor method of the component class: this.handleChange = this.handleChange.bind(this);

Question 50

what is .bind()?

Answer 50

a method on any function that returns a new function where the concept of this is set to whatever we passed to it.

Question 51

How do you avoid using the .bind() method to define the "this"

Answer 51

use an arrow function when creating the method.

Question 52

why do you not need .bind() when creating a arrow function method in a component class?

Answer 52

They automatically get lexical scoping meaning that they bind the this context to the place where they were defined in the first place (component class).

Question 53

what is the advantage of using arrow functions instead of regular functions to define custom methods in a component class?

Answer 53

dont have to use the .bind() for each method.

Question 54

Why don't we call a function "()" when it is an event handler?

Answer 54

because that envokes the function immediately, instead of only when the event occurs.

Question 55

When defining custom class methods, what type of functions should be used?

Answer 55

arrow functions.

Question 56

list the steps taken to add monsters-rolodex to github

Answer 56

1. Create a new repository 2. in the project folder enter: git remote add origin 3. add gh-pages: npm add gh-[ages 4. add a "homepage" key with a value of "homepage": "https://Che1195.github.io/monsters-rolodex", right under "private": true, 5. add two scripts: "predeploy": "npm run build", "deploy": "gh-pages -d build" 6. run "npm run deploy" in the terminal 7. run git add -A 8. git commit -m "adding files for github pages" 9. git push origin master

Question 57

What can you use to build and serve a static webpage for free? (2)

Answer 57

create react app github pages

Question 58

command line statement for creating a new file?

Answer 58

touch index.html

Question 59

The virtual DOM is a complete copy of ... but in ...

Answer 59

actual dom javascript

Question 60

What is the order that data flows between the state, actions, and views?

Answer 60

STATE updates the VIEWS which get ACTIONS that change the STATE

Question 61

When you want to use this.setState() and it involves this.state, what does the syntax look like?

Answer 61

prevProps refers to the attributes that get passed into the class component prevState refers to the previous state before anychanges were made

Question 62

When creating the constructor method and calling the props method what should be added as parameters in both?

Answer 62

props

Question 63

When should you include the second argument callback function in a custom class method that uses .setState()?

Answer 63

Do you want to manipulate or use the state somehow after the update?

Question 64

What is the mounting phase lifecycle method?

Answer 64

the phase in which the component is put on the DOM for the first time.

Question 65

what is super() essentially saying? Why is this significant to react class components?

Answer 65

Give me the functionality of all the methods in my super class. gives us access to the lifecycle methods

Question 66

What does the render() method do?

Answer 66

tells javascript that this is what the controller looks like and what it will display in terms of HTML.

Question 67

API calls are made on the ____ lifecycle method.

Answer 67

componentDidMount()

Question 68

What triggers the updating phase on our components?

Answer 68

1. New props 2. setState() 3. forceUpdate()

Question 69

Does updating a component involve remounting it?

Answer 69

no, you just update what has been changed

Question 70

What does the lifecycle method shouldComponentUpdate sit in between?

Answer 70

things the trigger rerendering, and the methods that follow.

Question 71

How do you deny a component from updating using shouldComponentUpdate?

Answer 71

have it return false

Question 72

How do you use prop/state changes to determine whether a component updates?

Answer 72

shouldComponentUpdate() { return nextProps.whatever !== this.props.whatever }

Question 73

What is the phase that makes react so special?

Answer 73

Update Phase

Question 74

what is componentWillUnmount used for?

Answer 74

code to be executed before the component is unmounted. usually for tidying up, and making the code more effecient.

Question 75

list the 5 lifecycle components covered in this section.

Answer 75

1. componentDidMount() 2. componentDidUpdate() 3. componentWillUnmount() 4. shouldComponentUpdate() 5. render()