General React.js Flashcards
React.js is a framework, library or langauage?
Library
What does a React function look like?
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}What does a React component look like?
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}What notation are React events written?
camelCase
Where do you bind events?
In the constructor
How are named modules imported? Default modules?
import defaultExport, { namedExport1, namedExport3, etc… } from ‘module’;
Difference b/w class component and function?
A class component requires you to extend from React.Component and create a render function which returns a React element. Class is required for states.
Why use class components?
When states are needed
How to pass states to a function?
If you need a state in your component you will either need to create a class component or you lift the state up to the parent component and pass it down the functional component via props.
What is preventDefault() event method?
- ## the default action that belongs to the event will not occur.
What does Redux Middleware do?
Provides the capability to run code after an action is dispatched, but before the reducer. e.g. 3rd party extension point, logging, aysnc API calls
What can middleware be used for?
-inspecting the action and state
- modify action
dispatch other actions
- stop actions from reaching reducers
What is Thunk?
A kind of middleware that subroutine used to inject an additional calculation in another subroutine; allows you to write action creators that return a function instead of an action; use Thunk to generator an API call to a server; used for complex synchronous logic (multiple/conditional dispatches)
What is a reducer?
Reducers specify how the application’s state changes in response to actions sent to the store.
Reducers calculate a new state given the previous state and an action
Pure function that computes the next state.
Predictable.
What are Redux Actions?
Payloads of information that send data from your application to your store.
They are the only information for the store. They are sent to the store using store.dispatch().
They are plain JS. They must have a type property that indicates the type of action being performed.
They are ‘what happened’.
What is the Redux Store?
The object that brings actions and reducers together.
The store:
- holds application state (tree);
- allows acces to state via getState();
- allows state to be updated via dispatch(action);
- registers listeners
- handles unregistered listeners
type Store = {
dispatch: Dispatch
getState: () => State
subscribe: (listener: () => void) => () => void
replaceReducer: (reducer: Reducer) => void
}
Only one store made using createStore()
What is the dataflow in Redux?
- You call store.dispatch(action)
- The Redux store calls the reducer function you gave it
- Root reducer may combine the output of multiple reducers into a single state tree
- The Redux store saves the complete state tree returned by the root reducer
What is an action creator?
A function that creates an action (a payload of information).
What is REST?
Representational State Transfer using:
- uses JSON or XML
- uses web standards (built on HTTP)
- stateless (server does store states, client does via cookies)
- uses GET, POST, PUT, DELETE (HTTP)
What is a promise?
A mechanism that supports async computation; it represents a value that may be available now or in the future;
How is a promise written?
new Promise (function (resolve, reject) {…});
What is fetch?
API, promise-based, provides an interface for fetching resources;
How is fetch used?
fetch(baseUrl + ‘item’)
.then(response => response.json())
.then(data=> console.log(data))
.catch(error => console.log(error.message))
What is the format of an arrow function?
const myFunction = () => {
//...
}
const myFunction = (param1, param2) => doSomething(param1, param2)
What is the format of an arrow function?
const myFunction = () => {
//...
}
const myFunction = (param1, param2) => doSomething(param1, param2)
Does ‘this’ work in an arrow function?
No. Due to this, arrow functions are not suited as object methods.
Two benefits of arrow functions?
A shorter syntax than typical functions
No binding of this
What is the syntax of a function expression?
const myVariable = function (param) {
statements
}How to change to an arrow function?
remove ‘function’ and add => after the params
What is a service worker
A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.
Can hooks be called conditionally?
No. Must be called in the same order.
Can you have a function in useState()?
Yes, use for expensive functions to only run once.
Can you pass in a function in setState?
Yes. Via an arrow function.
How do you keep all the values in the current state when setting a new state (setState)?
Use …
Can you have multiple useState’s in a function?
Yes.
What is the onChange code to update a form field with a new state using hooks?
onChange = {e => setEmail(e.target.value)}
What is useEffect?
Gets called whenever the component gets re-rendered
Second argument determines when the re-render will happen (when the first function in useEffect is rendered)
Can be used to replace componentDidMount.
How can you conditionally render?
Hook (useState) && component call
What is the return function in useEffect?
Cleanup function, unmount.
Applications of useEffect?
event listners, api’s.
