React Flashcards
What are the features of React?
JSX: syntax extension for JS, can write HTML in same file as JS
Components: splits application into independent reusable parts
Virtual DOM: when state changes virtual DOM only changes the object in the real DOM instead of updating all the objects
Can web browsers read JSX directly?
No, they are built to only read regular JS objects which JSX is not.
What is the virtual DOM?
A lightweight representation of the real DOM stored in memory, when the state of an object changes, the virtual DOM changes only that object in the real DOM
What is the difference between the ES6 and ES5 standards?
components and functions
exports vs export
require vs import
What is an event in React?
An action the user or system triggers such as a mouse click, pressing a button
ex. onClick is the event
What is a synthetic event?
An example is preventDefault()
Explain how lists work in React.
the traversal of lists is done using the map() function
Why is there a need for using keys in Lists?
a key is a unique identifier and is used to see which items have changed from the list and determines which items need to be re-rendered.
What are forms in React?
Forms allow the user to interact with the application and enter the required information whenever needed.
How do you create forms in React?
set useState for each input, use onChange to set the state of specific field, create a handleSubmit to for when the user clicks a submit button.
How do you write comments in React?
For single line #
For multiple lines {/* */}
What is an arrow function and how is it used in React?
shorter way of writing a function and there is no need to bind this inside the constructor.
What are components in React?
A piece of the user interface. Components splits the interface into independent reusable parts that can be processed separately.
Function components vs Class components
Functional: AKA stateless components, have no state of their own and only contain render methods
Class: AKA stateful components, can hold and manage their own state and have a separate render method to return JSX.
What is the use of the render() method in React?
Returns the HTML which is displayed in the component
What is state in React?
a built in React object that is used to contain data or information about the component. When the state changes the component re-renders
What are props in React?
Provide a way to pass data from one component to another, the same way arguments are passed to a function.
Difference between state and props?
State: holds information about the components
Props: allows to pass data from one component to other components as arguments.
What is a higher-order component in React?
Acts as a container for other components, helps to keep components simple and enables re-usability.
What is Redux?
an open-source JS library used to manage the application state.
What are the components of Redux?
Store: holds the state of the application
Action: the source information for the store
Reducer: specifies how the applications state changes in response to actions sent to the store
What is React Router?
A routing library built on top of React, where you can define the routes of an application
What are React hooks?
it allows you to use state and other react features without a class, can extract stateful logic from a component
What does useEffect do?
tells the react component to do something after re-render
What does useState do?
allows us to track state in a functional component
what does useMemo do?
keeps resource intensive functions from running needlessly
React Hook rules
could only be called inside functional components
cannot be conditional
can only be called at the top level of a component
