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.
React Multi-Step Form Tutorial: Using Formik, Yup and material-ui (youtube.com)
Jun 08, 2020
In order to validate our forms, we will use Yup with Formik validationSchema. We show how to validate fields that depend on other fields in different steps of the form. In order to add a nice look and feel to our form, we will use Material-UI stepper component in order to display in which step we are at the moment.
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).
Concurrent React from Scratch (youtube.com)
May 15, 2020
In this talk, we’ll create an effective mental model of Concurrent React by building a tiny clone of React! We will start with a blank js file and learn about how React renders components, schedules Time-Slicing updates with a Work Loop, add Hooks, and end off with a mini-clone of Suspense!
Simply React (youtube.com)
May 11, 2020
There are patterns that have emerged in React that allow you to promote code reuse without sacrificing the simplicity or flexibility of the component. In this talk we'll go over several of these patterns that will make your React components and hooks more useful.
Remix Preview #1 (youtube.com)
Apr 28, 2020
The first preview of Remix, the best way to build dynamic React websites. You'll get a preview on routing, layouts, data loading, meta tags, data caching, and scroll restoration.
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.