Brainscape's Knowledge GenomeTM

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


See full index

React- Flatiron > React All > Flashcards

React All Flashcards

1
Q

What is react?

A

front end framework for Javascript

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

Front end framework

A

standardized way of creating and deploying parts of a web applications

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

3 features of React

A
  1. declarative, component-based, learn once, write everywhere
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Declarative programming

A

describes what to accomplish and leaves how to do the action up to the program

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

imperative programming

A

scribe each step/action a program should make and how the program should do the actions step by step

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

what are components

A

building clocks of our web page that handles their own data and UI logic

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

why is react a learn once and write everywhere program

A

works in different environments and easy to learn other react languages

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

how do you launch react project

A

npm start

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

what is babel

A

transpiler that converts modern JS and custom code like JSX into compatible JS

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

what is webpack

A

bundler that takes all our work along with any required dependecy code and packages it all together in a transferable bundle

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

ESLint

A

linting and code analysis functionality to help improve code and reinforce best practices

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

JS packages

A

a file or set of files full of existing, reusable code

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

what is npm

A

package manager for Node that helps organize JS packages in relation to our work

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

can you use packages to build other packages

A

yes

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

what is package.json

A

file that tells you and npm what packages are required for a specific JS application

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

what command reads the packages.json dependency’s

A

npm install

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

where does npm install download the packages from

A

npmjs.com

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

node_modules

A

local environment creates this folder to hold downloaded packages

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

npm install package name

A

how to add a specific package

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

npm init

A

creates package.json and includes specific content to include in the file

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

npm test or learn test

A

runs the test script found in package.json

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

render

A

method that comes from react-dom package

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

what 2 arguments does render take

A

react component to render
dom element where we want the component to be rendered

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

App.js

A

top level that cantains app compoents

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

how do you pull content form node_modules folder

A

import

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

what creates a tree of dependencies by exporting component

A

export

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

what lets you split the UI into independent resuable pieces and think about each in isolation

A

components

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

what 2 things does components help with

A

help with functionality and presentation of code

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

what is boilerplate code

A

sections of code that are repeated in multiple places with no variations

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

what is the end goal of components

A

contain a snippet of code that describes what they should render to the DOM

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

how do you name components

A

declarative word that is capitalized

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

syntax for creating component

A

(function)
function Comment (){
return (

<div> comments</div>

)}

(arrow)
const Comment = () => <div> comment</div>

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

syntax for creating class components

A

class Comment extends React.Component {
render() {
return <div> comments </div>}
}

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

minimum component requirements

A
  1. must be a function that starts with a capital letter
  2. must return JSX
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

module code

A

code that is separated into segments (modules) where each file represents a feature or specific functionality

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

why use module code?

A

-stricter variable scope
-single responsibility
-easier to navigate
-easier to debug
- produce clean and dry code (reusable)

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

what does import/export variable allow us to do?

A

define variables in one file and access them in another file

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

export default

A

export ONE variable from file to be used in another file

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

export default syntax

A

export default ComponentName; (goes at end of file)

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

Named exports

A

export multiple variables from a file

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

named exports syntax

A

export{varaible1, variable2}
or
directly next to variable
export function variable1 (){
}

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

import

A

takes in the variables that have been exported and adds them to other files

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

syntax for importing multiple variables

A

import* as variableBeingCalled from “relative path”

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

syntax for importing specific variables

A

import{variable} from “relative path”

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

syntax for importing node_modules

A

import React from “react’

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

what is JSX

A

syntax extension of JS that creates a special/ productive marriage of HTML and JS

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

what is JSX short for

A

Javascript XML

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

6 characteristics of JSX

A
  1. is not a string
  2. is the return value of a function component
  3. contains JS in {}
  4. works with expressions not statements (can’t use if (){})
  5. can render other components in a component
  6. component must return one JSX element
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

props

A

parameter in components that pass information from parent to child component

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

props syntax

A

function parentFunction (){
return <ChildComponent text = “Hello”}

the prop passed to childComponent is Hello

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

what data types can props take

A

any data types (number, function, boolean, etc) execept strings

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

how are props accessed

A

assessed in child component via an object that is passed into our component function as an object

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

default value

A

assigns value to prop if component doesnt receive prop value from parent

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

what is used to iterate a list of array to component object

A

.map

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

what must you add when using .map

A

key

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

what is key value

A

unique value associated with each element in the array (id, name, etc. that dont repeat in array)

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

you can use index as a key

A

false

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

what is the event handler prefix in react

A

on (onClick, onSubmit, etc)

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

event handler syntax for function

A

return <button onClick = {function}> button text</button>

60
Q

event handler syntax for inline

A

function Name (){
return <button onClick ={() => console.log(“hi world”)}> button text </button>

61
Q

you can only attached event listeners to DOM elements

A

true

62
Q

you can’t use event handler in callback function

A

false

63
Q

onChange

A

handles changes to input values

64
Q

how do you capture the input value

A

event.target.value

65
Q

onSubmit

A

when using form elements

66
Q

how does React add event listener

A

using onEvent attribute and passing a callback function as event handler

67
Q

Synthetic Base Event

A

react event object

68
Q

synthetic event

A

special event handler in react event system

69
Q

what is state

A

data that is dynamic in components and changes over time as user interacts with application

70
Q

can props change in application

A

no

71
Q

state doesnt require parent component to send updated information

A

true

72
Q

useState

A

special function that is a react hook that hooks into React’s internal state inside a function component

73
Q

syntax to import useState

A

import React, {useState} from ‘react’

74
Q

what does useState return

A

an array with 2 variables:
count and setCount

75
Q

what is useState count varibale

A

reference to current value of that state in React’s internals

76
Q

what is useState setCount variable

A

setter function so we can update that state

77
Q

syntax for useState in function

A

function Counter (){
const [count, setCount] = useState(0)}

78
Q

how do you update state

A

call the setter function

79
Q

setState is synchronous

A

false it is asynchronous so doesnt update count immediately

80
Q

how do you update count(holder variable of current value of state)

A

pass a callback function

81
Q

rules of hooks

A

-only call at the top level of app
-must call everytime component is rendered
-don’t use hook instead loop, conditions, or nested functions
-only call hooks from react functions

82
Q

4 things to determine when to use state

A
  1. is the information passed from parent via prop? (if yes not state)
  2. Can you compute it with any props or other state? (ifyes not state)
  3. Does it remain unchanged over time? (if yes not state)
  4. Does it change or dynamic? (if yes need state)
83
Q

Steps for adding state

A
  1. import useState hook
  2. set up initial state
  3. use state variable in component
  4. call setter function to update state
84
Q

when will react update state

A

when a new object/array is passed to setState

85
Q

you cant hold null in state

A

false can hold any JS value

86
Q

You shouldn’t change objects you hold in react state directly

A

true

87
Q

how to update object in state

A

create a new object or make a copy then set state to use the new/copy object

88
Q

what is best for listing data in UI object or array

A

array

89
Q

what do you use to add element to array

A

spread operator […]

90
Q

what do you use to remove element from array

A

.filter

91
Q

what do you use to update element

A

.map

92
Q

5 steps for thinking in react

A
  1. Break UI into Component Hierachy
  2. Build a static version of react
  3. identify minimum but complete representation of IU State
  4. Identify where state should live
  5. add inverse data flow
93
Q

what does react context API and useContext hook allow us to do?

A

share “global” data between components w/o passing down that data with props

94
Q

prop-drilling

A

take in a prop to a parent component not to use directly but to pass it down to child component

95
Q

what 2 things do you need to create context

A
  1. the actual context object
  2. a context provider component
96
Q

syntax for context

A

const userContext = React.createContext()

97
Q

syntax for provider component

A

function UserProvider({child}) {
return <UserProvider value={null> {child} </UserProvider>
}

export {userContext, UserProvider}

98
Q

what must you wrap provider component in for access to context

A

{ }

99
Q

syntax for adding context hook to components

A

import {UserContext} from “relative to component”

100
Q

what are controlled forms

A

form that derives its input values from state

101
Q

since forms values are saved in state they can be passed down as props or sent upward with functions supplied in props

A

true

102
Q

types of form elements

A

<input></input>

<textarea>
<select>
<form>
</form></select></textarea>

103
Q

specific prop to control inputs in <input></input>, <textarea>, <select></select></textarea>

A

use value

104
Q

specific prop to control inputs in checkbox

A

use checked

105
Q

we cant use data from elsewhere to populate controlled forms with existing data

A

false

106
Q

benefits of using controlled forms (having form data in state)

A

-easily access data once form is submitted
-pass it to another component or use to make a fetch request
-easily perform validation logic when data is submitted

107
Q

what are side effects

A

when a function is called it causes changes out of the function itself

108
Q

common examples of side effects

A

accessing data from database
network request

109
Q

syntax for importing useEffect

A

import React, {useEffect} from “react”

110
Q

where do you call useEffect

A

inside the component

111
Q

syntax for useEffect

A

function App(){

useEffect ( () => {callbackfunction}

}

112
Q

when does useEffect run

A

after the function is rendered (last thing to happen)

113
Q

useEffect Dependencies

A

run useEffect with certian conditions

114
Q

what is syntax for useEffect to run everytime component is rendered

A

useEffect( () => {})

no dependecies

115
Q

what is the syntax for useEffect to run once after the first time component renders

A

useEffect(() => {}, [ ])

empty dependency array

116
Q

what is the syntax for useEffect to run everytime a certain variable changes

A

useEffect ( () => {}, [variable])

variable dependency

117
Q

what stops useEffect from running in the background

A

clean up function

118
Q

clean up function runs when …

A

when the compoent is no longer being returned by its parent

119
Q

syntax for clean up

A

return function cleanup () {
clearInterval (varible to stop)}

this is inside the useEffect callback function

120
Q

common times to use clean up

A

timer running via setInterval
subscription to a web socket connection

121
Q

what does useing fetch in useEffect allow you to do

A

receive data and store in setState

122
Q

server-side data

A

the database

123
Q

client side data

A

react state

124
Q

steps for using server side data in React

A

when X occurs (app loads, clicks, etc.)
make Y fetch request (GET, POST, DELETE)
update Z state (add, delete, ect the data to state)

125
Q

what is the goal of client-side routing

A

handle all routing logic with JS without making any additional GET request for some new HTML

126
Q

What is a single-page application

A

application with only one HTML document for the entire application

127
Q

What is one big benefit of clietn-side routing

A

speed

128
Q

why is client side routing quicker

A

information isnt requested from server for each page render but rather saved in client side

129
Q

what does SPA stand for

A

single page application

130
Q

Limitations of Client Side Routes

A
  1. loading CSS and JS since the first request gets everything
  2. Analytic tools can have a hard time since not a traditional page
  3. harder to design than traditional
131
Q

what is the most popular client side router with React

A

React Router

132
Q

2 key features of React Router

A
  1. conditional rendering of components with URL
  2. programmatic navigation using JS
133
Q

Location API

A

pathname = “/location”

134
Q

window.location

A

what to type in browser dev console to find location in URL

135
Q

window.history

A

type this in browser console to find history

136
Q

React Router

A

routing library for React that allows us to link to specific URLS and conditionally render components depending on which URL is displayed

137
Q

Browser Router

A

declares how react router will be used

138
Q

route

A

says when the URL matches this specified render the child component

139
Q

what is exact short for

A

exact={true}

140
Q

steps to add additional routes

A

add components
add “/component” routes to the routes logic in app()

141
Q

what to do when defining possible routes

A

define what url to match
define what compoent to render if it matches
set “/” route to exact prop so only see if exact path

142
Q

two components to trigger routing

A

NavLink and Links

143
Q

NavLink

A

superset of links that addesses styling attributes

144
Q

Link

A

creates stadnadrd hyperlinks

145
Q

steps to add NavLink

A
  1. import NavLink
  2. add styling to Navlink
  3. define NavBar component
  4. add NavBar to App Component

React- Flatiron (1 decks)

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