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 React Context effectively
In Application State Management with React, I talk about how using a mix of local state and React Context can help you manage state well in any React application. I showed some examples and I want to call out a few things about those examples and how you can create React context consumers effectively so you avoid some problems and improve the developer experience and maintainability of the context objects you create for your application and/or libraries.

Read more
File-based routing with React Router

Most React applications involve a routing setup to allow user navigation between different pages. There are two common ways to handle routing in React depending on your rendering method.

You probably know React Router, a widely used library for declarative/component-based client-side routing. With server-side rendering, React frameworks like Next.js offer an alternative approach called file-based routing.

In a traditional client-side React routing setup with React router, you'll declare your routes within a <Switch /> component by adding a <Route/> component for each page, specifying a path and a corresponding component to be rendered as a page. It works fine but it lacks universal convention. Also when declaring many routes it becomes hard to follow, at least in my experience.

With file-based routing you don't import page components manually. Instead you define all your routes by adding/removing/renaming files within a directory called pages by convention. Each file inside the pages directory will represent a route in your application. That makes it easier to visualize and manage as the pages directory structure reflects all existing routes. You can also have dynamic routes with special file names and nested routes with sub-directories. We'll discuss some of the file-based routing common patterns shortly.

Today I want to share with you how I'm using React Router with Vite to build a file-based routing for client-side React applications inspired by Next.js file-based routing conventionsin 30 lines of code and one awesome Vite feature.

Read more
New Course Release: Mastering Cypress 8 in 15 minutes a day
I am excited to announce my brand new course:
Master Cypress 8 in 15 minutes a day.

You can get the course now at the best price Udemy will let me offer with this link.

About Master Cypress 8 in 15 minutes a day

Tired of having users email you that your web application is broken? Using Cypress, the JavaScript End to End Testing Framework, as a quality control tool will help a lot in preventing those emails. Yet Cypress, good as it is, is not a silver bullet.

In this course you will learn how easy it is to get started with Cypress and create your first useful tests. We are going to start at the basics of Cypress. But we are not going to stay there. You will also learn how to make tests for data driven applications more reliable and even faster. You will also learn how to expand Cypress with extra functionality. We will do that both by adding additional plugins as well as writing our own extensions. We will look at how 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. Helping you prevent errors in code from ever deploying to production.

Is this course for you? Never written automated end to end tests before?  No problem, we will start from the beginning. Already written some end to end tests with something like Selenium? Sweet, I will show you how to get up and running with Cypress in no time. Not sure if automated end to end testing is for you? I will show you how to get quick benefits for a minimal amount of work.
Micro Frontends in React — a State of the Art Approach
David will explain the different possibilities to implement MicroFrontends in the past, the present, and the future. More importantly, he will leave you to know which of the available approaches is best suited for your specific task at hand.

Watch video
Three Buggy React Code Examples and How to Fix Them

There’s usually more than one way to code a thing in React. And while it’s possible to create the same thing different ways, there may be one or two approaches that technically work “better” than others. I actually run into plenty of examples where the code used to build a React component is technically “correct” but opens up issues that are totally avoidable.

So, let’s look at some of those examples. I’m going to provide three instances of “buggy” React code that technically gets the job done for a particular situation, and ways it can be improved to be more maintainable, resilient, and ultimately functional.

Read more
A Visual Guide to React Rendering - It Always Re-renders
When does a React component re-render? Is it when its state or props change?

Read more
9 Experience-Enhancing Technologies to Check Out for Your Next.js & React Project
Next.js is a great technology by itself, as it offers many great features that makes creating fast and versatile React apps and websites easily. However, the beauty of the Javascript ecosystem is that there is an abundance of hidden (and not-so-hidden) gems that will enhance your experience as a developer and the experience for the end user. In this article, I will present 9 technologies that can enhance the frontend, backend, and full-stack development and experience for your next project with Next.js.

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