React on BradCypert.com

Testing React Components with React Testing Library

Sat, 15 Feb 2020 00:00:00 +0000

Testing react components with React Testing Library can be tricky, so I decided to try something new and put together a video demonstrating how to test your react components.

I’ll work on improving the audio quality going forward, but I’d love to know your thoughts! Wanna see more content like this in the future? Lemme know!

Managing Authentication with React's useContext Hook

Tue, 11 Feb 2020 00:00:00 +0000

Contexts are a commonly used tool when building React libraries, but are often overlooked when building an application in React. I don’t believe that should be the case, as useContext can provide you a powerful alternative (but lightweight) alternative to tools like Redux when managed carefully.

The classic example of using a context is to declare an app theme but we can use them for so much more than that. In fact, we’re going to leverage a context today to demonstrate how simple authentication can be handled with React’s useContext hook.

Understanding React Lifecycle Methods

Wed, 05 Feb 2020 00:00:00 +0000

React Lifecycle Methods are one tricky piece of business, especially if you’re coming from a framework that doesn’t have their own. Thankfully, they’re fairly similar to Android’s lifecycle methods and it wasn’t long before I was able to grasp them.

React has changed a lot over the past few years and it’s lifecycle methods are no exceptions. In fact, with the release of hooks, the idea of lifecycles were shaken once more!

How do I use TypeScript with React?

Sat, 11 Jan 2020 00:00:00 +0000

React is allowing developers to iterate faster and build safer, more reliable frontend applications than we were building many years ago. TypeScript , a relatively new addition to the “JavaScript Alternatives” scene, also aims to add a new level of safety in the form of type safety. Naturally, it makes sense for us to want to use TypeScript to write React components.

But how do you do that? There are two different ways.

Fetching Data with React Hooks

Thu, 09 Jan 2020 00:00:00 +0000

React hooks have changed the way that I (and arguably the React Community) prefer to build components . I’ve been working on a GraphQL project for a while, and when we migrated to functional components and hooks, I was able to use Apollo’s hooks for my data fetching needs. However, I find myself now working on a new project that doesn’t use GraphQL. Consequentially, I find myself wondering “How do I fetch data with React Hooks?”

Autosaving with React Hooks

Sat, 21 Dec 2019 00:00:00 +0000

React hooks have really changed the game for me when it comes to building react components. However, I’ve found that writing autosaving functionality is a little less obvious via hooks. Thankfully, it is still possible (and arguably a lot cleaner) when using hooks.

We can accomplish autosaving functionality through use of useEffect. You’ll also need a way to post the data to your server. In my case, I’m using Apollo’s useMutation hook as well. This allows me to post a graphql mutation from a hook-like interface.

Auth Guarding React Router Routes

Sun, 27 Oct 2019 00:00:00 +0000

A common theme in web applications is to serve specific content to authenticated users while serving other content to everyone else. I’ve heard this referred to in the past as “auth guarding” specific content. In this case of our example today, we want to auth guard react-router routes.

There are a couple of different ways to do this, but I’ve found a pattern that I really like that uses higher-order function components to help create the functionality that would be expected of an auth guarded route. Namely, we show them an unauthorized screen if they’re not authorized and, if they are authorized to view that content, we show them the content.