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

The React Newsletter

Hi <<First Name>>,
 
TypeScript + React: Typing Generic forwardRefs
If you are creating component libraries and design systems in React, you might already have fowarded Refs to the DOM elements inside your components.

Read more
 
Delay dispatching actions in Redux using Thunk middleware

Managing the application state in a modern frontend application is hard. But it’s tools like Redux which makes it all breeze for us.

But everything has limitations and so does Redux. To understand the limitation of Redux, let’s first understand how Redux works in a nutshell.


Read more
 
Introducing Valtio
Let's check out the Valtio state manager for React.

Watch video
 
Cypress Tutorial
Tired of having users email you that your web application is broken? Using Cypress.io, the JavaScript End to End Testing Framework, as a quality control tool will help a lot in preventing those emails. Yet Cypress.io, good as it is, is not a silver bullet.
 
In this upcoming video course Maurice de Beijer will teach you all about using Cypress.io. You will learn how easy it is to get started and create your first useful tests. You will also learn how to make tests for data driven applications more reliable and even faster. He will show you how to test applications using 3rd party authentications services. And you will learn how to include all that as part of your continuous integration build. Hellping you prevent errors from ever deploying.
 
Want to learn more? Go to https://www.cypress-tutorial.net/ and subscribe to hear about the updates and the course launch. Don’t worry, I am not going to spam you. And you can unsubscribe at any time.
React State: A simple and easy to follow breakdown

So you've just started learning and working with React. Great 😄! React is a fantastic JavaScript library that helps us in building interactive sites but it can difficult to grasp at first.

Coming from vanilla JavaScript into React you will be hit by all kinds of terminology such as props, state, lifecycle, components, hooks and much more. It can be overwhelming but it doesn't have to be.

State is a core concept of React. One that can be difficult to understand at first and especially difficult to master. So that is why I decided to write this article. I like React a lot and would like to help others who might be having difficulties. Let's get to it 👏.

What is state?

Let's consider some simple real world examples for a second. A door can either be open or closed hence in an open or closed state. It can be anything really. Think about a clock ticking over. Each time the second increases, the state of the clock changes.

In React we build our UI by creating re-usable components that we write using JavaScript(usually JSX which is a syntax extension of JavaScript). Components are able to manage their own state locally and they can be combined to form large and complex UI.

Consider a project written with vanilla JavaScript for a second. If we want to update an element normally we would have to query for the element and then do something to it to reflect the change of state. A common way to do this is by toggling certain classes that we have set up. Check it out 👇.


Read more
 
Integrating Google Maps in React
Integrating maps into your app is a highly-demanded feature, especially taking into account the COVID-19 pandemic situation. Like never before, we tend to make online orders even when it comes to ordinary things such as food, clothes, all sorts of goods from supermarkets, etc. And thus, we are generally interested in tracking such things down or looking for a location of a particular place/item of our interest. That is why many of our clients are requesting a map integration in their products.

Read more
 
From semantic CSS to Tailwind - Refactoring the Netlify UI codebase

The React codebase that powers app.netlify.com is about five years old. During these five years, the focus has mostly been on high-speed growth, as most start-ups do. For this reason, what started with organised PostCSS gradually grew to become a complex and entangled global CSS architecture with a lot of specificity and overrides. As you might expect, there’s a point where the added tech debt it introduces makes it difficult to keep shipping fast without adding any regressions. Besides, as the number of frontend developers contributing to the codebase also grows, this kind of CSS architecture becomes even more difficult to work with.

For this reason, in 2021, we are taking on the challenge of refactoring the entire Netlify UI codebase to utility CSS, using Tailwind.

This blog post is the first of a series that will cover our decisions, implementation strategy, technical difficulties, and things we learn along the way.


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