Intermediate React, v3
This course has been updated! We now recommend you take the Intermediate React, v5 course.
Table of Contents
IntroductionBrian Holt introduces the course, briefly describes prerequisites, and provides resources including the course website and GitHub repository that will be used throughout the course.
useStateBrian demonstrates the useState hook using a premade code sandbox and answers students questions regarding what is re-rendered when setIsGreen is called and how to specify a component that should not be re rendered. The useState hook holds the application's state which then can be used to update function parameters.
useEffectBrian demonstrates useEffect in a timer example which re-renders every second and answers student questions regarding if the effect will only render once with an empty array, where useEffect can be used, and how promises are handled with useEffect. Effects are similar to the componentDidMount, componentDidUpdate, and componentDidMount lifecycle methods in React.
useContextBrian discusses an early problem with React called "data tunneling" or "prop drilling" and how useContext can be used to pass down data from a parent component to a child component directly. Questions about the second argument in useContext and if Redux and useContext are similar are also covered in this segment.
useRefBrian discusses how the useRef hook holds a piece of state through multiple re-rendering cycles. A student's question regarding if useRef contains the original or a copy of the object is also covered in this segment.
useReducerBrian demonstrates how the useReducer hook can be used to allow state to be treated like a local Redux store by walking through and making adjustments to a prewritten rgb component. A student's question regarding if useContext and useReducer could be used to recreate Redux is also covered in this segment.
useMemoBrian demonstrates how the useMemo hook can be used for performance optimization with a Fibonacci calculator. The useMemo hook can be used to memoize expensive function calls and only call them again when needed. Student questions regarding why the title color changes, if useEffect could be used instead of useMemo to accomplish the same goal, and if useMemo could be used to avoid multiple API calls are also covered in this segment.
useCallbackBrian demonstrates how to use the useCallback hook with React.memo to re-render an expensive computation only when absolutely necessary. The useCallback hook takes in a function and returns a memoized version of the callback only when one of the dependencies are called.
useLayoutEffectBrian discusses the similarities between useEffect and useLayoutEffect and explains that useLayoutEffect is executed synchronous with specific mutations on the DOM. The useLayoutEffect hook can block visual updates and should only be used to measure DOM nodes for things like animations. A student's question regarding how to set the default width and height of the example textbox is also covered in this segment.
useImperativeHandleBrian demonstrates how to use the useImperativeHandle hook in conjunction with forwardRef and React.focus to allow the child component to customize the value given back to the parent component. The useImperativeHandle hook is typically used by library authors to allow users to call internal functions.
useDebugValueBrian discusses the useDebugValue hook and it's typical application by library authors for displaying a label for custom hooks in the React DevTools. This hook can be used similarly to a console.log for a custom hook to help with debugging. A student's question regarding if all callbacks should be wrapped in useMemo is also covered in this segment.
CSS & ReactBrian discusses this course's history, some personal history with CSS and React, and the benefits and drawbacks of different methods of styling in React including standard CSS, emotion, and Tailwind CSS. A brief overview of the provided code repository is also covered in this segment.
Tailwind SetupBrian walks through setting up Tailwind and discusses the different packages that are being installed along with TailwindCSS including Autoprefixer. The contents of the .bin folder, how they are connected to the executed npx commands, ignoring rules in Visual Studio Code, and installing TailwindCSS IntelliSense are also covered in this segment.
Tailwind BasicsBrian demonstrates how to apply basic styling including padding, margin, background images, and adding a gradient to the application using TailwindCSS. The CSS is applied by writing multiple utility class names on an element which in turn avoids writing almost any CSS and greatly reduces the amount of data taken up by styling. Student's questions regarding how to switch to pixel measurements, if you can apply styles to children via a parent interaction, and how to use custom colors are also covered in this segment.
Styling with Tailwind PluginsBrian live codes the Tailwind form styling in the SearchParams.js file including drop shadows, flexbox layout, and aligning items on a grid.
Styling Forms with a Tailwind PluginBrian demonstrates how to install and use a Tailwind plugin that applies default styling to forms. The default styling can be overridden by manually styling the element with TailwindCSS.
Tailwind ComponentsBrain demonstrates how to create styling components to allow multiple elements to have the same styling in Tailwind without having to copy and paste the code to each element individually. A student's question regarding the function of PostCSS in conjunction with Tailwind is also covered in this segment.
Grid & Breakpoints in TailwindBrian walks through how to align items with breakpoints on a responsive grid. A student's question regarding if the importance of the order of class names is also covered in this segment.
Positioning in TailwindBrain demonstrates how to add positioning to the image's description containers relative to the image and shares some closing thoughts on TailwindCSS. A student's question regarding if a custom rhythm can be defined is also answered in this segment.
Code Splitting & Server Side Rendering
Q&A and Code Splitting ModalsBrian demonstrates how to code split within a component. Using code splitting to make large modals load asynchronously can help further decrease the page load time. Student questions about importing external CSS using lazy, adding pre-fetch or pre-load, if lazy loading works outside of Parcel, and if a lazy component can be used in the fallback are also covered in this segment.
Server Side RenderingBrian demonstrates how to reconfigure the Adopt Me application to run on a Node.js server using hydrate and removing all references to window. Server-side rendering speeds up loading time by running React on the Node.js server before serving the request to the user.
Building a Node.js ServerBrian walks through how to build a Node.js server using Express.js to statically serve the application after the Parcel build step. Sending back status codes from React Router is also covered in this segment.
Server Side Rendering Q&ABrian answers student questions regarding recommended performance measuring tools, only rendering the home page server side, and what to take into consideration when deciding whether or not to server side render.
Streaming MarkupBrian demonstrates reconfiguring index.js with renderToNodeStream which will render the React application in pieces. Rendering the application in pieces will allow the user to immediately start downloading the CSS and avoid any flashes in the browser while the app is still rendering.
TypeScript SetupBrian walks through installing and configuring the Adopt Me application to use TypeScript. TypeScript enables type-checking and adds another layer of protection to help avoid creating bugs.
TypeScript & ESLintBrian demonstrates how to fix ESLint with the typescript-eslint package and tooling to better integrate TypeScript and ESLint. The new plugins are added to the .eslintrc.json file and a new parser and resolver are configured.
Typing The API ResponseBrian walks through fixing the Details.tsx file and creating a new file to declare the different types of responses that will be received back from the API call. Explicitly setting the response types allows TypeScript to enforce those types whenever the API is referenced.
Typing ErrorBoundary & CarouselBrian demonstrates how to fix the ErrorBoundary and Carousel files by setting the types for each return function and fixing the errors thrown by ESLint. TypeScript requires a return type for each function to enforce stricter rules on what return types are accepted. Student questions regarding the function of the angle brackets around IProps and what is being auto imported are also covered in this segment.
Typing Function Components & HooksBrian walks through refactoring the Pet component to use TypeScript. What localCache expects as a key, setting the Status type, and ignoring promises returned is also covered in this segment.
Typing SearchParams, Results, & AppBrian live codes the refactoring of the SearchParams, Results, and App components so they follow the TypeScript rules enforced by ESLint. Demonstrations of what a missing property type looks like, how to write an optional property, and editing the package.json scripts are also covered in this segment.
Redux OverviewBrian introduces Redux, provides some history on how Redux originated, gives an overview of how the Redux store is organized as properties, and explains how Redux is testable. State management and a walk through of setting up Redux in React is also covered in this segment.
Creating ReducersBrian demonstrates how to create a root reducer and a reducer for the animal, location, breed, and theme states. Once given a state and an action a reducer can be created to handle changes in a specific part of the state tree.
Action Creators & ProvidersBrian live codes action creator functions for the location, breed, animal, and theme reducers. The action creator functions returns an action object with type and payload properties.
Dispatching ActionsBrian demonstrates implementing another hook called useDispatch which dispatches actions to Redux. With the dispatch hook implemented the changed state will be updated and rendered on the DOM. Editing SearchParams.js to accept a null breed value is also covered in this segment.
Redux Dev ToolsBrian demonstrates using the Redux Dev Tools to time travel debug, auto-generate tests, modify state, and see actions. A student's question about how the action is dispatched to the useReducer hook in the action is also covered in this segment.
Jest SetupBrian walks through setting up Jest, reconfiguring Babel to work with Node, setting up a testing environment, and creating new testing scripts. Guidelines for writing tests for applications are also covered in this segment.
Writing React Component TestsBrian demonstrates writing and running tests for the Pet component thumbnails, what a failed or passed test looks like, and how to enter interactive test mode. The application must be a Git repository to run interactive test mode.
Testing Custom HooksBrian live codes tests for the application's useBreedList custom hook by implementing a fake component to bypass the issue of custom hooks not being able to be called outside of a component. How to use the react-hooks library to automatically create fake hooks with renderHook and enabling mock fetch requests with Jest are also covered in this segment.
Snapshot TestingBrian demonstrates how to setup and use snapshot testing in Jest to verify code is correct when the snapshot was taken. Snapshot tests are low confidence, low cost ways of writing tests that also keep track of future changes.
IstanbulBrian walks through setting up Istanbul to check the test coverage of application files via an interactive viewer. Istanbul also creates an in depth report of the test coverage for what specifically is not being covered by your current tests.