Brainscape's Knowledge GenomeTM

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


See full index

Revature > Week 7 > Flashcards

Week 7 Flashcards

1
Q

What is React? Is it a library or framework? What’s the difference between those?

A

React is a UI library. It’s a library not a framework because you call it in your code; it can be integrated into part of or the entire UI

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

Why use React?

A
  • We use it to make single page front end applications
  • Lets us dynamically create and render components without having to refresh pages
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is the difference between React and ReactDOM?

A

React is a higher level package for both ReactDOM and React Native

ReactDOM is strictly the web implementation of React

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

How many HTML pages does our React App use?

A

We render in one SINGLE page

It is constructed in a way that we only ever need to render one DOM object

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

What is SPA?

A

Single Page Application is a website design approach where each new page’s content is served not from loading new HTML pages but generated dynamically with JS’s ability to manipulate the DOM elements on the existing page itself

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

What are some benefits of SPA?

A

Allows users to contineu consuming and interacting with the page while new elements are being updated or fetched, and can result in much faster interactions

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

What are some downsides of SPA?

A

Accessibility

SEO rankings

If your content is purely static, it can worsen initial load times

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

What is the package.json?

A

Lists our dependencies

Lists our scripts
Start, test are aliases for npm run [script]

Run the build script to show the target folder

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

What are node_modules?

A

Houses our dependency files

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

What is gitignore?

A

Auto-generated by create-react-app to prevent us from pushing certain things to github repos

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

What is the build folder?

A

After running the command npm run build a folder called build is created with our self-container app

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

What is ReactDOM.render?

A

ReactDOM takes 2 arguements

The element to render
The location to add the element to in the DOM

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

What is react.createElement?

A

react.createElement(“h1”, { style: { color: “blue” }}, “Hello world from react”)

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

What is the App.tsx? Why do we structure it in that way?

A

Main entrypoint for our application

This is where we render the root node for the DOM object

“A lot” of the time this is where we do our app routing

It’s structured like this because easy to maintain and at the end of the day we only want one root for everything else

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

What are the roles of Babel and Webpack?

A

Babel

Free open source JS transpiler or transcompiler that will turn things like JSX and tsx into valid JS code
Make sure to start all components with capital letter, this is how Babel knows its a component it has to transpile

Webpack
This is a packaging tool that takes all the different files and modules and build them into a web package to use within the browser

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

What does it mean to be component-based? What does a component represent?

A

Components are reusable parts of the UI that maintain a state and get rendered to the page

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

Tell me how you would start up a new React project? What does ‘create react app’ setup for you?

A

You should use npm to install react and any other dependencies

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

How would you create a component?

A

Create either a JS class or function

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

Why use components?

A

Increase reuseability and maintainability

Also helps loosen code coupling within the application

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

What does a component have to render/return?

A

A component must return/render a JSX view of some type

This view can only have one single root JSX tag

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

What are “props”? What is state? What data should be put in which?

A

Props are readonly; they are passed into the component

State is the immutable object representing the current state of the component

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

What is the lifecycle of a component?

A

Constructor - use for initializing state

render() - returns the JSX to be compiled and rendered onto the browser

componentDidMount() - runs once, after the component is rendered

componentDidUpdate() - runs after every update of the component

componentWillUnmount() - runs before the component is removed from the DOM

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

What is the difference between a functional and a class component?

A

Functional - before hooks, could not modify state and only used as ‘display’ component

Class - utilizes lifecycle methods and render method

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

What are React hooks? How do we use them?

A

React hooks are functions we can call in order to access certain functionalites

They all start with use such as useStyle(), useState(), useEffect()

We call them hooks because they allow us to hook into certain aspects of a component whether it be style or lifecycle

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

What is useState()?

A

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

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

What is useEffect()?

A

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

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

What is useReducer()?

A

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

28
Q

How do we save info in a component?

A

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

29
Q

What is the purpose of a container component?

A

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

30
Q

How would you do routing in React?

A

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

31
Q

What is JSX? What does it compile into? How to include JS code in JSX?

A

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}

32
Q

What are some of the differences between JSX HTML and normal HTML?

A

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

33
Q

How do you handle events in React?

A

Use event binding:

For sending parameters: this.deleteRow(id, e)}>Delete Row

Define myClickHandler function in your component somewhere

34
Q

What is Data Binding?

A

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

35
Q

Does React have 1-way or 2-way data binding and data flow?

A

1-way data binding.

Data always flows “down” to components nested within them.

36
Q

If a parent component has data that a child component needs to access, what should you do?

A

Pass in the data through props to the child

37
Q

If you have state in two child components that a parent component needs access to, what is a good solution for that?

A

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

38
Q

How do you do conditional rendering?

A

Use an if statement in the render() function OR

Use a boolean value with logical && operator in your JSX like below

39
Q

What should you remember to include as a prop for lists of elements?

A

Pass in a key prop that uniquely identifies the list item

Helps React know which items have changed, been added, or removed

40
Q

How do we use TypeScript in React?

A

npm install typescript

41
Q

What are some pros/cons of using TypeScript in a React application?

A

Pros: strict type checking; intellisense; features like interfaces, decorators, and access modifiers

Cons: adds overhead and extra transpilation; may be unnecessary for small projects

42
Q

How would you handle forms and submitting forms with React?

A

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

43
Q

How do you recommend making an AJAX call in React? Which library have you used? Why not use fetch directly?

A

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

44
Q

How do you test React components and code that you write?

A

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

45
Q

What are some options for styling your React components?

A

Preferred: use the className prop

Optional: use inline styling, or “CSS-in-JS” where the styling is defined in JS

46
Q

What is the Flux design pattern?

A

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

47
Q

What is Redux? How is Redux related to Flux?

A

A global state management library

Useful for complex apps where managing state becomes too unwieldy

Redux is the popular implementation of Flux

48
Q

What are the core principles of Redux?

A

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

49
Q

What is the difference between mapStateToProps() and mapDispatchToProps()?

A
50
Q

Do you need to keep all component states in the Redux store?

A

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

51
Q

What is Redux DevTools?

A

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

52
Q

What are some features of the Redux DevTools?

A

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

53
Q

What is an Action in Redux?

A

Plain JS objects which contain a type field.

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

54
Q

What is ‘store’ in Redux?

A

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

55
Q

What are some store methods?

A

getState()

dispatch(action)

subscribe(listener)

replaceReducer(nextReducer)

56
Q

How to access Redux store outside a react component?

A

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

57
Q

How to structure Redux top-level directories?

A

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

58
Q

What are reducers in redux?

A

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

59
Q

What are some things you should never do in a Reducer?

A

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(

60
Q

What is the purpose of constants in Redux?

A

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

61
Q

What is the virtual DOM?

A

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

62
Q

How does virtual DOM compare to the DOM?

A

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

63
Q

What about a higher-order component?

A

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

64
Q

What is a pure component vs a normal one vs a higher order one?

A

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

65
Q

Why is it important to use setState() and replace the whole object instead of editing it directly?

A

It follows functional programming paradigm; cleaner and prevents consistency problems

66
Q

What is a “thunk”? What is redux-thunk used for?

A

Thunk is a function that wraps an expression to delay its evaluation

Used for delaying dispatch of an action or based on a condition

Revature (10 decks)

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