Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
How to Use the useContext Hook in React
Let’s explore the React useContext Hook by building a music player! I’ll also show you how a custom React Hook can make the useContext Hook easier to use.

Read more
Jest Don’t Repeat Yourself

Unit testing, everybody’s favorite part about writing code. Ok, it may not be for everyone, but maybe that’s just because you have not had the opportunity. Until recently I was in the same boat. “The code works, why do I need to test it?” Well, after writing a few myself, it didn’t actually seem so bad. I would even argue that it made me a better programmer.

It goes a little like this: “Do this, expect that. Do this, with this input, and expect this other thing.” You’re basically proving that your code will do what it was intended to do, with all the possible inputs. At the very least, it gives you confidence that your code will not break, or have any unintended consequences. Sweet, right? You can have it fail gracefully or as expected. As an added bonus, it prevents other programmers from unintentionally breaking your code in the future. You may even go back to the original function and improve it, for more usability.

Now let’s start with the code that we will be testing.

Read more
First Look at React Suspense for Data Fetching
Learn how you can use React Suspense for data fetching. It will simplify how you handle loading states in React.

Watch video
Mocking React Components with Jest

I recently had a troublesome component. It was a component that was using the browser’s fetch API to load and insert SVG icons the page. In and of itself that’s fine. Browsers have all the required components to use fetch. However, Node.js is not a browser and it doesn’t have fetch. So what can we do?

One thing we could do is use some fetch-like polyfill. There’s node-fetchfetch-mockjest-fetch-mockcross-fetch, and many others that might help us do that. However, this involves modifying the global object to add fetch, but also mocking every call to fetch so it returns what we want, in this case icons. Since most of the time I’m not testing the icons of a component, it would be inappropriate to mock this for unit tests.

The way I solved this was to use Jest mocks and mocked out the whole icon component, so that it never calls fetch. We stopped making fetch happen, but the solution wasn’t intuitive.

Read more
Programming Patterns with React Hooks

The introduction of React Hooks has sought a more declarative style of programming and promoted the use of functional components.

However, as our applications scale, our code becomes harder to understand and maintain. Issues of duplicate code, out of sync data and incomprehensible tree structures quickly plague our nicely designed components.

By introducing programming patterns we can improve the architecture of our application and ensure that our components do not get bloated with irrelevant logic.

Read more
How to Generate Dynamic PDFs Using React and NodeJS

Understanding NodeJS internally can be a little bit daunting (I know it was for me once). Node is a very powerful language and it can do a lot of things.

Today I wanted to uncover the power of Node’s built-in utility tool called fs (file system)

As per the fs docs:

The fs module provides an API for interacting with the file system in a manner closely modeled around standard POSIX functions.

Which is just a fancy way of saying that file system is a way in Node to interact with files for both read and write operations.

Read more
React video courses
Because I need to pay my bills 😉
Copyright © 2019 ABL - The Problem Solver, All rights reserved.

unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp