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

The React Newsletter

Hi <<First Name>>,
 
How to build a table of contents in React
A table of contents lets your readers see a high-level summary of your page. In this tutorial, we’ll be building a table of contents with React. This component will dynamically render a list of page headings and highlight which heading you are currently viewing.

Read more
 
Building React + Vue support for Tailwind UI

Hey! We're getting really close to releasing React + Vue support for Tailwind UI, so I thought it would be interesting to share some of the behind-the-scenes efforts that have gone into even making it possible.

Grab some popcorn...

The Backstory

From the day we started working on Tailwind UI somewhere in mid-2019 I knew that ultimately it would be 10x more valuable to people if they could grab fully interactive examples built using their favorite JS framework. Trying to make that happen for the first release was way too ambitious though, so we had to figure out how to get there one step at a time.

We decided to focus on vanilla HTML first because it's totally universal, and even if something like JSX would be more helpful for some people, there are lots of existing tools out there for converting HTML to JSX that people could lean on already.

We also made the hard trade-off not to provide any JS for interactions like toggling a responsive menu or opening and closing a modal dialog in the first version. I felt like anything we provided would just do more harm than good, because there's no one JS framework that makes up the majority of the Tailwind user base. If we catered to React developers, we'd be making it harder to use for the 70% of people not using React. If we catered to Vue developers, we'd be making it harder for the 70% of people not using Vue. If we tried to write it in custom vanilla JS, well we'd be making it harder for literally everyone (seriously do you have any idea how much code it takes to build a robust enter/leave transition system from scratch in JS?)

So instead I just documented the different states using comments in the HTML, and left it to the end user to wire it up with their favorite JS framework. I know a lot of people love that about Bulma, and I think it was a great approach for us to start with as well.

But once we felt like Tailwind UI was pretty fleshed out with hundreds of great examples, we decided it was time to tackle the JS problem and see what we could do.


Read more
 
React Framework Comparison: Gatsby, Next.js, Blitz, Redwood
The 5 most popular React frameworks are Create React App (could argue it's not even a framework), Gatsby, Next.js, Blitz and RedwoodJS. They all have pros and cons to them, and different use-cases. This video aims to give an overview of each of them, highlighting their differences and what I personally find their most compelling features.

Watch video
 
Advanced animation patterns with Framer Motion

I got ✨a lot✨ of positive feedback from my Guide to creating animations that spark joy with Framer Motion, and it's undeniable that this library has piqued many developers' interests in the world of web-based animations.

While I introduced in this previous post many of the foundational pieces that compose an animation, and how one can orchestrate multiple transitions very easily with Framer Motion, I did not touch upon many of the more advanced features that this library provides.

Ever wondered how to propagate animations throughout several components or to orchestrate complex layout transitions? Well, this article will tell you all about these advanced patterns and show you some of the great things one can accomplish with Framer Motion!


Read more
 
The advanced guide to React Context with hooks

It's been almost 4 years when React team has been released hooks, the addition to React function component to use state and control the mounting of the apps via Effects lifecycle method.

In this guide you'll have a practical guide how to use hooks with Context api (the alternative of redux for small projects [my opinion]).

I'll use Typescript if you're not comfortable with it simply just remove the types 😬.

Our project is for authentication process, you have to think about it like separate package that you can use for your app and it will handle everything.

Let's get started....


Read more
 
React authentication, simplified

Authentication is one of those things that just always seems to take a lot more effort than we want it to. To set up auth, you have to re-research topics you haven’t thought about since the last time you did authentication, and the fast-paced nature of the space means things have often changed in the meantime. New threats, new options, and new updates may have kept you guessing and digging through docs in your past projects.

In this article, we lay out a different approach to authentication (and access control, SSO, and more) in React applications. Rather than add a static library that you have to keep up to date or re-research each time you want to implement auth, we’ll use a service that stays up to date automatically and is a much simpler alternative to Auth0, Okta, and others.


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


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp