Intermediate React (2018)

Course Notes - _https://btholt.github.io/complete-intro-to-react-v4/
Code Repository - _https://github.com/btholt/complete-intro-to-react
Table of Contents
Introduction

Course Overview & Setup
00:00:00 - 00:08:06
Course Overview & Setup
This 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. - _https://bit.ly/react-v4
Testing React

Writing a Component Test with Jest
00:08:07 - 00:14:29
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. - https://jestjs.io/
Jest Snapshot Tests
00:14:30 - 00:21:11
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
00:21:12 - 00:21:52
Creating a Jest CLI Script
Add the ability to run jest from your npm scripts.
Testing Component Methods
00:21:53 - 00:25:52
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
00:25:53 - 00:27:53
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
00:27:54 - 00:32:57
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
00:32:58 - 00:37:45
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
00:37:46 - 00:43:02
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
00:43:03 - 00:47:51
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
00:47:52 - 00:54:38
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
00:54:39 - 00:58:14
Emotion Q&A
Brian answers questions about injecting global styles and explains why he suggests using emotion over styled components.
Animation with Emotion
00:58:15 - 01:01:25
Animation with Emotion
Add an animation to a component with keyframes.
Why Emotion & CSS in JS
01:01:26 - 01:08:54
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
01:08:55 - 01:15:38
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
01:15:39 - 01:20:21
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
01:20:22 - 01:25:23
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
01:25:24 - 01:33:34
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
01:33:35 - 01:35:53
Prefetch
Let the browser decide if it wants to prefetch bundles with script rel prefetch.
Code Splitting Without Loadable
01:35:54 - 01:38:10
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
01:38:11 - 01:43:57
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
01:43:58 - 01:49:08
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
01:49:09 - 01:54:21
Root Reducer
Use combineReducers to delegate from the root reducer out to other reducers.
Creating a Reducer
01:54:22 - 02:00:48
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
02:00:49 - 02:04:28
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
02:04:29 - 02:11:28
Adding More Reducers
Code all of the reducers that we'll need to handle state change in the Pet Finder application.
Action Creators & Actions
02:11:29 - 02:17:48
Action Creators & Actions
Get the actions into Redux through action creators.
Connecting to React with react-redux
02:17:49 - 02:25:16
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
02:25:17 - 02:35:54
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
02:35:55 - 02:39:56
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
02:39:57 - 02:51:24
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
02:51:25 - 03:00:20
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
03:00:21 - 03:05:16
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. - https://frontendmasters.com/courses/react-state/
Server Side Rendering

Why Server Side Rendering
03:05:17 - 03:09:02
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
03:09:03 - 03:15:39
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
03:15:40 - 03:19:19
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
03:19:20 - 03:32:49
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
03:32:50 - 03:38:20
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
03:38:21 - 03:50:17
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
03:50:18 - 03:53:23
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

Code Organization
03:53:24 - 03:59:16
Code Organization
Tips 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

TypeScript
03:59:17 - 04:06:51
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
04:06:52 - 04:11:24
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
04:11:25 - 04:16:35
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
04:16:36 - 04:26:03
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
04:26:04 - 04:32:55
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
04:32:56 - 04:43:38
Typing Pet & Search Component
Add types to the Pet and Search Components.
Typing the Rest of the App
04:43:39 - 04:53:20
Typing the Rest of the App
Finish adding types to the React Application.
Wrap Up Typing & Q&A
04:53:21 - 04:56:28
Wrap Up Typing & Q&A
Brian demonstrates the power of TypeScript in a fully typed React application.