This is a series of livestream recordings that have been previously recorded and edited. 

Data drives most, if not all, the sites that you will build. How to import, format, modify, and query that data are important problems that need to be solved. Gatsby introduces the idea of Plugins (source and transform) to handle the data needed in your application. With these plugins, you'll be able to load and modify data from virtually any source to suit the needs of your site.

In this course, you'll learn:
 - Add custom data to your Gatsby site (from any source!)
 - Create relationships between all your data
 - Leverage GraphQL to query for data
 - Optimize remote images for great performance
 - Transform data from one format to another

Gatsby Source Plugin Development

Kent walks us through the internals of dom-testing-library and react-testing-library. 

There is a lot of set-up and tear down when testing UI components. These two libraries take away a lot of the work required to test React components well. 

Jest is commonly used in tandem with react-testing-library to assert results of your components. Jest simulates most browser apis with jsdom. react-testing-library helps you get values out of your components the same way your end users will. 

Links from the show:
- [Testing Library](https://testing-library.com)
- [Testing Javascript](https://testingjavascript.com)
- [Unit vs Integration vs E2E](https://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests)
- [Why you shouldn't ReactDOM.render to the body](https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375)
- [Effective Snapshot Testing]( https://kentcdodds.com/blog/effective-snapshot-testing/)
- [Dev Tips with Kent](https://youtu.be/ttmvAm6esSc)
- https://kcd.im/news

react

Understanding how react-testing-library works with Kent C. Dodds

We take the [gatsby-starter-egghead-blog](https://github.com/eggheadio/gatsby-starter-egghead-blog) and convert it to a Gatsby theme. The process uses Yarn workspaces and is a great demonstration of the flexibility Gatsby gives us for creating and sharing our work.

gatsby

Creating a Gatsby Theme with John Otander

André shows us how to build a minimum functioning RxJS and teaches us some important concepts about reactive programming.




JavaScript has multiple APIs that use callback functions that all do nearly the same thing with slight variations. Event listeners, array methods such as `.forEach`, promises, and NodeJS streams all are very close in the way they are written. Instead, in RxJS you'd unify all of these APIs under one abstraction. 

[Toy Rx](https://github.com/staltz/toy-rx) is an interesting library to go beyond this livestream.


rxjs

André Staltz Presents: Build your own RxJS

Jared Palmer is the creator and maintainer of Formik, the premiere forms solution for React applications. Formik makes forms in React easy by managing your form's state and providing validation on all of your fields. Under the hood, Formik is using **React Hooks**, and today we are going to make our own mini Formik with them! 

`useReducer` is the hook to use for any complex state management. `useReducer` follows the redux principle of returning a modified copy of the state. Writing a custom hook with `useReducer` lets you decouple your handlers and state from the component into a testable function. 

- The `useEffect` hook isn't the same as the `componentDid...` lifecycle hooks. It runs on each render, and you can pass an array that tells it to not run if the value hasn't changed from the previous render. 

- `onBlur` should be used over `onMouseDown` so that errors aren't shown before the user types

- [useHooks.com](https://usehooks.com/)

- [Formik Overview](https://jaredpalmer.com/formik/docs/overview)

Build Your Own Formik Using React Hooks with Jared Palmer

To help accelerate our understanding of React Hooks, Kent is going to live-code a tic-tac-toe app from the ground up taking a Hooks first approach! 

Hooks allow you to better separate your app's visual components from its state and functionality. Kent takes an accessibility and readability first approach to React development, so using hooks to separate your concerns makes your app easier to debug as well as reducing the mental and visual overhead when you are making sense of the code, making your code all around more maintainable. 

- [useHooks.com](https://usehooks.com/)

- Data is static information, state changes over your component's lifetime

- Reducers let you move logic from your component to your pure reducer function. Changes to state always go to the same function, it's great for debugging. 

- Reducer concepts are covered excellently in [Dan Abramov's Getting Started with Redux course](https://egghead.io/courses/getting-started-with-redux)

Let's Build! Livestreams with Badass Web Developers

Joel Hooks

Course Content