Intermediate React, v2
This course has been updated! We now recommend you take the Intermediate React, v5 course.
Table of Contents
IntroductionBrian 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 TourBrian 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.
useStateBrian 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.
useEffectBrian reviews the useEffect hook to handle side effects in function components. How dependencies affect the functionality of the hook is discussed.
useContextBrian reviews the useContext hook to pass a context value down through to the context.
useRefBrian introduces the useRef hook to do actions such as holding on to DOM elements, timeouts, or intervals.
useReducerBrian 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.
useMemoBrian introduces the useMemo hook that only reruns a given function if a given dependency has changed.
useCallbackBrian introduces the useCallback hook that returns the same function instead of redefining the function each time it's called.
useLayoutEffectBrian introduces the useLayoutEffect hook, which allows the user to read layout from the DOM, and synchronously re-render the page.
useImperativeHandleBrian introduces the useImperativeHandle hook, which allows the child to expose a function to the parent.
CSS in JS
Design Systems & Compound SelectorsBrian 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.
Code Splitting RoutesBrian 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 ComponentsBrian 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&AStudents 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 SetupBrian 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 StringsBrian 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 StreamBrian introduces an another method that delivers responses in chunks for better performance in large applications.
TypeScript with React
TypeScript IntroductionBrian 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 ReactBrian initialized the application as a typescript project, installs TypeScript, then installs the type definitions necessary to convert the application to TypeScript.
Typing the Modal ComponentBrian converts the first component to TypeScript.
Migrating to TSLintBrian 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 ContextBrian 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 ComponentBrian 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 BoundaryBrian demonstrates how to type an error boundary, and imports ErrorInfo.
Props & State InterfacesBrian implements interfaces into components to handle props and state, and types a FunctionComponent.
Heterogenous Arrays & HooksBrian types several more components, and demonstrates how to type heterogeneous arrays, and hooks while typing the remaining components.
TypeScript Review and Q&ABrian 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 IntroductionBrian 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 StoreBrian begins creating a Redux store, which is at its core a reducer.
Creating a ReducerBrian 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 ActionsBrian demonstrates how to create an action that takes a reducer and returns an action.
Connecting Redux to the ApplicationBrian 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 DevtoolsBrian 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 WiringBrian completes the last portion of the application with Redux.
Jest & React Testing LibraryBrian introduces naming conventions on the test folder for jest, and installs the react testing library and jest packages into the application.
API MocksBrian constructs an API mock that prevents the API from being affects extensively during testing, and also to make "API requests" in Node.js
Component TestsBrian 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 CoverageBrian 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.