The React Newsletter

Hi <<First Name>>,

Using Tailwind CSS with Create React App

I’ve been hearing a lot about Tailwind CSS lately and I wanted to give it a try, but I wanted to combine Tailwind with Create React App. In this post I’ll show you how to use Create React App with Tailwind CSS in just a couple quick minutes.

I’ll show two versions: a Basic one that has the most minimal setup, and a Production version that will set things up for an optimized workflow and a smaller production build.

Here’s how to integrate Tailwind with CRA, without ejecting. It’ll work like this:

We’ll install a tool to do the build
A new build step will call our tool and to generate the CSS to use Tailwind
We import the generated CSS file into our React app

A Sneak Peek at React Router v6

At the time of this writing, React Router v6 is still in alpha, but the time is about right to start playing with it and exploring what’s to come. This guide will give you a peek at the new features/changes!

As you may know, the lead maintainers forked the React Router project to create a lightweight alternative called Reach Router in early 2018.

During this time, both libraries grew, however it seems that active development for Reach Router will stop, and will be merged into the upcoming React Router v6 🛣

With the release coming soon, here’s a sneak peek of what’s coming!

Why TypeScript is Actually Good

I respond to my last video and explain why my points are not valid. I much prefer TypeScript to JavaScript and find it very good.

Watch video

Airbnb Transfers Ownership of Enzyme, Its React Testing Library

Airbnb transferred ownership of Enzyme, its React testing library, to the new enzymejs GitHub organization. Airbnb still plans to continue to use and contribute to Enzyme.

Airbnb decided to put the responsibility for the development of its Enzyme testing library in a community-led enzymejs GitHub organization. Airbnb mentioned that the existence and the support from the community of developers and contributors as a key driver behind the decision:

[The] community is largely the reason why we are excited to announce that we will transfer ownership of Enzyme to the new enzymejs GitHub organization. We believe that this new home will help the project continue to support the community’s needs well into the future. The success here has moved beyond Airbnb as a single org […].

The four-year-old React component testing library has over 340 contributors. Since its inception, Enzyme grew in popularity among developers, as illustrated by key statistics: two-million weekly downloads (growing 8% annually) on npm, 18,000+ GitHub stars, 1,400 packages dependent on Enzyme. Enzyme is additionally used by over 238,000 repositories and 25,000 packages.

While Airbnb mentioned that it uses Enzyme internally in over 17,000 tests, it also revealed that the React Testing Library has been increasingly used within the organization. Nonetheless, Airbnb sees continued usage and contributions to Enzyme in the future.

useEffect and useLayoutEffect

From React's 16.8 release, there has been quite a change in the way we use to write React components. In this version, the React team introduced Hooks, allowing you to share your component logic and not write a single class anymore. People reacted very well to this change and started rewriting all their code to Hooks, removing complexity and making their codebase smaller.

useEffect is one of the most popular hooks and came to replace componentDidMount, componentDidUpdate, and componentWillUnmount.

You probably know how it works. But did you know useEffect has a big brother? It's called useLayoutEffect.

Let's compare both and see when it will be the case in which you will need to use it.

React and Google OAuth with .NET Core backend

I was inspired to write this article because we rarely find React or Angular posts with .NET Core backend as examples, and I am sure, like me, there are several developers using this combination tech stack for their products.

Social Authentication being a very common use case, I felt was a good example to demonstrate how to structure such an app. This is a very opinionated (my way) of setting this code base.

Finally, I would like mention that I have used the workflow defined in this article, and used this post as a baseline example to work from.

React video courses

Because I need to pay my bills 😉