Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

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
how do you pull content form node_modules folder
import
26
what creates a tree of dependencies by exporting component
export
27
what lets you split the UI into independent resuable pieces and think about each in isolation
components
28
what 2 things does components help with
help with functionality and presentation of code
29
what is boilerplate code
sections of code that are repeated in multiple places with no variations
30
what is the end goal of components
contain a snippet of code that describes what they should render to the DOM
31
how do you name components
declarative word that is capitalized
32
syntax for creating component
(function) function Comment (){ return (
comments
)} (arrow) const Comment = () =>
comment
33
syntax for creating class components
class Comment extends React.Component { render() { return
comments
} }
34
minimum component requirements
1. must be a function that starts with a capital letter 2. must return JSX
35
module code
code that is separated into segments (modules) where each file represents a feature or specific functionality
36
why use module code?
-stricter variable scope -single responsibility -easier to navigate -easier to debug - produce clean and dry code (reusable)
37
what does import/export variable allow us to do?
define variables in one file and access them in another file
38
export default
export ONE variable from file to be used in another file
39
export default syntax
export default ComponentName; (goes at end of file)
40
Named exports
export multiple variables from a file
41
named exports syntax
export{varaible1, variable2} or directly next to variable export function variable1 (){ }
42
import
takes in the variables that have been exported and adds them to other files
43
syntax for importing multiple variables
import* as variableBeingCalled from "relative path"
44
syntax for importing specific variables
import{variable} from "relative path"
45
syntax for importing node_modules
import React from "react'
46
what is JSX
syntax extension of JS that creates a special/ productive marriage of HTML and JS
47
what is JSX short for
Javascript XML
48
6 characteristics of JSX
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
49
props
parameter in components that pass information from parent to child component
50
props syntax
function parentFunction (){ return
51
what data types can props take
any data types (number, function, boolean, etc) execept strings
52
how are props accessed
assessed in child component via an object that is passed into our component function as an object
53
default value
assigns value to prop if component doesnt receive prop value from parent
54
what is used to iterate a list of array to component object
.map
55
what must you add when using .map
key
56
what is key value
unique value associated with each element in the array (id, name, etc. that dont repeat in array)
57
you can use index as a key
false
58
what is the event handler prefix in react
on (onClick, onSubmit, etc)
59
event handler syntax for function
return
60
event handler syntax for inline
function Name (){ return
61
you can only attached event listeners to DOM elements
true
62
you can't use event handler in callback function
false
63
onChange
handles changes to input values
64
how do you capture the input value
event.target.value
65
onSubmit
when using form elements
66
how does React add event listener
using onEvent attribute and passing a callback function as event handler
67
Synthetic Base Event
react event object
68
synthetic event
special event handler in react event system
69
what is state
data that is dynamic in components and changes over time as user interacts with application
70
can props change in application
no
71
state doesnt require parent component to send updated information
true
72
useState
special function that is a react hook that hooks into React's internal state inside a function component
73
syntax to import useState
import React, {useState} from 'react'
74
what does useState return
an array with 2 variables: count and setCount
75
what is useState count varibale
reference to current value of that state in React's internals
76
what is useState setCount variable
setter function so we can update that state
77
syntax for useState in function
function Counter (){ const [count, setCount] = useState(0)}
78
how do you update state
call the setter function
79
setState is synchronous
false it is asynchronous so doesnt update count immediately
80
how do you update count(holder variable of current value of state)
pass a callback function
81
rules of hooks
-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
4 things to determine when to use state
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
Steps for adding state
1. import useState hook 2. set up initial state 3. use state variable in component 4. call setter function to update state
84
when will react update state
when a new object/array is passed to setState
85
you cant hold null in state
false can hold any JS value
86
You shouldn't change objects you hold in react state directly
true
87
how to update object in state
create a new object or make a copy then set state to use the new/copy object
88
what is best for listing data in UI object or array
array
89
what do you use to add element to array
spread operator [...]
90
what do you use to remove element from array
.filter
91
what do you use to update element
.map
92
5 steps for thinking in react
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
what does react context API and useContext hook allow us to do?
share "global" data between components w/o passing down that data with props
94
prop-drilling
take in a prop to a parent component not to use directly but to pass it down to child component
95
what 2 things do you need to create context
1. the actual context object 2. a context provider component
96
syntax for context
const userContext = React.createContext()
97
syntax for provider component
function UserProvider({child}) { return {child} } export {userContext, UserProvider}
98
what must you wrap provider component in for access to context
{ }
99
syntax for adding context hook to components
import {UserContext} from "relative to component"
100
what are controlled forms
form that derives its input values from state
101
since forms values are saved in state they can be passed down as props or sent upward with functions supplied in props
true
102
types of form elements