This course has been updated! We now recommend you take the Intermediate React, v5 course.
Table of Contents
Introduction
Introduction
Brian introduces the course, the course website, and how the repository is structured to be modular so that students can watch segments independently of one another.
Course Repository Tour
Brian clones the repository, gives a brief tour of the repository (including how to take the course offline), and spins up the application that was finished during Introduction to React.
Basic Hooks
useState
Brian reviews the useState hook to keep track of state inside a function component. A cardinal rule for using hooks are also covered regarding their use in conditionals or control flow statements.
useEffect
Brian reviews the useEffect hook to handle side effects in function components. How dependencies affect the functionality of the hook is discussed.
useContext
Brian reviews the useContext hook to pass a context value down through to the context.
Hooks In-Depth
useRef
Brian introduces the useRef hook to do actions such as holding on to DOM elements, timeouts, or intervals.
useReducer
Brian introduces the useReducer hook that takes a function and an initial state, then returns new state with a dispatch function that dispatches an action to the user. Attention is given to how this, in conjunction with useContext, could replace Redux.
useMemo
Brian introduces the useMemo hook that only reruns a given function if a given dependency has changed.
useCallback
Brian introduces the useCallback hook that returns the same function instead of redefining the function each time it's called.
useLayoutEffect
Brian introduces the useLayoutEffect hook, which allows the user to read layout from the DOM, and synchronously re-render the page.
useImperativeHandle
Brian introduces the useImperativeHandle hook, which allows the child to expose a function to the parent.
CSS in JS
Emotion Setup & Nav Bar
Brian introduces the emotionjs library, designed to allow users to insert css in JavaScript, and uses it to create a navigation bar component.
Template Literals & Hooks
Brian demonstrates how to set a CSS property to a variable in JavaScript, and assign it using a template literal. An example is also given on how to maintain state between user actions using hooks. Attention is given to how using CSS in JS increases maintainability of a codebase.
Design Systems & Compound Selectors
Brian demonstrates how to centralize a design system, and import it into code. Compound selectors are also demonstrated by implementing a underline on hover state on an element.
Animations
Brian demonstrates how easy it is to add a keyframe into a JavaScript file by making a poodle spin on the page.
Code Splitting
Code Splitting Routes
Brian introduces the concept of code splitting to increase the performance of the application. The lazy and Suspense React modules are inserted into the code, and a component is refactored to be a placeholder component that will not load until the component is rendered for the first time.
Code Splitting Libraries & Child Components
Brian demonstrates how to perform code splitting on a library, and demonstrates that the performance is only affected the first time that a component is loaded. Brian then goes on to demonstrate how to load a modal only if it's used.
Code Splitting Review and Q&A
Students ask questions about the Suspense module, and using code splitting with Parcel vs Webpack. Brian wraps up the section, and resets the code for the next segment of the course.
Server Side Rendering
SSR Rationale & Initial Setup
Brian explains why it's performant to introduce server side rendering to an application. The hydrate function is utilized to take over a page, rather than blow it away, several modules are installed, and the package.json is edited to setup the application to handle Node.js.
Server Side Rendering to Strings
Brian sets up a basic Node.js server that renders the markup on the server, then sends it down to the server as complete markup.
Server Side Rendering to Node Stream
Brian introduces an another method that delivers responses in chunks for better performance in large applications.
TypeScript with React
TypeScript Introduction
Brian gives rationale for why TypeScript could be useful for developers, and the TypeScript features that are already built into VS Code, including built-in static type checking, and inline documentation on the fly.
TypeScript Configuration for React
Brian initialized the application as a typescript project, installs TypeScript, then installs the type definitions necessary to convert the application to TypeScript.
Typing the Modal Component
Brian converts the first component to TypeScript.
Migrating to TSLint
Brian rips ESLint out of the application, and installs the relevant TSLint packages. The TSLint configuration file is also created, and several helpful rules are implemented that aren't absolutely necessary, but make developing much easier, as well as rules that allow TSLint to work with hooks.
Typing Context
Brian gives a type to the React Context API, and demonstrates how to tell TS that there is a strict ordering of string and function to make other files easier to type.
Typing a Class Component
Brian demonstrates how to see type definitions within VS Code, briefly calls out private versus public types, and discusses typing public class properties as well as how to type arrays.
Typing an Error Boundary
Brian demonstrates how to type an error boundary, and imports ErrorInfo.
Props & State Interfaces
Brian implements interfaces into components to handle props and state, and types a FunctionComponent.
Heterogenous Arrays & Hooks
Brian types several more components, and demonstrates how to type heterogeneous arrays, and hooks while typing the remaining components.
TypeScript Review and Q&A
Brian wraps up converting the application to TypeScript, and runs the finished application. A question is asked about whether it's appropriate to separate interfaces to another file, and a typecheck script is introduced in the package.json to ensure that the code compiles correctly, even if the user isn't using Visual Studio Code. Brian leaves the audience with thoughts about the tradeoff between the struggle of fighting the compiler and maintaining a project over the long-term
Redux
Redux Introduction
Brian begins introducing Redux with a disclaimer on why the Redux section of the course is significantly shorter than previous versions of the course, and why it's still being taught in this course. The process that Redux uses is stepped through, and it's explained why it's valuable.
Creating a Store
Brian begins creating a Redux store, which is at its core a reducer.
Creating a Reducer
Brian explains best practices for writing reducers, as well as requirements and philosophy behind them. The reducers directory is created with an index.js file, and combineReducers is imported as a convenience root reducer. Two reducers are created, and wired into the root reducer.
Creating Actions
Brian demonstrates how to create an action that takes a reducer and returns an action.
Connecting Redux to the Application
Brian is able to delete a lot of code by introducing the Provider, which makes the store available anywhere in the app, and connect, which allows developers to select things out of state and put them in props as if they were in normal state. The mapDispatchToProps and mapDispatchToState are also tools introduced in this section.
Redux Devtools
Brian introduces some of the features provided by the developer tools, including the ability to walk through state, and built-in unit test integration.
Completing the Redux Wiring
Brian completes the last portion of the application with Redux.
Testing React
Jest & React Testing Library
Brian introduces naming conventions on the test folder for jest, and installs the react testing library and jest packages into the application.
API Mocks
Brian constructs an API mock that prevents the API from being affects extensively during testing, and also to make "API requests" in Node.js
Component Tests
Brian writes several tests for the search parameters component using the mock API that test the functionality of the component, and discusses the challenge of async await in React tests.
Snapshots, Watch Mode & Test Coverage
Brian explains what a snapshot is, creates a test that checks that the data returned matches the snapshot. How to update a snapshot when an intentional change is created, and watch mode is introduced, that allows for an interactive mode that allows for changes to tests on the fly. Istanbul is utilized within Jest as a test coverage tool to demonstrate how much of a codebase is covered by tests.