React Flashcards
React manages …
the creation and updating of DOM nodes in your Web page. It does not do AJAX. It does not do services. It does not do local storage. It does not provide a pretty CSS framework for you. It just dynamically renders stuff into the DOM.
Because browsers only understand JavaScript and not JSX, there is an extra “build step” involved with creating React-based front-end applications. There are a variety of tools that software developers use to make this happen. The most popular, right now, is to use a tool called Webpack. Later this week, you’ll get into some of the details about how that works.
hot module replacement (HMR)
HMR sense what has changed and send the change to the browser without you having to refresh it. The changes are delivered in real-time, updating the UI for you as you make changes to the source code.
React concepts/features
Modularity
Declarative programming
In the same way that you use HTML to declare what the user interface should look like, React provides the same mechanism in its element-based programming API through the higher-level language known as JSX.
Reusability
React encourages you to think in terms of reusability as you construct the user interface from elements and components that you create.
One-flow of data
React applications are built as a combination of parent and child components. As the names suggest, each child component has a parent and a parent component will have one or more child components. Components receive data via an argument traditionally named props. Parent components can decide the data that its children should show by passing only a subset of what it has to its children. Data is never passed up from the child to the parent. Because you always know which way data flows, you can more easily debug your application to determine where the data display or event handling code is.
React solves this problem by providing a virtual DOM (in memory) that acts as an agent between the developer and the real DOM. It is constantly monitors the virtual DOM for changes. It very efficiently reconciles changes in the virtual DOM with what it has already produced in the real DOM. This is what makes React one of the speediest front-end libraries available.
Finally, you learned that React will compare an old virtual DOM tree with a new virtual DOM tree, figure out what changed, and then change that and only that in the real DOM.
function component
a function that returns a JSX element.
You cannot return undefined from a function component. React will not build correctly when trying to render a component that returns undefined If you don’t want to render anything from a component, then return null instead.
React function components need to always return one JSX element as the highest level tag.
There are two ways to solve this issue. 1) wrap the elements in a parent element like another div, but this would generate another real HTML element. 2) wrap the elements in a JSX element called React.fragment and no other real HTML element will be created.
props
an object that gets passed down from the parent function component into the child function component
You can also explicitly define which props the child component should be expecting by destructuring the props object in the function component’s parameter.
Props should never be changed within the child component!
React Router
a frontend routing library that allows you to control which components to display using the browser location.
to provide your application access to the react-router-dom library; and
to connect specific URL paths to specific components you want rendered; and
to wrap several Route elements, rendering only one even if several match the current URL; and
React Router Navigation
or to create links with absolute paths to routes in your application (like “/users/1”)
to redirect a user to another path (i.e. a login page when the user is not logged in)
React Router’s useHistory hook to update a browser’s URL programmatically.
React Hooks
a way for function components to manage state and the component lifecycle. In short, they control when parts of the DOM are rerendered (a.k.a. redrawn) to reflect text, color, layout or other changes to the display. Some kinds of hooks are helpful in extracting stateful logic from a component to be independently tested and reused.
Hook
a special function that lets you “hook into” React features. Hooks let developers use state and other React features directly in a function component, without writing a class. In a sense, a hook “listens” for changes in order to trigger a response.
Hooks solve a wide variety of seemingly unconnected problems in React.
Attach reusable behavior to a component
Extract stateful logic from a component for independent testing and reuse
Split one component into smaller functions based on related pieces
Simplify understanding and architecture
useState
It declares a “state variable”. This is a way to “preserve” some values between the function calls (for a function component, that means rerenders). Normally, variables “disappear” when the function exits, but state variables are preserved by React.
useEffect
By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (referred to as “the effect”), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API.
Why is useEffect called inside a component? Placing useEffect inside the component allows you to access any state variable or prop right from the effect. You don’t need a special API to read it — it’s already in the function scope.
Does useEffect run after every render? Yes! By default, useEffect runs both after the first render and after every update (rerender). React guarantees the DOM has been updated by the time it runs the effects. It is possible to run your effect only when certain variables change (using the second argument).
What do you pass to useEffect as an argument? The first and only required argument is the function to call. Many times, however, you’ll also want to include the second argument which is an array of variables that the function depends on. This optimises performance by rerunning the effect only when necessary.
What does useEffect return? Nothing itself. However, if your function has an async aspect, you will want to have it return a way to cancel the asynchronous task. (More on this later.)
controlled components
But a React component keeps track of its own internal state. To keep a component’s state as the “one source of truth”, onChange event handlers are used on form field elements to update the component’s state when a form element’s state has changed.
This approach of making the component’s state the “one source of truth” is called controlled components. Inputs in a controlled component are called controlled inputs.
React Context
gives you a way to pass data through the component tree without having to manually thread props. Context gives developers a convenient way to share and update “global” data across a React application.
allows “global” data in a React application and stores a single value. A context’s Provider is used to wrap a React application to enable all components in the application to access the context’s value. A Consumer is a React component that reads a context’s value. Consumer components must always be nested under Provider components because the Provider must render first (parent components always render before children components).
useContext
a React hook that allows components to “consume” or read the value of a given context. If you pass in a context into the useContext hook, the hook will return the value of that context.
