Draggable Divs with Recoil State Management (youtube.com)
Sep 01, 2020
In this video we'll manage a dynamic number of Draggable Boxes (divs) inside of Recoil, computing/deriving a bounding box around these boxes using their positions on the page. We use react-draggable to make the draggable functionality possible.
Introduction to React Recoil (Experimental) State Management (youtube.com)
Jul 30, 2020
In this video we'll learn about Recoil React State Management which is a new and experimental state management library from Facebook. It is great for when your components are highly relational, when you have derived/computed state, and when you want to avoid re-rendering the entire tree when only certain parts of your state have updated.
Full Stack Next.js & MongoDB from Start to Finish (youtube.com)
Jul 23, 2020
In this video we'll take a React map in Next.js, and build out the backend, storing our data in MongoDB. We'll see how to connect the frontend to the backend, connecting to the database, interacting with it, and some gotchas that you may encounter.
Deploying Next.js to Vercel with Environment Variables (youtube.com)
Jul 05, 2020
Let's deploy a Next.js app to Vercel! This app contains two types of Env variables... one we want to include in the public build of our app, and another we only want available during "runtime", which means in this case when the serverless api functions are executed... these env variables in runtime are secret!
Posting Data to Server from React - Query Updates from Mutations (youtube.com)
Jun 18, 2020
In React you often need to persist data to the server. This video shows how to use react-query mutation functionality to post data to the server, and update the UI with fresh content. We cover three approaches to UI updates, going from easiest but worst performing, to most complicated but best performing.
Google Maps & Google Places in React (youtube.com)
May 18, 2020
This video covers a "Bear Sighting" React App where we learn how Google Maps, Google Places, and browser geolocation works. All using modern React (hooks) and up to date packages for 2020.
Mocking Fetch in React Components (youtube.com)
May 17, 2020
In this video we'll test that a react component renders correctly when making a fetch call via the useSWR hook. We then mock the function that calls fetch, rather than fetch itself, to focus on the interface rather than the internal implementation details.
Mocking Fetch Using jest-fetch-mock (youtube.com)
May 16, 2020
This video focuses on testing a function which makes a fetch call, mocking fetch using the jest-fetch-mock package rather than mocking the module manually ourselves (like we did in the previous video).
Instagram Style Route as Modal in Next.js (youtube.com)
Apr 23, 2020
This is an example of how to do routing as a modal in Next.js, where when the user clicks a link, content is shown within a modal, but when the user refreshes the page, they are on a dedicated page for that content.
Dark Mode w/ Custom React Hooks using Local Storage (youtube.com)
Apr 10, 2020
Creating a custom hook in React to store state in local storage, synchronize it across browser tabs, and have its value retrieved on page refresh. We will be looking at a form input as well as how you could use this technique to create a persistent Dark Mode on your website.
gqless: GraphQL Without GQL in React (youtube.com)
Apr 06, 2020
In this video I experiment with a new and very alpha library called gqless which allows you to simply access your data, and it will perform the necessary GraphQL query to actually fetch it.
React Query - Data Fetching Hooks (youtube.com)
Mar 18, 2020
React Query is a fantastic tool that enables you to fetch remote asynchronous data inside of your components. It could be GraphQL, REST, or any other data source which responds with a promise. It comes with its own dev tools to visualize what it is doing, and a ton of amazing functionality such as stale-while-revalidate, refetch on focus, error handling, etc...
React Router v6 Tutorial in 15 Minutes (youtube.com)
Mar 07, 2020
React Router v6 is both the next version of React Router v5 but also @reach/router... it's a coming together of all the best things from both routers in an easy to use light-weight package. In this tutorial we'll cover all the basics from routing, nested routes, dynamic routes, linking to catch-all routes in just over 15 minutes.
React Stripe Elements Package (NEW 2020) (youtube.com)
Feb 22, 2020
Stripe just came out with a new version of their Stripe Elements for React package, so let's try it out! We'll create a simple form, send that data to the backend where we'll use Stripe in Node to charge the card that comes from Stripe Elements.
How to NOT render something in React (youtube.com)
Jan 21, 2020
We cover 5 ways to either not render an element or to have it hidden, and then we'll write tests to verify the presence or lack of presence of an element, and whether an element has a class or not using React Testing Library.
React Hooks: useContext (youtube.com)
Sep 18, 2019
Let's see how to combine useReducer and useContext to create a powerful pattern that allows us to encapsulate complicated nested state, and provide simple state values and action functions to any children of our Context Provider.
React Hooks: useReducer (youtube.com)
Sep 16, 2019
I know reducers from Redux, but something similar actually comes built in to React now with the useReducer hook. We'll see how to use it to clean up nested state.
How to use Autosuggest in React (youtube.com)
Aug 13, 2019
This video shows how to use the React Autosuggest library to show a dynamic list of countries which is loaded from a JSON endpoint. We'll use it within a Formik form and also cover how to tie Autosuggest into Formik and its validations.
Forms in React with Formik (youtube.com)
Aug 12, 2019
This video covers how to use Formik to create and manage forms in React. We'll cover getting user input, validating it with Yup, and then handling the form submission.
The useEffect hook and its lifecycle (youtube.com)
Feb 14, 2019
In this video we look at an issue I was having where state was being updated after the component had unmounted and the solution I came up with to solve that. What the heck is that 2nd argument for and did you know you can return a function from your useEffect function?
Intro to React Testing Library (youtube.com)
Jan 29, 2019
We'll investigate how to easily test our React components using the React Testing Library an alternative to Enzyme that works alongside Jest. This is an introduction, covering installation, snapshots, finding elements and verifying certain attributes on those elements.
Custom fetch hook that works with React Suspense (youtube.com)
Jan 22, 2019
In this video we'll dive deep into suspense, creating a custom hooked called useFetchSuspense that will make an AJAX call with fetch, playing nicely with Suspense to handle showing the loading fallback component while the call is being asynchronously executed.
Using Apollo Link State (youtube.com)
Dec 09, 2018
In this video we learn how to use the apollo-link-state library to Mutate and Query our local state. Link State is an alternative to using React's Component level state, MobX, or Redux... access and mutate your data in the same way you communicate with external GraphQL APIs.
Gatsby & TypeScript (youtube.com)
Dec 01, 2018
Learn how to set up Gatsby with TypeScript and how to replace PropTypes with TypeScript interfaces in both functional and class based components.
GraphQL with ApolloBoost Client (youtube.com)
Nov 02, 2018
Don't know where to begin with GraphQL in React? Begin by setting up a client with ApolloBoost and make a Query! In this video we pull my starred repositories from the GitHub GraphQL API.
What are React hooks? (youtube.com)
Oct 27, 2018
In this video we cover React hooks by refactoring a class based component into a functional component which takes advantage of the useState and useEffect hooks.
What is React memo? (youtube.com)
Oct 24, 2018
A quick video showing off the new React.memo feature which was just launched today in React v16.6.0. It'll make your functional components more performant as long as they are pure (same input - props - equals same output every time).
How to use GraphQL with React (youtube.com)
May 13, 2018
We'll take a look at how to use GraphQL with React using the Apollo GraphQL library and GitHub's new GraphQL API. We'll look at setting up our client, provider, and finally writing and executing our GraphQL query.
Mocking Axios in Jest + Testing Async Functions (youtube.com)
Apr 13, 2018
In this video we'll look at a function that makes an HTTP request using the axios library to the Unsplash API and figure out how we can test it using a fake/mock version of axios to avoid performing real HTTP requests. We will be using Jest and some mocking functionality that it provides.
Testing Asynchronous Components with Mocks in Jest (youtube.com)
Apr 06, 2018
In this video we'll cover how to test React components that contain asynchronous code using mocks in Jest. We'll refactor our component to make it more easily testable and mockable, allowing the test to run without making an actual AJAX request.
Error Boundaries and Render Props (youtube.com)
Apr 05, 2018
How to implement and test an error boundary in React. Error boundaries allow us to catch errors (and display friendly messages to our users) that occur during render in our components. We'll implement the error boundary using render props and see how to suppress an annoying error message during testing.
Getting started with testing in React (youtube.com)
Mar 29, 2018
In this video we talk about how to test components in React within create-react-app, how to configure Jest with Enzyme and Sinon, how to test with snapshots, simulate clicks, and interact with DOM elements through Enzyme.
Easy MobX and Redux Comparison (youtube.com)
Mar 24, 2018
We take an app from component state to MobX, then the same app from component state to Redux and talk about the differences. Async code in both MobX and Redux is covered!
Using Refs in React (youtube.com)
Feb 25, 2018
We'll go over the 3 ways to create refs in React: string refs (don't use!), callback refs, and the new React.createRef() approach.