Leigh Halliday

In this video we recreate the Next.js example setting up Apollo Client v3, Apollo Server, Nexus Schema, with support for SSR.

In part two we will build out the frontend of our GraphQL Resume. First we set up the Apollo Client, then fetch and display the data that comes back from our GraphQL API. Lastly we add Prism Code Highlighter to show display the GraphQL query which retrieved the data we are displaying.

In this video we will use a code-first approach to building a GraphQL API. This means that the code we write will generate the GraphQL schema as an artifact rather than something we have to maintain ourselves.

We'll create a User Registration Form in Next.js using react-hook-form, testing its validation with react testing library.

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.

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.

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!

In this video we will take an existing React app using Google Maps, and using Next.js (API routes), Prisma 2, and Postgres, we will learn how to read data from, and save data to our database.

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.

Despite having launched a video showing how to mock both Fetch and Axios recently... here is another solution, the one recommended by Kent C. Dodds (creator of React Testing Library), showing how to use Mock Service Worker to avoid making actual HTTP requests when you are running your tests.

In this video we'll cover the Web Speech API, building a word matching game for learning a language, similar to one of the features that DuoLingo has.

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.

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.

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).

In this demo we handle drag n' drop file functionality in React in order to parse CSV files, extracting contact defaults to place into our state.

Controlling the flow of your React application is crucial to getting the result that you are looking for. Learn more about React conditional rendering methods in this video.

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.

Fetch your props directly from the Database?!?! Adam Wathan showed a simple example of loading props directly from the database.

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.

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 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 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.

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.

Sophie Alpert - former manager of the React team at Facebook - mentioned in a tweet "That React Component Right Under Your Context Provider Should Probably Use `React.memo`"... in this video we're going to explore what she meant, what the issue is, and how to solve it.

Apollo provides a function made for fetching additional paginated results, but it isn't directly obvious how it works! In this video we will walk through Cursor based GraphQL Pagination in Apollo React.

In this video, we will learn how to use API routes to set up a GraphQL API within a Next.js app.

SEO from a technical perspective is nothing more than adding a few meta tags, right? Sorta... in this video we'll take a basic Next.js application, and get it to a score of 100 in Lighthouse Audit.

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.

In this video we will create a Google Map in React, loading remote data from an API, clustering it, and then zooming in programmatically to expand a cluster.

We will show how to use SWR, how to configure it globally, and a pattern I like to use which separates data fetching from data display.

A lot has changed since my first MobX video about 2 years ago. This is an updated version of that, covering hooks and how to use modern MobX with functional components.

In this video we'll load data using XState and the help of a finite state machine. We'll keep track of needing to load more data, or if we've already fetched all that is available.

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.

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.

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.

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.

In this video we'll cover Forms in Vanilla React (no additional packages).

In this video we will be building a map showing all of the different skateparks in Ottawa, Canada. The user will be able to click a Marker to reveal further details about the skatepark within an InfoWindow.

This demo shows how to use Mapbox in React to create an interactive map showing markers and popups based on a dataset.

In this video we cover how to use React Testing Library to test a component being injected with a MobX store.

In this video we'll see how to test using Redux and connected components with the React Testing Library.

This video shows how to cancel an Axios request before it completes. We'll use a useEffect hook and it's cleanup function to help us accomplish this.

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?

In this video we look at how to test a component with react testing library which contains an asynchronous Axios request that we'll mock out using Jest mocks.

In this video we'll see how to fire events (click) and how to wait for elements to appear on the screen when the code is asynchronous.

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.

In this video we'll create a custom hook called useWorker which will execute CPU intensive code on a worker thread rather than the main browser thread... we'll make our hook "suspense friendly" with promises.

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.

In this video we'll look at the smallest Suspense example I can think of :D It is part 1 of a 4 part series I'm doing on Suspense.

In this video we'll show how to use Suspense along with @reach/router and React.lazy to code-split and lazy-load each route/page of our application, showing a fallback component while it's loading.

In this video we'll be using promises to see how a Gatsby style "Blur Up" image component could be created.

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.

We'll transform some React code using the Query component from Apollo GraphQL to use hooks! The code ends up being WAY cleaner and easier to reason about.

Learn how to set up Gatsby with TypeScript and how to replace PropTypes with TypeScript interfaces in both functional and class based components.

If you need to talk with a RESTful endpoint alongside your GraphQL API, adding RestLink allows you to seamlessly perform GraphQL queries to interact with those REST endpoints.

When Apollo Boost no longer provides you the flexibility you need, it's time to reach for the Apollo Client library and configure things yourself. In this video we go over the conversion process and how to use some comment links such as link-error, link-context, and link-http.

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.

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.

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).

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.

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.

We'll take a look at the new React Context API, how to use it, what it does, and if it should replace Redux or MobX for your go-to state management option.

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.

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.

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.

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!

We'll take a look at how to get up and running with React Motion to animate an element into and off of the screen based on a toggle value in the state.

4 ways to do Async code in MobX. We'll cover MobX 4, but show how it would be done in MobX 3.

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.

Here we look at how MobX State Tree works and how it compares to MobX.

In this video we'll see how we can use MobX (with decorators!) without having to eject from create react app. You can also use this technique to add other babel plugins or modify your webpack config without ever needing to eject.

What are Finite State Machines and how can you use them in React to make complicated logic and UIs easier to grasp? In this article we’ll set out to provide an answer to this question by building a video player in React.

Zeit has great documentation, but it took me a while to understand the difference between environment variables (secrets) on the serverless side vs how to get env vars exposed and available to the React code which runs client side, in the browser.

Form Development in React comes down to three things: Data, Validations, and Submission. See how to handle these yourself or using Formik to make things simpler.

Knowing the similarities and differences between Google Maps and MapBox within a React app will help you pick the right tool for the job. This article compares and contrasts these two popular libraries, getting you up and running with whichever one you choose.

Testing GraphQL doesn't have to be difficult. This article will explore static and dynamic mocks to make testing GraphQL a breeze.

In this article we'll look at how to get an effect to run after every render, just once, or when a particular piece of data changes. We'll also look at the difference between the effect itself, and how to clean up after itself.

In this article we'll take a look at how to handle async code in React Testing Library, specifically at how to test and mock a call using Axios.

In this article we'll see how to fire and test events in our React components using the React Testing Library.

In this article we'll take a look at how to handle async code in React Testing Library, specifically at how to test and mock a call using Axios.

TypeScript and React are an increasingly common pair. Learn how to get up and running with TypeScript for your next React project.