The React Newsletter

Hi <<First Name>>,

Protected routes and authentication with React Router v5

Often times when building a web app, you’ll need to protect certain routes in your application from users who don’t have the proper authentication. Though React Router doesn’t provide any functionality for this out of the box, because it was built with composability in mind, adding it is fairly straight forward.

Before we even go about creating our protected routes, we’ll need a way to figure out if the user is authenticated. Because this is a tutorial about React Router v5 protected routes and not about authentication, we’ll use a dummy object to mock our auth service.

Getting Started with Gatsby: Build Your First Static Site

Thinking about investing in the Jamstack ecosystem? If your answer is yes, then Gatsby — one of the most popular, powerful Jamstack static site generators around — could be just what you’re looking for. Here’s our guide to getting started with Gatsby.

JAM stands for JavaScript, APIs, and Markup. In other words, while the dynamic parts of a site or app during the request/response cycle are taken care of by JavaScript in the client, all server-side processes take place using APIs accessed over HTTPS by JavaScript, and templated markup is prebuilt at deploy time, often using a static site generator. That’s the Jamstack. It’s performant, inexpensive to scale and offers better security and a smooth developer experience.

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.

Next.js 9.3+ Data Fetching Explained: getServerSideProps(), getStaticProps(), and getStaticPaths()

In this video we are going to learn how to work with the getServerSideProps(), getStaticProps(), and getStaticPaths() methods for static generation and server-side rendering in Next.js.

Watch video

React Hook Form Server-side Validation

For security reasons, a form always needs to validated on the server in addition to on the client. Certain validation rules may only be executed on the server - particularly when the rules depend on the database or another web service. If one of these server validation rules fail, we still need to inform the user. So, how do we deal with server-side validation in React Hook Form? Let’s find out.

Read more

Shared State with React Hooks and Context API

With React 16.8 came the release of Hooks, which, along with other great functions, provides a way for function components to have a state!

In my article Managing State with React Hooks I go over how to use the hooks useState and useReducer to manage state within function components. Give this a read if you need a refresher on how hooks can help manage state.

In this article we’ll take a look at a way to use hooks along with React’s Context API to provide a shared state between function components!

Optimize Your React App with React.memo

Learn how to use React.memo and useMemo together to optimize your React app performance.

Read more

React video courses

Because I need to pay my bills 😉