Week 7 Flashcards
What is React? Is it a library or framework? What’s the difference between those?
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
Why use React?
- We use it to make single page front end applications
- Lets us dynamically create and render components without having to refresh pages
What is the difference between React and ReactDOM?
React is a higher level package for both ReactDOM and React Native
ReactDOM is strictly the web implementation of React
How many HTML pages does our React App use?
We render in one SINGLE page
It is constructed in a way that we only ever need to render one DOM object
What is SPA?
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
What are some benefits of SPA?
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
What are some downsides of SPA?
Accessibility
SEO rankings
If your content is purely static, it can worsen initial load times
What is the package.json?
Lists our dependencies
Lists our scripts
Start, test are aliases for npm run [script]
Run the build script to show the target folder
What are node_modules?
Houses our dependency files
What is gitignore?
Auto-generated by create-react-app to prevent us from pushing certain things to github repos
What is the build folder?
After running the command npm run build a folder called build is created with our self-container app
What is ReactDOM.render?
ReactDOM takes 2 arguements
The element to render
The location to add the element to in the DOM
What is react.createElement?
react.createElement(“h1”, { style: { color: “blue” }}, “Hello world from react”)
What is the App.tsx? Why do we structure it in that way?
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
What are the roles of Babel and Webpack?
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
What does it mean to be component-based? What does a component represent?
Components are reusable parts of the UI that maintain a state and get rendered to the page
Tell me how you would start up a new React project? What does ‘create react app’ setup for you?
You should use npm to install react and any other dependencies
How would you create a component?
Create either a JS class or function
Why use components?
Increase reuseability and maintainability
Also helps loosen code coupling within the application
What does a component have to render/return?
A component must return/render a JSX view of some type
This view can only have one single root JSX tag
What are “props”? What is state? What data should be put in which?
Props are readonly; they are passed into the component
State is the immutable object representing the current state of the component
What is the lifecycle of a component?
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
What is the difference between a functional and a class component?
Functional - before hooks, could not modify state and only used as ‘display’ component
Class - utilizes lifecycle methods and render method
What are React hooks? How do we use them?
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
What is useState()?
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
What is useEffect()?
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
What is useReducer()?
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
How do we save info in a component?
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
What is the purpose of a container component?
A container component holds the state that it then passes to “display” child components
How would you do routing in React?
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
What is JSX? What does it compile into? How to include JS code in JSX?
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}
What are some of the differences between JSX HTML and normal HTML?
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
How do you handle events in React?
Use event binding:
For sending parameters: this.deleteRow(id, e)}>Delete Row
Define myClickHandler function in your component somewhere
What is Data Binding?
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
Does React have 1-way or 2-way data binding and data flow?
1-way data binding.
Data always flows “down” to components nested within them.
If a parent component has data that a child component needs to access, what should you do?
Pass in the data through props to the child
If you have state in two child components that a parent component needs access to, what is a good solution for that?
Lift the state up to the parent component and then pass it into each child via props
How do you do conditional rendering?
Use an if statement in the render() function OR
Use a boolean value with logical && operator in your JSX like below
What should you remember to include as a prop for lists of elements?
Pass in a key prop that uniquely identifies the list item
Helps React know which items have changed, been added, or removed
How do we use TypeScript in React?
npm install typescript
What are some pros/cons of using TypeScript in a React application?
Pros: strict type checking; intellisense; features like interfaces, decorators, and access modifiers
Cons: adds overhead and extra transpilation; may be unnecessary for small projects
How would you handle forms and submitting forms with React?
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
How do you recommend making an AJAX call in React? Which library have you used? Why not use fetch directly?
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
How do you test React components and code that you write?
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
What are some options for styling your React components?
Preferred: use the className prop
Optional: use inline styling, or “CSS-in-JS” where the styling is defined in JS
What is the Flux design pattern?
A pattern for state management with unidirectional data flow: from action -> dispatcher -> store -> view
What is Redux? How is Redux related to Flux?
A global state management library
Useful for complex apps where managing state becomes too unwieldy
Redux is the popular implementation of Flux
What are the core principles of Redux?
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
What is the difference between mapStateToProps() and mapDispatchToProps()?
Do you need to keep all component states in the Redux store?
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
What is Redux DevTools?
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
What are some features of the Redux DevTools?
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
What is an Action in Redux?
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
What is ‘store’ in Redux?
Carries all the states, reducers and actions that create the app
What are some store methods?
getState()
dispatch(action)
subscribe(listener)
replaceReducer(nextReducer)
How to access Redux store outside a react component?
You need to export the store from the module where it has been created with createStore
How to structure Redux top-level directories?
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
What are reducers in redux?
Pure functions that take the previous state and an action, then it returns the next state
What are some things you should never do in a Reducer?
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(
What is the purpose of constants in Redux?
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
What is the virtual DOM?
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
How does virtual DOM compare to the DOM?
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
What about a higher-order component?
A higher order components is a component that takes in a component, wraps it, and returns a component
What is a pure component vs a normal one vs a higher order one?
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
Why is it important to use setState() and replace the whole object instead of editing it directly?
It follows functional programming paradigm; cleaner and prevents consistency problems
What is a “thunk”? What is redux-thunk used for?
Thunk is a function that wraps an expression to delay its evaluation
Used for delaying dispatch of an action or based on a condition
