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

The React Newsletter

Hi <<First Name>>,
 
Introducing Create Next App

We're delighted to introduce the new Create Next App.

Create Next App sets up a modern React application powered by Next.js in one command.

To get started all you have to do is run: npx create-next-app

Create Next App has been rebuilt from the ground up to provide the best possible developer experience:

  • Interactive Experience: Running npx create-next-app (with no arguments) now launches an interactive experience that guides you through setting up a project.
  • Zero Dependencies: Initializing a project is now as quick as one second. Create Next App has zero dependencies and installs in only 604 kB. Before our optimizations, the previous version was 5.38 MB. That's a reduction of more than 4.7 MB!
  • Offline Support: Create Next App will automatically detect if you're offline and bootstrap your project using your local package cache.
  • New Default Project Template: Create Next App uses a new project template that is designed for a modern Next.js application. Since Create Next App is now maintained alongside Next.js itself, this template will always be up-to-date with the latest Next.js version!
  • Support for Examples: Create Next App can bootstrap your application using an example from the Next.js examples collection (e.g. npx create-next-app --example api-routes).
  • Tested: The package is part of the Next.js monorepo and tested using the same integration test suite as Next.js itself, ensuring it works as expected with every release.

Read more
 
Choosing the best folder structure for your React application

As we all probably already know, unlike Angular, where we already have a predefined way of structuring files, in React, that burden, or gift, depending on how you look at it — is bestowed upon us, the valiant developers.

Now, I choose to look at this as a gift. And let me explain why.

We all have different goals and requirements when building our React applications. Sometimes we are building a small application, like a Proof of Concept, and in this case what we favor are speed and simplicity. In other cases, we are building medium-sized applications, and in this case what we want is the possibility to scale them. And of course, sometimes one of us may get involved in building a gigantic application, with thousands of components, and in this case the one thing that we value the most is maintainability.

Now that we know that we may have different needs at different times, by having the freedom to choose our own React folder structure, we can adapt our application to suit our needs. That is why I look at this as a gift.


Read more
 
David den Toom - Microfrontends
Watch video
 
Simple Git Hooks with Create React App, ESLint, and Husky

Git hooks are scripts that Git executes before or after events such as commits, pushes, etc. It’s a really cool and quick way of validating your code before Git lets you check it in.

In this piece, we will take a look at a simple example of implementing Git hooks on the React application using the Husky library. Then we will make a Git hook that validates your changes by invoking ESLint against your code before every commit.

The only prerequisite is having Node (well, and Git) installed on your machine. I will assume that you know how to create a Git repository. Put your repository into the same directory that you plan to put the React app.


Read more
 
React's useEffect and useRef Explained for Mortals

If the React docs leave you in the dust, or Dan Abramov’s blog makes you feel like you’re reading a scroll handed down from Mt Olympus written in ancient Greek, you’re not alone.

Sometimes the pantheon of React Gods have a hard time translating their wisdom into language the rest of us can understand. It usually goes like this: You hit a snag with React, google your issue, and read a blog or Stack Overflow post with some advice that makes you feel more lost than when you started.

I’ve certainly fallen victim to this many, many times. Particularly with useEffect. Before we dive into this particular hook, let me say that I love writing React with hooks and wouldn’t want to go back to classes. That said, useEffect is a big pain point.


Read more
 
3 Essential Tools to Boost your React App’s SEO

You’ve created an amazing Web App. You know it’s amazing, and everyone that sees it is quite impressed. But you have one problem: you aren’t getting any traffic to your app. Why?

The answer: Search Engines React differently to React (Get it…? React… Ok, moving on).


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


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp