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.
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.
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.
In this lesson we'll explore how to setup a draggable circle. Then we'll dive into using the
In this lesson we'll use a
PanGestureHandler to track a single gesture state. We'll use additional declarative animation functions like
event. We'll then use
interpolate to create opacity and border effects whenever the circle is dragged to new locations.
In this lesson we'll explore using Reanimated and React Native Gesture Handler to create a touchable opacity button using
TapGestureHandler. With declarative animations in Reanimated we'll use tools like
eq to create a purely native opacity animation.
In this lesson we'll explore using Reanimated and React Native Gesture Handler to create a button using
TapGestureHandler. With declarative animations in Reanimated we'll use
eq to create a purely native opacity change animation when the button is pressed.
In this lesson we'll take a look at how to render a basic line graph using D3, and VX. We'll move on to analyzing how to add some interactivity that will render a line where ever the user hovers using
bisect from D3. Then we'll show how to render another line path using the scales and manipulating our data. Finally we'll add another line split so we're rendering 2 line paths.
In this lesson we'll use the
matchPath function exported by react-router to find active nested routes inside of a parent component. This technique can be used for comparing routes outside of a React component, or even inside of life cycle methods to do data loading.
In this lesson we'll create a protected route just for logged in users. We'll combine a Route with a render prop and use a loggedIn prop to determine if the route should be allowed to be accessed. Finally we'll use nav state to preserve the location the user visited and redirect them back to the protected route once they login.