The React Newsletter

Hi <<First Name>>,

How to test custom React hooks

Get confidence your custom React hooks work properly with solid tests.

If you're using react@>=16.8, then you can use hooks and you've probably written several custom ones yourself. You may have wondered how to be confident that your hook continues to work over the lifetime of your application. And I'm not talking about the one-off custom hook you pull out just to make your component body smaller and organize your code (those should be covered by your component tests), I'm talking about that reusable hook you've published to github/npm (or you've been talking with your legal department about it).

Read more

Next.js 9.3

We are excited today to introduce Next.js 9.3, featuring:

Next-gen Static Site Generation (SSG) Support: Built-in optimized static generation through new data fetching methods.
Preview Mode: Bypass statically generated pages to display drafts from a CMS.
Built-In Sass Support for Global Stylesheets: Applications can now directly import .scss files as global stylesheets.
Built-In Sass CSS Module Support for Component-Level Styles: Leveraging the .module.scss convention, locally scoped CSS can be imported and used anywhere in your application.
Automatic Static Optimization for 404: Improved speed and reliability by serving the 404 page statically.
32 kB Smaller Runtime: Smaller runtime size for all Next.js applications through powerful optimizations.
Next.js Community on GitHub Discussions: You can now discuss and ask questions right from the Next.js repository on GitHub.

All of these benefits are non-breaking and fully backwards compatible.

Building Secure React Applications

React is a secure framework. It handles cross-site scripting (XSS) out of the box. While these statements sound very hopeful, they are unfortunately far from reality. Building secure applications with React is easier than starting from scratch. However, even with React, there are several guidelines and considerations to take into account.

In this session, we take a deep-dive into two particular topics. We take a close look at XSS, React's defenses, and the responsibilities of the developer. The second topic zooms in on the challenges with including NPM dependencies. We look at how attackers abuse NPM to target your application. Throughout these topics, we build a set of concrete guidelines you can immediately apply to your applications.

Watch video

5 Essential Libraries For Your Next React Application

What I love most about React, is that there’s no “one” way to build your application. It’s up to you as a developer to choose the libraries you wish to use and the patterns you wish to follow. This leaves you with infinite freedom to craft your application in your own way.

That said, most of the applications I make, either for work or for personal projects, start with the same libraries.

We could build our applications using React and none of these libraries. We could make everything from scratch. There’s nothing stopping us from building an application with zero external dependencies.

But by leveraging the amazing contributions of the React community, we can spend more time providing value to our users, and less time reinventing the wheel.

Trying Svelte for the first time as a React developer

Hi there, these are my first impressions with the Svelte framework, I’m going to record everything that I learn about it here on Medium, so there we go.

What do I know? just that everyone is talking about it, and also that is the second most popular framework according to stateofjs after reactjs.

So, I will be following the official Svelte tutorial here, my goal on this post is simple, a todo list with checked items, just to learn the basics, we will get deeper in the future.

Keep in mind that I am not an expert on the field, just a guy blogging, If you already know Svelte, well, have fun.

Set Up a Typescript React Redux Project

This post loosely uses the Redux Ducks proposal, which groups Redux “modules” together rather than by functionality in Redux. For example, all of the Redux code related to the users piece of state lives in the same file rather than being scattered across different types, actions, and reducer folders throughout your app. If this isn’t quite clear yet, you’ll see what I mean shortly!

Read more

React video courses

Because I need to pay my bills 😉