3) React Basics Flashcards
command for creating a react app?
npx create-react-app app-name
command script translation: react-scripts build
converts code from the src folder and fitting a lighter version of that code into the public folder.
command script translation: react-scripts build
creates a react app
command script translation: react-scripts test
runs the test code
command script translation: react-scripts eject
reveals the configuration code for Babel and webpack so that we can manage it ourselves
What project folder actually contains the files that we wll deplooy to a server?
public
What does the React library allow us to do?
We can write html like syntax in javascript files
You should never use the eject script until …
you have to
biggest advantage class components have over function components
state and lifecycle methods
JSX syntax for a button that changes a string state property onClick
this.setState({ string: “Abeche” })}>
What counts as a javascript expression inside of JSX?
Anything between curly braces
what property name does JSX use for html classes? why?
className
because class already means something in javascript
What method must you use to modify state in react? why?
this.setState()
it alertts the reactDOM that a change has been made
what does the map() method do?
returns the return of whatever function passed into it, iterated over each element in the array.
Why does react need each element in a state property array to have a unique ID
react needs to know which element to change if one of them changes so that it does not have to re-render everything.
what is the purpose of this line:
class App extends Component {
component is an object that we get from react that comes with useful functionality.
what is this called? (component):
import React, { Component } from “react”;
destructuring
Single page applications request ___ instead of ___
data instead of entire pages
What makes SPA so fast?
re-rendering the page is handled by javascript more so than server requests.
where do lifecycle methods come from?
the Component object from React.
What are lifecycle methods?
methods that get called at different stages of when the component gets rendered.
what does the componentDidMount() method do?
calls whatever code is inside of it when the component is rendered onto the DOM for the first time.
What is the significance of the bold code?
componentDidMount() {
fetch(“https://jsonplaceholder.typicode.com/users”)
.then((response) => response.json())
.then((users) => console.log(users));
}
presents the fetched data as a .json object (new promise) which allows us access to the information that we want.
steps for assigning API data to a state attribute? (3)
- fetch the data
- convert data to json
- save that json data to the state using setState()
What kind of parameter does the setState method take?
an JS object
When a component relies on API data, the state attribute for that data should be initialized as …
an empty array
What are the two ways of building components in React?
classes
functions
Where do the props that the components receive come from?
properties passed into the component tags:
ex. <cardlist></cardlist>
what is the .children attribute of the props object?
anything in between the component tags:
ex.
<cardlist></cardlist>
# Che
Where should css styling be imported?
into the component that it styles
Why do we break our JSX code into so many components?
for reusability
state turns into ___ when it gets passed down.
props
the react developer tool is great for seeing how …
information gets passed down.
What html tag do we use for search input
<input></input>
tag attribute that triggers an event everytime something changes in an element?
onChange
how do you reference the value of an input field in a callback function?
e.target.value
.setState is an ___ function call.
asynchronous
asynchronous vs synchronous
wait (runs other code while waiting)
vs
immediate
what is the second argument that you can put into this.setState()?
a callback function that allows us to do something with our state after we set it. (because asynchronous)
What is a synthetic event?
an event that the react robot reports
Why should you never use this.setState() in the render method of a component class?
rendering calls this.setState() and this.setState() triggers rendering; a never ending loop is created.
const { monsters, searchField } = this.state;
what is the above technique called and what is it equivalent to?
destructuring
const monsters = this.state.monsters;
const searchField = this.state.searchField;
what does the filter method do?
acts on an array and returns all iterations of that array that meet the crtieria of the callback function.
how does .includes() method work?
returns a boolean based on if the value that it is acting on includes the argument passed into it.
When should you use a functional component over a class component?
when you don’t think you will need state or lifecycle methods
Where should the state be placed?
in a trickle-down only position to whatever components need it.
When you write your own class methods the this. keyword gets bound …
different depending on how you write that method.
How do you make sure that the context of “this” is correct in all of the methods before any code gets written.
put this code in the constructor method of the component class:
this.handleChange = this.handleChange.bind(this);
what is .bind()?
a method on any function that returns a new function where the concept of this is set to whatever we passed to it.
How do you avoid using the .bind() method to define the “this”
use an arrow function when creating the method.
why do you not need .bind() when creating a arrow function method in a component class?
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).
what is the advantage of using arrow functions instead of regular functions to define custom methods in a component class?
dont have to use the .bind() for each method.
Why don’t we call a function “()” when it is an event handler?
because that envokes the function immediately, instead of only when the event occurs.
When defining custom class methods, what type of functions should be used?
arrow functions.
list the steps taken to add monsters-rolodex to github
- Create a new repository
- in the project folder enter: git remote add origin <repository></repository>
- add gh-pages: npm add gh-[ages
- add a “homepage” key with a value of “homepage”: “https://Che1195.github.io/monsters-rolodex”, right under “private”: true,
- add two scripts:
“predeploy”: “npm run build”,
“deploy”: “gh-pages -d build”
- run “npm run deploy” in the terminal
- run git add -A
- git commit -m “adding files for github pages”
- git push origin master
What can you use to build and serve a static webpage for free? (2)
create react app
github pages
command line statement for creating a new file?
touch index.html
The virtual DOM is a complete copy of … but in …
actual dom
javascript
What is the order that data flows between the state, actions, and views?
STATE updates the VIEWS which get ACTIONS that change the STATE
When you want to use this.setState() and it involves this.state, what does the syntax look like?
prevProps refers to the attributes that get passed into the class component
prevState refers to the previous state before anychanges were made
When creating the constructor method and calling the props method what should be added as parameters in both?
props
When should you include the second argument callback function in a custom class method that uses .setState()?
Do you want to manipulate or use the state somehow after the update?
What is the mounting phase lifecycle method?
the phase in which the component is put on the DOM for the first time.
what is super() essentially saying? Why is this significant to react class components?
Give me the functionality of all the methods in my super class.
gives us access to the lifecycle methods
What does the render() method do?
tells javascript that this is what the controller looks like and what it will display in terms of HTML.
API calls are made on the ____ lifecycle method.
componentDidMount()
What triggers the updating phase on our components?
- New props
- setState()
- forceUpdate()
Does updating a component involve remounting it?
no, you just update what has been changed
What does the lifecycle method shouldComponentUpdate sit in between?
things the trigger rerendering, and the methods that follow.
How do you deny a component from updating using shouldComponentUpdate?
have it return false
How do you use prop/state changes to determine whether a component updates?
shouldComponentUpdate() {
return nextProps.whatever !== this.props.whatever
}
What is the phase that makes react so special?
Update Phase
what is componentWillUnmount used for?
code to be executed before the component is unmounted. usually for tidying up, and making the code more effecient.
list the 5 lifecycle components covered in this section.
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
- shouldComponentUpdate()
- render()
