React Flashcards
JSX
Nested JSX elements
In order for the code to compile, a JSX expression must have exactly one outermost element. In the below block of code the <a> tag is the outermost element.</a>
JSX
JSX Syntax and JavaScript
JSX is a syntax extension of JavaScript. It’s used to create DOM elements which are then rendered in the React DOM.
A JavaScript file containing JSX will have to be compiled before it reaches a web browser. The code block shows some example JavaScript code that will need to be compiled.
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Render me!</h1>, document.getElementById('app'));
JSX
Multiline JSX Expression
A JSX expression that spans multiple lines must be wrapped in parentheses: ( and ). In the example code, we see the opening parentheses on the same line as the constant declaration, before the JSX expression begins. We see the closing parentheses on the line following the end of the JSX expression.
const myList = (
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
);
JSX
JSX syntax and HTML
In the block of code we see the similarities between JSX syntax and HTML: they both use the angle bracket opening and closing tags (<h1> and </h1>).
When used in a React component, JSX will be rendered as HTML in the browser.
const title = <h1>Welcome all!</h1>
JSX
JSX attributes
The syntax of JSX attributes closely resembles that of HTML attributes. In the block of code, inside of the opening tag of the <h1> JSX element, we see an id attribute with the value “example”.
const example = <h1 id="example">JSX Attributes</h1>;
JSX
ReactDOM JavaScript library
The JavaScript library react-dom, sometimes called ReactDOM, renders JSX elements to the DOM by taking a JSX expression, creating a corresponding tree of DOM nodes, and adding that tree to the DOM.
The code example begins with ReactDOM.render(). The first argument is the JSX expression to be compiled and rendered and the second argument is the HTML element we want to append it to.
ReactDOM.render(
<h1>This is an example.</h1>,
document.getElementById('app')
);
JSX
Embedding JavaScript in JSX
JavaScript expressions may be embedded within JSX expressions. The embedded JavaScript expression must be wrapped in curly braces.
In the provided example, we are embedding the JavaScript expression 10 * 10 within the <h1> tag. When this JSX expression is rendered to the DOM, the embedded JavaScript expression is evaluated and rendered as 100 as the content of the <h1> tag.
let expr = <h1>{10 * 10}</h1>;
// above will be rendered as <h1>100</h1>
JSX
The Virtual Dom
React uses Virtual DOM, which can be thought of as a blueprint of the DOM. When any changes are made to React elements, the Virtual DOM is updated. The Virtual DOM finds the differences between it and the DOM and re-renders only the elements in the DOM that changed. This makes the Virtual DOM faster and more efficient than updating the entire DOM.
JSX
JSX className
In JSX, you can’t use the word class! You have to use className instead. This is because JSX gets translated into JavaScript, and class is a reserved word in JavaScript.
When JSX is rendered, JSX className attributes are automatically rendered as class attributes.
// When rendered, this JSX expression... const heading = <h1 className="large-heading">Codecademy</h1>; // ...will be rendered as this HTML <h1 class="large-heading">Codecademy</h1>
JSX
JSX and conditional
In JSX, && is commonly used to render an element based on a boolean condition. && works best in conditionals that will sometimes do an action, but other times do nothing at all.
If the expression on the left of the && evaluates as true, then the JSX on the right of the && will be rendered. If the first expression is false, however, then the JSX to the right of the && will be ignored and not rendered.
// All of the list items will display if
// baby is false and age is above 25
const tasty = (
<ul>
<li>Applesauce</li>
{ !baby && <li>Pizza</li> }
{ age > 15 && <li>Brussels Sprouts</li> }
{ age > 20 && <li>Oysters</li> }
{ age > 25 && <li>Grappa</li> }
</ul>
);
JSX
JSX conditionals
JSX does not support if/else syntax in embedded JavaScript. There are three ways to express conditionals for use with JSX elements:
a ternary within curly braces in JSX
an if statement outside a JSX element, or
the && operator.
JSX
Embedding JavaScript code in JSX
Any text between JSX tags will be read as text content, not as JavaScript. In order for the text to be read as JavaScript, the code must be embedded between curly braces { }.
<p>{ Math.random() }</p>
// Above JSX will be rendered something like this:
<p>0.88</p>
JSX
JSX element event listeners
In JSX, event listeners are specified as attributes on elements. An event listener attribute’s name should be written in camelCase, such as onClick for an onclick event, and onMouseOver for an onmouseover event.
An event listener attribute’s value should be a function. Event listener functions can be declared inline or as variables and they can optionally take one argument representing the event.
JSX
Setting JSX attribute values with embedded JavaScript
When writing JSX, it’s common to set attributes using embedded JavaScript variables.
const introClass = "introduction";
const introParagraph = <p className={introClass}>Hello world</p>;
JSX
JSX .map() method
The array method map() comes up often in React. It’s good to get in the habit of using it alongside JSX.
If you want to create a list of JSX elements from a given array, then map() over each element in the array, returning a list item for each one.
const strings = ['Home', 'Shop', 'About Me'];
const listItems = strings.map(string => <li>{string}</li>);
<ul>{listItems}</ul>
JSX
JSX empty elements syntax
In JSX, empty elements must explicitly be closed using a closing slash at the end of their tag: <tagName></tagName>.
A couple examples of empty element tags that must explicitly be closed include <br></br> and <img></img>.
<br /> <img src="example_url" />
JSX
React.createElement() Creates Virtual DOM Elements
The React.createElement() function is used by React to actually create virtual DOM elements from JSX. When the JSX is compiled, it is replaced by calls to React.createElement().
You usually won’t write this function yourself, but it’s useful to know about.
JSX
JSX key attribute
In JSX elements in a list, the key attribute is used to uniquely identify individual elements. It is declared like any other attribute.
Keys can help performance because they allow React to keep track of whether individual list items should be rendered, or if the order of individual items is important.
<ul> <li key="key1">One</li> <li key="key2">Two</li> <li key="key3">Three</li> <li key="key4">Four</li> </ul>
React Components
render() Method
React class components must have a render() method. This method should return some React elements created with JSX.
React class components need to inherit from the React.Component base class and have a render() method. Other than that, they follow regular JavaScript class syntax.
This example shows a simple React class component.
React Components
Importing React and React Components
In order to use React, we must first import the React library. When we import the library, it creates an object that contains properties needed to make React work, including JSX and creating custom components.
A React component is a reusable piece of code used to define the appearance, behavior, and state of a portion of a web app’s interface. Components are defined as functions or as classes. Using the component as a factory, an infinite number of component instances can be created.
React Components
JSX Capitalization
React requires that the first letter of components be capitalized. JSX will use this capitalization to tell the difference between an HTML tag and a component instance. If the first letter of a name is capitalized, then JSX knows it’s a component instance; if not, then it’s an HTML element.
// This is considered a component by React. <ThisComponent /> // This is considered a JSX HTML tag. <div>
React Components
ReactDOM.render()
ReactDOM.render()‘s first argument is a component instance. It will render that component instance.
In this example, we will render an instance of MyComponent.
React Components
Multi-line JSX Expressions
Parentheses are used when writing a multi-line JSX expression. In the example, we see that the component’s render() method is split over multiple lines. Therefore it is wrapped in parentheses.
React Components
Code in render()
A React component can contain JavaScript before any JSX is returned. The JavaScript before the return statement informs any logic necessary to render the component.
In the example code, we see JavaScript prior to the return statement which rounds the value to an integer.
React Components
Object Properties As Attribute Values
In React, JSX attribute values can be set through data stored in regular JavaScript objects. We see this in the example block of code.
In our code example we first see our JavaScript object seaAnemones and the values stored with this image. We then see how these stored values are used to set the <img></img> attributes in our JSX expression for the SeaAnemones component.
Components Interacting
Returning HTML Elements and Components
A class component’s render() method can return any JSX, including a mix of HTML elements and custom React components.
In the example, we return a <Logo></Logo> component and a “vanilla” HTML title.
This assumes that <Logo></Logo> is defined elsewhere.
Components Interacting
React Component File Organization
It is common to keep each React component in its own file, export it, and import it wherever else it is needed. This file organization helps make components reusable. You don’t need to do this, but it’s a useful convention.
In the example, we might have two files: App.js, which is the top-level component for our app, and Clock.js, a sub-component.
Components Interacting
this.props
React class components can access their props with the this.props object.
In the example code below, we see the <Hello> component being rendered with a firstName prop. It is accessed in the component’s render() method with this.props.firstName.</Hello>
This should render the text “Hi there, Kim!”
Components Interacting
defaultProps
A React component’s defaultProps object contains default values to be used in case props are not passed. If a prop is not passed to a component, then it will be replaced with the value in the defaultProps object.
In the example code, defaultProps is set so that profiles have a fallback profile picture if none is set. The <MyFriends> component should render two profiles: one with a set profile picture and one with the fallback profile picture.</MyFriends>
Lifecycle Methods
Component Mount
A React component mounts when it renders to the DOM for the first time. If it’s already mounted, a component can be rendered again if it needs to change its appearance or content.
Lifecycle Methods
Unmounting Lifecycle Method
React supports one unmounting lifecycle method, componentWillUnmount, which will be called right before a component is removed from the DOM.
componentWillUnmount() is used to do any necessary cleanup (canceling any timers or intervals, for example) before the component disappears.
Note that the this.setState() method should not be called inside componentWillUnmount() because the component will not be re-rendered.
componentWillUnmount(prevProps, prevState) {
clearInterval(this.interval);
}
Lifecycle Methods
Component Mounting Phase
A component “mounts” when it renders for the first time. When a component mounts, it automatically calls these three methods, in the order of:
- constructor()
- render()
- componentDidUpdate()
Lifecycle Methods
Lifecycle Phases
There are three categories of lifecycle methods: mounting, updating, and unmounting.
A component “mounts” when it renders for the first time. This is when mounting lifecycle methods get called.
The first time that a component instance renders, it does not update. Starting with the second render, a component updates every time that it renders.
A component’s unmounting period occurs when the component is removed from the DOM. This could happen if the DOM is rerendered without the component, or if the user navigates to a different website or closes their web browser.
Lifecycle Methods
Mounting Lifecycle Methods
React supports three mounting lifecycle methods for component classes: componentWillMount(), render(), and componentDidMount(). componentWillMount() will be called first followed by the render() method and finally the componentDidMount() method.
Lifecycle Methods
Updating Lifecycle Method
When a component updates, shouldComponentUpdate() gets called after componentWillReceiveProps(), but still before the rendering begins. It automatically receives two arguments: nextProps and nextState.
shouldComponentUpdate() should return either true or false. The best way to use this method is to have it return false only under certain conditions. If those conditions are met, then your component will not update.
Hooks
Function Components
In React, you can use a function as a component instead of a class. Function components receive props as a parameter.
In the example code, we show two equivalent components: one as a class and one as a function.
Hooks
Why Hooks?
Hooks are functions that let us “hook into” state and lifecycle functionality in function components.
Hooks allow us to:
- reuse stateful logic between components
- simplify and organize our code to separate concerns, rather allowing unrelated data to get tangled up together
- avoid confusion around the behavior of the this keyword
- avoid class constructors, binding methods, and related advanced JavaScript techniques
Hooks
Rules for Using Hooks
There are two main rules to keep in mind when using Hooks:
Only call Hooks from React function components.
Only call Hooks at the top level, to be sure that Hooks are called in the same order each time a component renders.
Common mistakes to avoid are calling Hooks inside of loops, conditions, or nested functions.
Hooks
The State Hook
The useState() Hook lets you add React state to function components. It should be called at the top level of a React function definition to manage its state.
initialState is an optional value that can be used to set the value of currentState for the first render. The stateSetter function is used to update the value of currentState and rerender our component with the next state value.
const [currentState, stateSetter] = useState(initialState);
Hooks
State Setter Callback Function
When the previous state value is used to calculate the next state value, pass a function to the state setter. This function accepts the previous value as an argument and returns an updated value.
If the previous state is not used to compute the next state, just pass the next state value as the argument for the state setter.
Hooks
Multiple State Hooks
useState() may be called more than once in a component. This gives us the freedom to separate concerns, simplify our state setter logic, and organize our code in whatever way makes the most sense to us!
Hooks
The Effect Hook
After importing useEffect() from the ‘react’ library, we call this Hook at the top level of a React function definition to perform a side effect. The callback function that we pass as the first argument of useEffect() is where we write whatever JavaScript code that we’d like React to call after each render.
Hooks
Effect Cleanup Functions
The cleanup function is optionally returned by the first argument of the Effect Hook.
If the effect does anything that needs to be cleaned up to prevent memory leaks, then the effect returns a cleanup function. The Effect Hook will call this cleanup function before calling the effect again as well as when the component is being unmounted from the DOM.
Hooks
Multiple Effect Hooks
useEffect() may be called more than once in a component. This gives us the freedom to individually configure our dependency arrays, separate concerns, and organize our code in whatever way makes the most sense to us!
Hooks
Effect Dependency Array
The dependency array is used to tell the useEffect() method when to call our effect.
By default, with no dependency array provided, our effect is called after every render. An empty dependency array signals that our effect never needs to be re-run. A non-empty dependency array signals to the Effect Hook that it only needs to call our effect again when the value of one of the listed dependencies has changed.
Stateless Components From Stateful Components
Stateful and Stateless Components
In React, a stateful component is a component that holds some state. Stateless components, by contrast, have no state. Note that both types of components can use props.
In the example, there are two React components. The Store component is stateful and the Week component is stateless.
Stateless Components From Stateful Components
React Programming Pattern
One of the most common programming patterns in React is to use stateful parent components to maintain their own state and pass it down to one or more stateless child components as props. The example code shows a basic example.
Stateless Components From Stateful Components
Changing Props and State
In React, a component should never change its own props directly. A parent component should change them.
State, on the other hand, is the opposite of props: a component keeps track of its own state and can change it at any time.
The example code shows a component that accepts a prop, subtitle, which never changes. It also has a state object which does change.
Stateless Components From Stateful Components
Passing State Change Functions as Props
If a React parent component defines a function that changes its state, that function can be passed to a child component and called within the component to updating the parent component’s state.
In this example, because this.setState() causes the Name component to re-render, any change to the <input></input> will update the Name component’s state, causing a new render and displaying the new state value to the <p> tag content.
Stateless Components From Stateful Components
Event Handlers and State in React
Event handler functions in React are often used to update state. These handler functions often receive an event as an argument, which is used to update state values correctly.
In the example code, we use event.target.value to get the input’s value.
Stateless Components From Stateful Components
Using Stateless Updaters and Presenters
A common React programming pattern is to use a parent stateful component to manage state and define state-updating methods. Then, it will render stateless child components.
One or more of those child components will be responsible for updating the parent state (via methods passed as props). One or more of those child components will be responsible for displaying that state.
In the example code, StatefulParent renders <InputComponent> to change its state and uses <DisplayComponent> to display it.</DisplayComponent></InputComponent>
Additional React Basics
React CSS Styles
React supports inline CSS styles for elements. Styles are supplied as a style prop with a JavaScript object.
Additional React Basics
Style Names And Values
In React, style names are written in “camelCase”, unlike in CSS where they are hyphenated. In most cases, style values are written as strings. When entering numeric values, you don’t have to enter px because React automatically interprets them as pixel values.
Additional React Basics
Presentational and Container Components
A common programming pattern in React is to have presentational and container components. Container components contain business logic (methods) and handle state. Presentational components render that behavior and state to the user.
In the example code, CounterContainer is a container component and Counter is a presentational component.
Additional React Basics
Static Property
In React, prop types are set as a static property (.propTypes) on a component class or a function component. .propTypes is an object with property names matching the expected props and values matching the expected value of that prop type. The code snippet above demonstrates how .propTypes can be applied.
Additional React Basics
Controlled vs. Uncontrolled Form Fields
In React, form fields are considered either uncontrolled, meaning they maintain their own state, or controlled, meaning that some parent maintains their state and passes it to them to display. Usually, the form fields will be controlled.
The example code shows an uncontrolled and controlled input.
Additional React Basics
Controlled Components
A controlled form element in React is built with a change handler function and a value attribute.
Advanced React: Custom Hooks
The Effect Hook
After importing useEffect() from the ‘react’ library, we call this Hook at the top level of a React function definition to perform a side effect. The callback function that we pass as the first argument of useEffect() is where we write whatever JavaScript code that we’d like React to call after each render.
Advanced React: Custom Hooks
Rules for Using Hooks
There are two main rules to keep in mind when using Hooks:
Only call Hooks from React function components.
Only call Hooks at the top level, to be sure that Hooks are called in the same order each time a component renders.
Common mistakes to avoid are calling Hooks inside of loops, conditions, or nested functions.
Advanced React: Custom Hooks
Effect hooks
Effect hooks are useful for performing “side effects” after render such as fetching data and reacting to state changes.
Advanced React: Custom Hooks
Effect Dependency Array
The dependency array is used to tell the useEffect() method when to call our effect.
By default, with no dependency array provided, our effect is called after every render. An empty dependency array signals that our effect never needs to be re-run. A non-empty dependency array signals to the Effect Hook that it only needs to call our effect again when the value of one of the listed dependencies has changed.
Advanced React: Custom Hooks
Custom Hooks
Custom Hooks are JavaScript functions that make use of other hooks, follow the rules of hooks, and whose names begin with use. Custom hooks are simply a convention and the programmer can decide what they do and what they return.
The provided example is from the Playing Hooky project. This custom hook changes the page’s appearance to “dark” or “light” mode while providing the current theme value for use elsewhere in the application.
Advanced React: Context
Context Providers
React Context objects include a .Provider property that is a React component. It takes in a value prop to be made available to all its descendent components.
Advanced React: Context
Using Context Values
Descendents of a Context Provider may subscribe to the Provider’s data by passing the Context object to React’s useContext() hook.
Advanced React: Context
Creating Contexts
The React.createContext() function creates and returns a React Context object.
Advanced React: Context
Dynamic Context Values
A Context’s .Provider component may provide both a state value and its updater function via the value prop.
Advanced React: Context
Context Wrappers
Some React applications use a dedicated “wrapper” component around a Context Provider to set up state for the Context. Doing so can help standardize setting up state for each usage of the Provider.
Advanced React: Context
Multiple Providers
A .Provider component can be used in multiple places in your application to provide different values for that sub tree.
Advanced React: Context
Prop Drilling
Prop drilling is the term for when a piece of data is passed as a prop through a large number of components in a React application.
Advanced React: Context
Downsides of Prop Drilling
Downsides of prop drilling include components being harder to understand and excess rerenders of components that pass props without using them.
Advanced React: Error Boundaries
What Is an Error Boundary?
Error boundaries are React components that wrap sections of a React application, catching runtime errors anywhere in their child component tree. They have three primary features:
- Displaying a backup user-interface (a “fallback UI”)
- Logging errors
- Allowing the broken component to recover
Advanced React: Error Boundaries
How Do Error Boundaries Render a Fallback UI?
The static getDerivedStateFromError() lifecycle method is used to update the error boundary’s error state and trigger a fallback UI to be rendered.
This lifecycle method is invoked after an error has been thrown by a descendant component, receiving the error that was thrown as an argument. It should then return the error boundary’s next this.state value which may be used to determine what to render: a provided fallback UI or the default wrapped component tree.
Advanced React: Error Boundaries
How Does the <ErrorBoundary> Component From react-error-boundary Log Errors?
The ErrorBoundary component from react-error-boundary accepts an onError prop whose value should be a callback function that will be called when an error is caught.
This function receives two parameters:
- error — the error that was thrown with a .message property
- errorInfo — an object with a .componentStack property containing the stack of rendered components that led to the error
Advanced React: Error Boundaries
What Is the react-error-boundary Package?
The react-error-boundary package exports an ErrorBoundary component. Among other things, it can be wrapped around a component tree to render a fallback UI and log errors in the event that a runtime error occurs.
Advanced React: Error Boundaries
How Does the <ErrorBoundary> Component from react-error-boundary Render a Fallback?
The ErrorBoundary component from react-error-boundary accepts a FallbackComponent prop whose value should be a React component to render as a fallback UI when an error occurs.
The component passed as the FallbackComponentwill receive two props:
- error — the error that was thrown with a .message property
- resetErrorBoundary — a callback function to reset the error boundary
Advanced React: Error Boundaries
How Does the <ErrorBoundary> Component from react-error-boundary Render a Fallback?
The ErrorBoundary component from react-error-boundary accepts a FallbackComponent prop whose value should be a React component to render as a fallback UI when an error occurs.
The component passed as the FallbackComponentwill receive two props:
- error — the error that was thrown with a .message property
- resetErrorBoundary — a callback function to reset the error boundary
How Do Error Boundaries Log Errors?
How Do Error Boundaries Log Errors?
The componentDidCatch() lifecycle method used for error logging. It is called by React after an error has been thrown by one of its descendants. It receives an error object representing the thrown error. It also receives an errorInfo object with a .componentStack property containing the stack of rendered components that led to the error.
Advanced React: Optimization
The React profiler flame graph
A flame graph in the React profiler displays all components that were rendered during a session. Components that took longer to render are displayed in yellow, while ones that took less time to render are displayed in blue.
Advanced React: Optimization
Memoizing React components
React.memo() memoizes a React component. It takes a React component as an argument, then when given the same props, it will prevent React from re-rendering the provided component even when its parent re-renders.
Advanced React: Optimization
Memoizing functions
React provides the useCallback() hook to memoize functions. It takes two arguments, a function, and a list of dependencies. Given the same list of dependencies, useCallback() will return a memoized function.
Advanced React: Optimization
Code splitting a module
The import() function imports a module while instructing the bundler to create a separate chunk for the imported module. import() takes one argument, which is the path of a module. import() returns a JavaScript Promise.
Advanced React: Optimization
Code splitting a component
The React.lazy() function imports a React component while instructing the bundler to create a separate chunk for the imported component. React.lazy() takes one argument, a function that returns an import(), which takes a path to a React component as its argument.
Advanced React: Optimization
Suspense
The <Suspense> React component wraps components imported with React.lazy(). <Suspense> instructs React to load the rest of the React app and to display a loading state while the React component is downloaded and rendered. <Suspense> takes one prop named fallback, which is a React component shown while its lazily loaded children are unavailable.</Suspense></Suspense></Suspense>
