Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

React Udemy Course.js > 3) React Basics > Flashcards

3) React Basics Flashcards

1
Q

command for creating a react app?

A

npx create-react-app app-name

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

command script translation: react-scripts build

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

command script translation: react-scripts build

A

creates a react app

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

command script translation: react-scripts test

A

runs the test code

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

command script translation: react-scripts eject

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

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

A

public

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What does the React library allow us to do?

A

We can write html like syntax in javascript files

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

You should never use the eject script until …

A

you have to

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

biggest advantage class components have over function components

A

state and lifecycle methods

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What counts as a javascript expression inside of JSX?

A

Anything between curly braces

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

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

A

className

because class already means something in javascript

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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

A

this.setState()

it alertts the reactDOM that a change has been made

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

what does the map() method do?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

what is the purpose of this line:

class App extends Component {

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

what is this called? (component):

import React, { Component } from “react”;

A

destructuring

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Single page applications request ___ instead of ___

A

data instead of entire pages

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What makes SPA so fast?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

where do lifecycle methods come from?

A

the Component object from React.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What are lifecycle methods?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

what does the componentDidMount() method do?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is the significance of the bold code?

componentDidMount() {

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

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

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

}

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

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

A
  1. fetch the data
  2. convert data to json
  3. save that json data to the state using setState()
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What kind of parameter does the setState method take?

A

an JS object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

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

A

an empty array

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What are the two ways of building components in React?

A

classes

functions

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Where do the props that the components receive come from?

A

properties passed into the component tags:

ex. <cardlist></cardlist>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

what is the .children attribute of the props object?

A

anything in between the component tags:

ex.

<cardlist></cardlist>

# Che

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Where should css styling be imported?

A

into the component that it styles

32
Q

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

A

for reusability

33
Q

state turns into ___ when it gets passed down.

A

props

34
Q

the react developer tool is great for seeing how …

A

information gets passed down.

35
Q

What html tag do we use for search input

A

<input></input>

36
Q

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

A

onChange

37
Q

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

A

e.target.value

38
Q

.setState is an ___ function call.

A

asynchronous

39
Q

asynchronous vs synchronous

A

wait (runs other code while waiting)

vs

immediate

40
Q

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

A

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

41
Q

What is a synthetic event?

A

an event that the react robot reports

42
Q

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

A

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

43
Q

const { monsters, searchField } = this.state;

what is the above technique called and what is it equivalent to?

A

destructuring

const monsters = this.state.monsters;

const searchField = this.state.searchField;

44
Q

what does the filter method do?

A

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

45
Q

how does .includes() method work?

A

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

46
Q

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

A

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

47
Q

Where should the state be placed?

A

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

48
Q

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

A

different depending on how you write that method.

49
Q

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

A

put this code in the constructor method of the component class:

this.handleChange = this.handleChange.bind(this);

50
Q

what is .bind()?

A

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

51
Q

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

A

use an arrow function when creating the method.

52
Q

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

A

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).

53
Q

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

A

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

54
Q

Why don’t we call a function “()” when it is an event handler?

A

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

55
Q

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

A

arrow functions.

56
Q

list the steps taken to add monsters-rolodex to github

A
  1. Create a new repository
  2. in the project folder enter: git remote add origin <repository></repository>
  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”

  1. run “npm run deploy” in the terminal
  2. run git add -A
  3. git commit -m “adding files for github pages”
  4. git push origin master
57
Q

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

A

create react app

github pages

58
Q

command line statement for creating a new file?

A

touch index.html

59
Q

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

A

actual dom

javascript

60
Q

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

A

STATE updates the VIEWS which get ACTIONS that change the STATE

61
Q

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

A

prevProps refers to the attributes that get passed into the class component

prevState refers to the previous state before anychanges were made

62
Q

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

A

props

63
Q

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

A

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

64
Q

What is the mounting phase lifecycle method?

A

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

65
Q

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

A

Give me the functionality of all the methods in my super class.

gives us access to the lifecycle methods

66
Q

What does the render() method do?

A

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

67
Q

API calls are made on the ____ lifecycle method.

A

componentDidMount()

68
Q

What triggers the updating phase on our components?

A
  1. New props
  2. setState()
  3. forceUpdate()
69
Q

Does updating a component involve remounting it?

A

no, you just update what has been changed

70
Q

What does the lifecycle method shouldComponentUpdate sit in between?

A

things the trigger rerendering, and the methods that follow.

71
Q

How do you deny a component from updating using shouldComponentUpdate?

A

have it return false

72
Q

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

A

shouldComponentUpdate() {

return nextProps.whatever !== this.props.whatever

}

73
Q

What is the phase that makes react so special?

A

Update Phase

74
Q

what is componentWillUnmount used for?

A

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

75
Q

list the 5 lifecycle components covered in this section.

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

React Udemy Course.js (12 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions