TutorialsScreencastsCourses
LoginSign Up
Jason Brown
Create a Query Param Login Modal Route with React Router

Routes are some times better served as a modal. If you have a modal (like a login modal) that needs to be routeable and appear on all pages you may need to use query params. Will explore how to render a route all the time and use query params to control when it's content renders

React RouterRead more ⇨
Jason Brown
Create a Modal Route with React Router

Often times there is a route that is better served as a modal. You want to be able to link to it and still render the page behind it. With React Router this can be accomplished. We'll dive into rendering a route with a route that renders as a modal.

React RouterRead more ⇨
Jason Brown
Markdown Syntax Highlighting with PrismJS using Unified, Remark, and Rehype

We'll explore how to use Unified, Remark, Rehype, and PrismJS to create markdown code that is capable of being syntax highlighted. The generated code will be React elements instead of a string of HTML. This adds in the security benefits of React when it comes to rendering untrusted markdown content.

Jason Brown
Query GPS Coordinates within a Radius using KnexJS, Postgres and the PostGIS Extension

In this lesson we'll show how to enable the PostGIS extension on RDS. We'll then walk through using Knex to create a table to store gps coordinates. Then we'll construct queries for saving, updating, and querying for coordinates within a radius. Finally we'll use knex-postgis plugin for Knex to generate queries from helper functions.

Jason Brown
Add Undo Abilities to any Application Easily with Immer and React

Undo capabilities can be complicated to add to any application. We'll dive into how we can use the Immer library to lend us a hand in managing our state and making undo easy.

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

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.

Jason Brown
Create a componentDidMount useEffect hook in React

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.

Jason Brown
Immutable Data with Immer and React setState

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.

Jason Brown
Test Successful Async Form Submissions with React Router

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.

Jason Brown
Custom Handling the Android Back Button with React Navigation

In this lesson we'll explore setting up a stack navigator in React Navigation. We'll create a custom component that uses withNavigation to allow us to listen to navigation transitions. Using the BackHandler from React Native we can ask the screen if custom needs are required when the hardware back button is pressed. Finally we'll prompt the user if they want to navigate.

React NativeWatch ⇨
Home