The React Newsletter

Hi <<First Name>>,

Use CSS Variables instead of React Context

I've been riding the CSS-in-JS train for years (I was even a significant contributor to the "movement"). It's awesome. I've never been so productive working with CSS than when I added a real programming language to it.

I'm still a fan of CSS-in-JS, and in recent years, the CSS spec has evolved and improved a lot and modern browsers have too (unfortunately, Internet Explorer is NOT a modern browser in this or any context). Often I'd use a ThemeProvider (like those found in emotion), but turns out there aren't a whole lot of advantages to that kind of component for many use cases and there are several disadvantages.

Let's look at a simple example of "Dark Mode" and compare differences in API (developer experience) and performance (user experience). We'll keep the example simple, and in both the before/after, we'll be using emotion's styled utility. Keep in mind that with the ThemeProvider you can consume the values using the useTheme hook, with a styled component, or with the css prop. With CSS Variables, you can get the values in your CSS with var(--css-variable-name) and in your JavaScript using getComputedStyle(element).getPropertyValue('--css-variable-name') (which you really don't need to do...)

What’s The Difference Between NextJS and Create-React-App?

When it comes to creating new React projects in 2020, there are two clear options. NextJS, or Create-React-App. Gatsby has fallen out of favour. Due to slow builds at scale, and NextJS becoming the better static site generator.

Let’s go over the advantages and disadvantages of NextJS and Create-React-App. We will also cover which use cases and scenarios are better suited for one over the other.

Next.js 10's New Image Component

In this video we'll take a look at the new Image component in Next.js 10 that does automatic image optimization. We'll cover the 4 different layout options and talk about how they differ and when to use them.

Watch video

What Are Higher-Order Components in React?

If you’re new to React, or even if you’ve been using it for a while, you may have heard about these things called higher-order components (HOCs), and shuddered at the apparent complexity of the term. It certainly sounds like something fancy that’s beyond a beginner’s comprehension. But that’s not the case at all—the truth is that higher-order components in React are a very intuitive (and powerful!) design pattern.

In this tutorial, we’ll explore what higher-order components are and why you might want to use them. We’ll also learn how you can combine them with the React Context API to create reusable components and behaviors. Let’s dig in!

Building React Apps With Storybook

Storybook is a UI explorer that eases the task of testing components during development. In this article, you will learn what storybook is about and how to use it to build and test React components by building a simple application. We’ll start with a basic example that shows how to work with storybook, then we’ll go ahead to create a storybook for a Table component which will hold students’ data.

Storybook is widely used in building live playgrounds and documenting component libraries, as you have the power to change props values, check loading states amongst other defined functionalities.

You should have basic knowledge of React and the use of NPM before proceeding with this article, as we’ll be building a handful of React components.

JSX Tips and Gotchas for Beginners

For the most part, JSX should feel pretty natural. There are a few things to be aware of though.

Read more

React video courses

Because I need to pay my bills 😉