This course has been updated! We now recommend you take the Intermediate React, v5 course.
Table of Contents
Introduction
Testing React
Writing a Component Test with Jest
To write your first React component test, create a magical __test__ folder which Jest knows to run all tests inside. You'll create your first test with Jest's toMatchSnapshot method. Brian also shows how to get Jest to pass ESLint.
Jest Snapshot Tests
Learn to run your first Jest snapshot test, and how to update the snapshots with the "-u" flag. Brian also discusses inline snapshots and when to use snapshots.
Creating a Jest CLI Script
Add the ability to run jest from your npm scripts.
Testing Component Methods
Learn to create a component test which tests component state and methods that interact with the component's state. Brian also verifies these tests by modifying the component logic.
Jest Watch
Jest Watch will run your tests as you're modifying files to get constant feedback on your code. Jest Watch also has smart performance features to keep your tests running fast as you code.
Code Coverage
Jest can generate test coverage reports for you by adding the coverage option. It even generates a coverage folder containing more data and an interactive coverage report.
Testing Philosophy & Q&A
Brian leans on his experience at Netflix to give his opinion on when to test your components. Brian tests his JavaScript modules, but rarely tests his UI because in his experience, the UI is always in a state of change.
CSS in JS
Install Emotion & Extract a Module
Brian's recommended CSS in JS library is emotion. Install emotion and react-emotion and extra the header component into its own module.
Styling Components with Emotion
Learn to create your first styled component with react-emotion. Brian argues that having all your style, behavior and markup in one file has a number of benefits.
Reusing Styles with JavaScript
Reuse styles through JavaScript modules and inject JavaScript variables into your styled components. The styles you add to components are scoped to that specific component.
Emotion Q&A
Brian answers questions about injecting global styles and explains why he suggests using emotion over styled components.
Animation with Emotion
Add an animation to a component with keyframes.
Why Emotion & CSS in JS
A student still isn't convinced, so Brian shows how to make your CSS interact with component state which would be very difficult to do outside of this approach. Brian also likes CSS modules as a middle ground between pure CSS and emotion.
Code Splitting
React Loadable
Reduce your initial JavaScript bundle size with Code Splitting. Using React Loadable, you can load your components when you need them, instead of loading them all at once.
Why Code Split & Q&A
Code Splitting makes your website more accessible to users with low internet connectivity. Brian answers a question about named exports and shows you how you can Code Split without React Loadable.
Splitting All Components
Code Splitting all components might not be a good idea since you're introducing network latency. Brian suggests a minimum amount of code to split off to get the benefit of Code Splitting.
Loading Modal HTML Asynchronously
Defer loading the contents of a component with React Loadable. Brian shows using React.Fragment to render multiple top level elements in a component.
Prefetch
Let the browser decide if it wants to prefetch bundles with script rel prefetch.
Code Splitting Without Loadable
Brian refers back to v3 of the course if you want to see implementing lazy loading components without using React Loadable.
Redux
Redux Overview
Redux makes the state of your application more predictable and testable. It can also make debugging great with the Redux Dev Tools. The major tradeoff in adopting Redux it increases your code's complexity.
Creating the Store
A store is can be created with a simple method call to createStore, but Brian augments Redux's abilities with the redux-thunk middleware and starts the Redux Dev Tools if it exists.
Root Reducer
Use combineReducers to delegate from the root reducer out to other reducers.
Creating a Reducer
Code a reducer that handles the set location action and returns the new location state in the store.
Recap & Testing a Reducer
A reducer is a pure function that takes old state, action and a payload and returns new state from that. Brian demonstrates how reducers are very testable because they are pure functions.
Adding More Reducers
Code all of the reducers that we'll need to handle state change in the Pet Finder application.
Action Creators & Actions
Get the actions into Redux through action creators.
Connecting to React with react-redux
Add a ReduxProvider to the application component and use mapStateToProps to pass the state from the Redux into the props of the component.
Redux Thunks & Dispatch
Create an asynchronous action creator with a Redux Thunk that returns the state later through the dispatch method.
Refactoring React to Use Redux
Anywhere that React was modifying state you can now refactor to use Redux instead. This simplifies your React code, which can be a compelling reason to use Redux.
Connecting Actions to the Search Box
Connect the component to Redux with mapStateToProps and mapDispatchToProps. This allows you to retrieve the state out of Redux and dispatch action methods to modify the state in Redux.
Redux Dev Tools
Inspect the actions and state changes in your application with the Redux DevTools. A key feature is time travel debugging, which allows you to walk backwards and forwards through the actions and state changes in your application over time. You can also auto generate Jest tests for Redux.
Q&A and Other State Management Tools
Brian answers a question about action constants, if context can get the same debugging in Redux and discusses other state management tools like MobX.
Server Side Rendering
Why Server Side Rendering
Brian demonstrates the problem with slow loading connections not being showed any content until the all of the scripts complete downloading and rendering. Server side rendering is a solution to this issue since the content is rendered right away.
Running React in Node.js
Render the entire application out to static HTML in Node.js so that users will immediately see the content of your application. To render inside of Node.js, you need to remove all references to the document.
Building Your Project for Production
Create the CLI script to build the app on the server and serve the generated HTML with Parcel.
Rendering Generated Markup
Render the React application component markup on the server with Node.js express. This way the user will see the rendered markup immediately on page load.
renderToNodeStream
Increase performance of server side rendering in Node.js by streaming out the markup to the client as soon as it's available using renderToNodeStream.
Preact
Preact
Preact is a very small (3KB) alternative to React. It also has a lightweight compatibility layer for React called preact-compat (5KB) to make Preact compatible with all React code. Brian walks through replacing all of React with Preact.
Building for Production
Building the Pet Finder application with Preact instead of React reduces the gzipped production build of the application down to 10KB with Preact vs 43KB with normal React.
Code Organization
TypeScript with React
TypeScript
TypeScript is compelling because you can know what type every object in your JavaScript is and have intellisense to know what methods and properties are on that object. Install TypeScript definitions for react and reach router to gain type inference for those modules.
Adding Types to a React Component
It's best to start typing a leaf component rather than a main application component and build up. Add types to your first component, the Modal component.
Switching from ESLint to TSLint
Replace ESLint modules and plugins with TSLint modules and plugins. Add a tslint configuration file and optionally disable rules that are unnecessary.
Converting the App to TypeScript
Convert the Details component to TypeScript by including the reach router type definitions and code defensively against variables that could be null or undefined in order to satisfy TSLint and TypeScript.
Typing the Carousel Component
Add typing to the React component class methods, Props, State, and handle click event with React.MouseEvent<HTMLElement>.
Typing Pet & Search Component
Add types to the Pet and Search Components.
Typing the Rest of the App
Finish adding types to the React Application.
Wrap Up Typing & Q&A
Brian demonstrates the power of TypeScript in a fully typed React application.