React All Flashcards
What is react?
front end framework for Javascript
Front end framework
standardized way of creating and deploying parts of a web applications
3 features of React
- declarative, component-based, learn once, write everywhere
Declarative programming
describes what to accomplish and leaves how to do the action up to the program
imperative programming
scribe each step/action a program should make and how the program should do the actions step by step
what are components
building clocks of our web page that handles their own data and UI logic
why is react a learn once and write everywhere program
works in different environments and easy to learn other react languages
how do you launch react project
npm start
what is babel
transpiler that converts modern JS and custom code like JSX into compatible JS
what is webpack
bundler that takes all our work along with any required dependecy code and packages it all together in a transferable bundle
ESLint
linting and code analysis functionality to help improve code and reinforce best practices
JS packages
a file or set of files full of existing, reusable code
what is npm
package manager for Node that helps organize JS packages in relation to our work
can you use packages to build other packages
yes
what is package.json
file that tells you and npm what packages are required for a specific JS application
what command reads the packages.json dependency’s
npm install
where does npm install download the packages from
npmjs.com
node_modules
local environment creates this folder to hold downloaded packages
npm install package name
how to add a specific package
npm init
creates package.json and includes specific content to include in the file
npm test or learn test
runs the test script found in package.json
render
method that comes from react-dom package
what 2 arguments does render take
react component to render
dom element where we want the component to be rendered
App.js
top level that cantains app compoents
how do you pull content form node_modules folder
import
what creates a tree of dependencies by exporting component
export
what lets you split the UI into independent resuable pieces and think about each in isolation
components
what 2 things does components help with
help with functionality and presentation of code
what is boilerplate code
sections of code that are repeated in multiple places with no variations
what is the end goal of components
contain a snippet of code that describes what they should render to the DOM
how do you name components
declarative word that is capitalized
syntax for creating component
(function)
function Comment (){
return (
<div> comments</div>
)}
(arrow)
const Comment = () => <div> comment</div>
syntax for creating class components
class Comment extends React.Component {
render() {
return <div> comments </div>}
}
minimum component requirements
- must be a function that starts with a capital letter
- must return JSX
module code
code that is separated into segments (modules) where each file represents a feature or specific functionality
why use module code?
-stricter variable scope
-single responsibility
-easier to navigate
-easier to debug
- produce clean and dry code (reusable)
what does import/export variable allow us to do?
define variables in one file and access them in another file
export default
export ONE variable from file to be used in another file
export default syntax
export default ComponentName; (goes at end of file)
Named exports
export multiple variables from a file
named exports syntax
export{varaible1, variable2}
or
directly next to variable
export function variable1 (){
}
import
takes in the variables that have been exported and adds them to other files
syntax for importing multiple variables
import* as variableBeingCalled from “relative path”
syntax for importing specific variables
import{variable} from “relative path”
syntax for importing node_modules
import React from “react’
what is JSX
syntax extension of JS that creates a special/ productive marriage of HTML and JS
what is JSX short for
Javascript XML
6 characteristics of JSX
- is not a string
- is the return value of a function component
- contains JS in {}
- works with expressions not statements (can’t use if (){})
- can render other components in a component
- component must return one JSX element
props
parameter in components that pass information from parent to child component
props syntax
function parentFunction (){
return <ChildComponent text = “Hello”}
the prop passed to childComponent is Hello
what data types can props take
any data types (number, function, boolean, etc) execept strings
how are props accessed
assessed in child component via an object that is passed into our component function as an object
default value
assigns value to prop if component doesnt receive prop value from parent
what is used to iterate a list of array to component object
.map
what must you add when using .map
key
what is key value
unique value associated with each element in the array (id, name, etc. that dont repeat in array)
you can use index as a key
false
what is the event handler prefix in react
on (onClick, onSubmit, etc)
event handler syntax for function
return <button onClick = {function}> button text</button>
event handler syntax for inline
function Name (){
return <button onClick ={() => console.log(“hi world”)}> button text </button>
you can only attached event listeners to DOM elements
true
you can’t use event handler in callback function
false
onChange
handles changes to input values
how do you capture the input value
event.target.value
onSubmit
when using form elements
how does React add event listener
using onEvent attribute and passing a callback function as event handler
Synthetic Base Event
react event object
synthetic event
special event handler in react event system
what is state
data that is dynamic in components and changes over time as user interacts with application
can props change in application
no
state doesnt require parent component to send updated information
true
useState
special function that is a react hook that hooks into React’s internal state inside a function component
syntax to import useState
import React, {useState} from ‘react’
what does useState return
an array with 2 variables:
count and setCount
what is useState count varibale
reference to current value of that state in React’s internals
what is useState setCount variable
setter function so we can update that state
syntax for useState in function
function Counter (){
const [count, setCount] = useState(0)}
how do you update state
call the setter function
setState is synchronous
false it is asynchronous so doesnt update count immediately
how do you update count(holder variable of current value of state)
pass a callback function
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
4 things to determine when to use state
- is the information passed from parent via prop? (if yes not state)
- Can you compute it with any props or other state? (ifyes not state)
- Does it remain unchanged over time? (if yes not state)
- Does it change or dynamic? (if yes need state)
Steps for adding state
- import useState hook
- set up initial state
- use state variable in component
- call setter function to update state
when will react update state
when a new object/array is passed to setState
you cant hold null in state
false can hold any JS value
You shouldn’t change objects you hold in react state directly
true
how to update object in state
create a new object or make a copy then set state to use the new/copy object
what is best for listing data in UI object or array
array
what do you use to add element to array
spread operator […]
what do you use to remove element from array
.filter
what do you use to update element
.map
5 steps for thinking in react
- Break UI into Component Hierachy
- Build a static version of react
- identify minimum but complete representation of IU State
- Identify where state should live
- add inverse data flow
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
prop-drilling
take in a prop to a parent component not to use directly but to pass it down to child component
what 2 things do you need to create context
- the actual context object
- a context provider component
syntax for context
const userContext = React.createContext()
syntax for provider component
function UserProvider({child}) {
return <UserProvider value={null> {child} </UserProvider>
}
export {userContext, UserProvider}
what must you wrap provider component in for access to context
{ }
syntax for adding context hook to components
import {UserContext} from “relative to component”
what are controlled forms
form that derives its input values from state
since forms values are saved in state they can be passed down as props or sent upward with functions supplied in props
true
types of form elements
<input></input>
<textarea>
<select>
<form>
</form></select></textarea>
specific prop to control inputs in <input></input>, <textarea>, <select></select></textarea>
use value
specific prop to control inputs in checkbox
use checked
we cant use data from elsewhere to populate controlled forms with existing data
false
benefits of using controlled forms (having form data in state)
-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
what are side effects
when a function is called it causes changes out of the function itself
common examples of side effects
accessing data from database
network request
syntax for importing useEffect
import React, {useEffect} from “react”
where do you call useEffect
inside the component
syntax for useEffect
function App(){
useEffect ( () => {callbackfunction}
}
when does useEffect run
after the function is rendered (last thing to happen)
useEffect Dependencies
run useEffect with certian conditions
what is syntax for useEffect to run everytime component is rendered
useEffect( () => {})
no dependecies
what is the syntax for useEffect to run once after the first time component renders
useEffect(() => {}, [ ])
empty dependency array
what is the syntax for useEffect to run everytime a certain variable changes
useEffect ( () => {}, [variable])
variable dependency
what stops useEffect from running in the background
clean up function
clean up function runs when …
when the compoent is no longer being returned by its parent
syntax for clean up
return function cleanup () {
clearInterval (varible to stop)}
this is inside the useEffect callback function
common times to use clean up
timer running via setInterval
subscription to a web socket connection
what does useing fetch in useEffect allow you to do
receive data and store in setState
server-side data
the database
client side data
react state
steps for using server side data in React
when X occurs (app loads, clicks, etc.)
make Y fetch request (GET, POST, DELETE)
update Z state (add, delete, ect the data to state)
what is the goal of client-side routing
handle all routing logic with JS without making any additional GET request for some new HTML
What is a single-page application
application with only one HTML document for the entire application
What is one big benefit of clietn-side routing
speed
why is client side routing quicker
information isnt requested from server for each page render but rather saved in client side
what does SPA stand for
single page application
Limitations of Client Side Routes
- loading CSS and JS since the first request gets everything
- Analytic tools can have a hard time since not a traditional page
- harder to design than traditional
what is the most popular client side router with React
React Router
2 key features of React Router
- conditional rendering of components with URL
- programmatic navigation using JS
Location API
pathname = “/location”
window.location
what to type in browser dev console to find location in URL
window.history
type this in browser console to find history
React Router
routing library for React that allows us to link to specific URLS and conditionally render components depending on which URL is displayed
Browser Router
declares how react router will be used
route
says when the URL matches this specified render the child component
what is exact short for
exact={true}
steps to add additional routes
add components
add “/component” routes to the routes logic in app()
what to do when defining possible routes
define what url to match
define what compoent to render if it matches
set “/” route to exact prop so only see if exact path
two components to trigger routing
NavLink and Links
NavLink
superset of links that addesses styling attributes
Link
creates stadnadrd hyperlinks
steps to add NavLink
- import NavLink
- add styling to Navlink
- define NavBar component
- add NavBar to App Component
