This course has been updated! We now recommend you take the Intermediate React, v5 course.
Table of Contents
Course Overview & SetupThis course is a series of self contained modules. Each module starts with the same base code, where you add a feature or series of features on top of to learn an Intermediate tool or concept you may need when developing large React applications.
Writing a Component Test with JestTo 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 TestsLearn 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 ScriptAdd the ability to run jest from your npm scripts.
Testing Component MethodsLearn 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 WatchJest 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 CoverageJest 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.
CSS in JS
Install Emotion & Extract a ModuleBrian'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 EmotionLearn 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.
Emotion Q&ABrian answers questions about injecting global styles and explains why he suggests using emotion over styled components.
Animation with EmotionAdd an animation to a component with keyframes.
Why Emotion & CSS in JSA 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.
Why Code Split & Q&ACode 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 ComponentsCode 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 AsynchronouslyDefer loading the contents of a component with React Loadable. Brian shows using React.Fragment to render multiple top level elements in a component.
PrefetchLet the browser decide if it wants to prefetch bundles with script rel prefetch.
Code Splitting Without LoadableBrian refers back to v3 of the course if you want to see implementing lazy loading components without using React Loadable.
Redux OverviewRedux 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 StoreA 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 ReducerUse combineReducers to delegate from the root reducer out to other reducers.
Creating a ReducerCode a reducer that handles the set location action and returns the new location state in the store.
Recap & Testing a ReducerA 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 ReducersCode all of the reducers that we'll need to handle state change in the Pet Finder application.
Action Creators & ActionsGet the actions into Redux through action creators.
Connecting to React with react-reduxAdd a ReduxProvider to the application component and use mapStateToProps to pass the state from the Redux into the props of the component.
Redux Thunks & DispatchCreate an asynchronous action creator with a Redux Thunk that returns the state later through the dispatch method.
Refactoring React to Use ReduxAnywhere 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 BoxConnect 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 ToolsInspect 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 ToolsBrian 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 RenderingBrian 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.jsRender 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 ProductionCreate the CLI script to build the app on the server and serve the generated HTML with Parcel.
Rendering Generated MarkupRender 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.
renderToNodeStreamIncrease performance of server side rendering in Node.js by streaming out the markup to the client as soon as it's available using renderToNodeStream.
PreactPreact 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 ProductionBuilding 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 OrganizationTips for organizing React code. Brian puts all files associated with a component in a folder. This helps to eliminate dead CSS because when you remove the module, all the CSS goes with it.
TypeScript with React
Adding Types to a React ComponentIt'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 TSLintReplace 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 TypeScriptConvert 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 ComponentAdd typing to the React component class methods, Props, State, and handle click event with React.MouseEvent<HTMLElement>.
Typing Pet & Search ComponentAdd types to the Pet and Search Components.
Typing the Rest of the AppFinish adding types to the React Application.
Wrap Up Typing & Q&ABrian demonstrates the power of TypeScript in a fully typed React application.