Jest Snapshots are increasingly being used to test React Components. Snapshots are generally testing the initial rendering of a component, while DOM style testing is to be used for more interactive and manipulative testing.

For example

This post is going to discuss Snapshots specifically but to learn more about…


Photo by Katy Cao on Unsplash

I have been learning about using GraphQL and Apollo in my React applications. This blog post is going to assume you have a basic understanding of both technologies and will specifically address using GraphQL fragments in queries defined using Apollo. If you want to learn more about using Apollo and GraphQL with React, I have links to documentation at the end of the article.

My problem

For my app, I was want to allow users to find recipes in two ways. 1) Supplying a search term and showing a limit of 50 results that were related to the term, and also allow…


Photo by Kirill Petropavlov on Unsplash

In the past I have generally reached for libraries like MobX or Redux in order to manage the state in my app and to expose values that I want to access globally, throughout my app. It prevents me from having to pass things around via props and also segregates reused data and actions from simple component-level logic. React’s new Context API has introduced a simple solution for these smaller use cases. There are still instances when Redux and MobX are the right answer, but many times using React’s Context API can get the job done.

In this post, I am…


Photo by Joshua Aragon on Unsplash

Lately, I have been wanting to try new things and test out new technologies or patterns in my React components. I needed a place where I could test these things out without launching a new app every time.

I recently started using React storybook at work in order to establish a new design system for future projects. I also used it to prototype several versions of a new content authoring tool our team is working on. Putting this tool together with my desire to create components and play around with new things in a low stakes way seemed perfect. …


Photo by Émile Perron on Unsplash

If you are a React developer and working with new and/or previously built components every day, you have likely started to notice patterns of repeated logic in your code. This could be as simple as creating multiple functions in a single component to change different keys of state, or it could be on the scale of creating several components which are slightly different versions of the same thing. This post will focus on solving the latter and refactoring a toggle component to be reusable by following the render prop pattern with functions as child components.

The Original Component

This component is just a…


Ok, so my task at hand is to create a scroll-to-top feature which allows the user experience to be as follows:

Above and below you will see the visual implementation of this feature.


Photo by Clément H on Unsplash

Lately I have been writing a lot of code and trying to rapidly produce different React components, creating stories for them in Storybook and writing tests for them. Generally thats 3 files, per component, with basic and predictable code that I was typically copying and pasting with every new component. I recently created some code snippets to help me produce the code in these files and found it saved me a ton of time. Read on to learn how I did it!

What are Code Snippets?

“Code snippets are small blocks of reusable code that can be inserted in a code file using a…


Hey there! So this is going to be a brief post about how I am incorporating the google maps API into my final project in order to mark on a map where donations are coming from with the Children’s miracle network balloons.

Step 1)

Request a google maps API ket at:

Here, you can click to get an API key, as well as read up on some of their documentation. They even have a few tutorials on how to implement it in a plain javascript application.

Step 2)

Install google-map-react into your project.

npm install --save google-map-react

You can find…


Ok, prepare yourself for the literal rabbit hole of my Tuesday night….

First, JP led me to Memoization, which then led me to recursion, which led to Fibonacci Sequences, which obviously and inevitably led me to rabbits…

I am warning you….


Remember on Day 1, we were able to list our treehouse account… If you were like me, you probably thought, treehouse? What’s that? Well, let me tell you, it is one of the internet’s best kept secrets when it come to technology education. It is an online learning platform for learning all things code.

Sarah Sweat

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store