TutorialsCourses
Create a Dropdown in React that Closes When the Body is Clicked
Jason Brown

In this lesson we'll create a dropdown menu that is toggle via a button setting state. We'll then setup a ref to get access to the container div. Finally using event listeners on the document body we will check if the user clicked anywhere outside of our dropdown and then close the dropdown.

React
Create a useMousePosition Hook with useEffect and useState in React
Jason Brown

In this lesson we'll explore how to combine useEffect with useState to create a reusable hook. It will listen add a window listener for mousemove and update state with each movement.

React
Create a componentDidMount useEffect hook in React
Jason Brown

In this lesson we'll explore how to create useEffect call, and listen to the window for mouse movement. We'll learn about cleaning up our effects, and how to pass an empty array into the second argument of our effect to create a componentDidMount like effect. Finally we'll trigger a mount/unmount to show effects getting cleaned up correctly.

React
Create a useMousePosition Hook with useEffect and useState in React
Jason Brown

In this lesson we'll explore how to combine useEffect with useState to create a reusable hook. It will listen add a window listener for mousemove and update state with each movement.

React
Create a componentDidMount useEffect hook in React
Jason Brown

In this lesson we'll explore how to create useEffect call, and listen to the window for mouse movement. We'll learn about cleaning up our effects, and how to pass an empty array into the second argument of our effect to create a componentDidMount like effect. Finally we'll trigger a mount/unmount to show effects getting cleaned up correctly.

React
Immutable Data with Immer and React setState
Jason Brown

In this lesson we'll show the traditional method of updating state with a spread operator and then transform it into using the Immer produce functionality. This will allow us to achieve immutability on our data with simple mutations We'll then show how Immer can use currying to create updater functions that can be passed directly to setState.

React
Immutable Data with Immer and React setState
Jason Brown

In this lesson we'll show the traditional method of updating state with a spread operator and then transform it into using the Immer produce functionality. This will allow us to achieve immutability on our data with simple mutations We'll then show how Immer can use currying to create updater functions that can be passed directly to setState.

React
Test Successful Async Form Submissions with React Router
Jason Brown

In this lesson we'll explore how to test that an async form submission successfully happened using Jest. We'll also take advantage of react-testing-library to render our react components to a fake dom. We'll use MemoryRouter to mock what a browser would normally do in the event of a transition, and create a fake component route to confirm that the submission successfully redirected us to the url we wanted.

React
How to Create an Optional Dynamic Validation Schema based on a Value with the Yup Validation Library
Jason Brown

In this lesson we'll show how to setup a nested validation structure using the yup library. We'll then use the yup.lazy method to evaluate the value at runtime and adjust our validation schema. We'll make our nested validation optional only if our optionalObject actually exists.

React
How to Create an Optional Dynamic Validation Schema based on a Value with the Yup Validation Library
Jason Brown

In this lesson we'll show how to setup a nested validation structure using the yup library. We'll then use the yup.lazy method to evaluate the value at runtime and adjust our validation schema. We'll make our nested validation optional only if our optionalObject actually exists.

React
« Previous
2 of 4
Home