Tutorials
Screencasts
Courses
Jason BrownWe'll use position: sticky to lock our sticky header to the content container that it's in when the user scrolls. Using a useEffect hook we can monitor the scroll position and determine if the user is looking at a section of our content. If they are we can update a useState hook to highlight it in our nav bar. Finally we'll add a scroll to section feature as well.
Jason BrownWe'll build a circular progress button to show how far a user has read an article. The techniques will rely on stroke-dasharray and stroke-dashoffset. Using the useLayoutEffect hook and useRef hook we will measure our article height dynamically and calculate progress based upon the scroll position. We'll show how to dynamically calculate all necessary values to render our progress circle exactly where we want it.
Jason BrownRoutes 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
Jason BrownRoutes 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
Jason BrownOften 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.
Jason BrownWe'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 BrownIn 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 BrownIn 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 BrownIn 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 BrownIn 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.