Week 7 Flashcards

Question

What is useState()?

Answer 1

is a function that returns an array of the following Index 0, we have the state object Index 1, we have the function to use to update that object state

Answer 2

Allows us to manage side-effects that aren't related to rendering the component Takes in 2 params A callback function denoting what action you want to perform A dependency array of state values that act as triggers for the action on change

Answer 3

Allows us a better way of updating complex state logic Takes in 2 params The callback function with logic to update the state The intial state of the object

Answer 4

To save info we can use React component states. if we are using class components, we can set this initial state directly in the constructor. If we are using a function component, we can use the useState() hook to create and offer a method to change state

Answer 5

A container component holds the state that it then passes to "display" child components

Answer 6

Need to install react-router using npm. `npm install react-router@next react-router-dom@next. Use the BrowserRouter component to provide context where routing will work Use Link component to link to a particular route Use Switch and Route components to link routes to particular components that get rendered

Answer 7

JSX is an extension syntax to JS - it lets you write HTML and JS code together; compiles into JS. Not required but helps with development. Write JS code by using curly braces {like this}

Answer 8

Attribute names Example class =\> className You can also create your own "attributes" which are called props. Tag Names HTML tag: Component tag: We can directly add JS into JSX HTML by using { } where as in HTML you cannot do this

Answer 9

Use event binding: For sending parameters: this.deleteRow(id, e)}\>Delete Row Define myClickHandler function in your component somewhere

Answer 10

Data binding is when we bind data to a specific value in the state For example, if we had login form and we had a username input, we want to bind whatever the user types in, to the username value in the state

Answer 11

1-way data binding. Data always flows "down" to components nested within them.

Answer 12

Pass in the data through props to the child

Answer 13

Lift the state up to the parent component and then pass it into each child via props

Answer 14

Use an if statement in the render() function OR Use a boolean value with logical && operator in your JSX like below

Answer 15

Pass in a key prop that uniquely identifies the list item Helps React know which items have changed, been added, or removed

Answer 16

npm install typescript

Answer 17

Pros: strict type checking; intellisense; features like interfaces, decorators, and access modifiers Cons: adds overhead and extra transpilation; may be unnecessary for small projects

Answer 18

Use "controlled components" where the state of the form is based on the state of the React component Not recommended, but you can use uncontrolled component with a Ref to get form values from the DOM

Answer 19

Can use AJAX itself or fetch, but a library like Axios is a good idea b/c can centrally configure all requests Example: need to include JWT token with every request for authorization

Answer 20

Jest is a unit testing tool you can use to test your code Enzyme is a testing utility to make it easier to test your components' output

Answer 21

Preferred: use the className prop Optional: use inline styling, or "CSS-in-JS" where the styling is defined in JS

Answer 22

A pattern for state management with unidirectional data flow: from action -\> dispatcher -\> store -\> view

Answer 23

A global state management library Useful for complex apps where managing state becomes too unwieldy Redux is the popular implementation of Flux

Answer 24

Single source of truth - The global state of your app is put away in an object tree inside a single store State is read-only - The state can only be changed by emitting an action, an object that explains what has happened Changes are made with pure functions - This is to define how the state tree is being transformed by the actions, you have to write pure reducers

Answer 25

No because we have to keep our application state as small as possible Should only do so if it makes our lives easier while using Dev Tools

Answer 26

Time travel environment that allows live editing for Redux with action replay, hot reloading, and customizable UI Can use in any browser, Chrome or Firefox

Answer 27

Allows us to inspect all the states and action payload Allows us to go back into the time simply by cancelling the actions Each stage action will be re-evaluated in case you change the reducer code With the help of persistState() store enhancer, you can continue your debug sessions across page reloads

Answer 28

Plain JS objects which contain a type field. ## Footnote Considered as an event that can describe something that has happened in the application Should always contain a small amount of information that is needed to mention what has happened

Answer 29

Carries all the states, reducers and actions that create the app

Answer 30

getState() dispatch(action) subscribe(listener) replaceReducer(nextReducer)

Answer 31

You need to export the store from the module where it has been created with createStore

Answer 32

Components -Used for 'dumb' React components that are unfamiliar with Redux Containers - Used for 'smart' React components which are connected to the Redux Actions - Used for all the action creators, where the file name should be corresponding to the part of the app Reducers - Used for all the reducers where the file name is corresponding to the state key Store - Used for store initialization. This directory works best in small and mid-level size apps

Answer 33

Pure functions that take the previous state and an action, then it returns the next state

Answer 34

Modify its argument Make sure not to perform side effects such as routing transitions and API calls Call non-pure functions such as Date.now() or Math.random(

Answer 35

Allows us to find all the usages of specific functionality across the project Also prevents us from making mistakes such as typos. These will gives us a Reference Error immediately

Answer 36

An "ideal" or "virtual" state of the UI that is managed by React and kept in sync with the actual DOM Improves performance by only requiring changing the actual DOM when needed

Answer 37

Kept in sync with the real DOM by a library such as ReactDOM. The process is called reconciliation You tell react what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out attribute manipulation, event handling and manual DOM updates that you would otherwise have to do

Answer 38

A higher order components is a component that takes in a component, wraps it, and returns a component

Answer 39

Pure Component State/Props should be immutable State/Props should not have hierarchy You should call forceUpdate() when data changes We do this when we need performance boosts Dumb/Stateless components Normal Component This can be a smart or stateful component which may update or change state It will usually contain some logic that will make things happen Higher Order Component This is a component that takes a component and returns a slightly modified version of this component

Answer 40

It follows functional programming paradigm; cleaner and prevents consistency problems

Answer 41

Thunk is a function that wraps an expression to delay its evaluation Used for delaying dispatch of an action or based on a condition

Week 7 Flashcards

(66 cards)