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

The React Newsletter

Hi <<First Name>>,
React Hooks: What’s going to happen to react context?

Earlier this year, the React team introduced the first official context API. I blogged about that new API and people got sufficiently and reasonably hyped.

One common complaint that I knew people were going to have when applying it practically was the fact that the context consumer is a render-prop based API. This can lead to a lot of nesting when you need to consume multiple contexts and other render-prop based APIs as well (for logic reuse). So I addressed that in the blog post by suggesting that you could combine all of the render-prop based APIs into a single function component and consume that.

Read more
How Gatsby scales with your expertise

Many who use Gatsby are not React professionals, or were not React professionals when they began using Gatsby. Some have used other frameworks before. Some knew JavaScript. Others still may have been entirely new to programming!

In any scenario, this individual of disparate experience and expertise was able to use, enjoy, and love using Gatsby.

I myself am even an example of this general scaling idea. I began my career doing UI design, and have since been doing HTML, CSS, and JavaScript for several years now. As my skills have broadened, so too have they improved and scaled by adding Gatsby to my go-to toolchain.

In this post, I want to explain how Gatsby led me into learning React and how your Gatsby project can scale by considering my personal site and experience, as an example. Gatsby seamlessly scales from basic React usage to complex React patterns, from basic Markdown to full-featured headless CMS — Gatsby scales with your expertise and scope.

Read more
Syncing Component State Across Tabs with Service Workers - Tyler Clark
⚡️Talk at React Conf 2018

Watch video
How to fetch data with React Hooks?

In this tutorial, I want to show you how to fetch data in React with Hooks by using the state and effecthooks. We will use the widely known Hacker News API to fetch popular articles from the tech world. You will also implement your custom hook for the data fetching that can be reused anywhere in your application or published on npm as standalone node package.

If you don’t know anything about this new React feature, checkout this introduction to React Hooks. If you want to checkout the finished project for the showcased examples that show how to fetch data in React with Hooks, checkout this GitHub repository.

Read more
How Does React Tell a Class from a Function?

Consider this Greeting component which is defined as a function:

function Greeting() {
  return <p>Hello</p>;

React also supports defining it as a class:

class Greeting extends React.Component {
  render() {
    return <p>Hello</p>;

(Until recently, that was the only way to use features like state.)

When you want to render a <Greeting />, you don’t care how it’s defined:

// Class or function — whatever.
<Greeting />

But React itself cares about the difference!

Read more
The optimistic UI with React

As front-end engineers, we want to provide the most reliable and comprehensive user interface by using many techniques, new technologies, frameworks or just our knowledge and experience. Everything just to achieve a better user experience and ensuring a clear and meaningful interface for the end user of our application.

Nowadays, one well-known technique that could improve our apps, is the Optimistic UI. This is a very simple solution to avoid some part of the loading states during the updates and pretending that some long time actions are called immediately. Sounds a bit weird, I know, but practically, it’s not a breakthrough — just straightforward technique.

Starting from scratch, just try to imagine, a very simple application that is doing something in the background asynchronously, let’s say… some request API call (for sure the most common). For instance, it could be a simple button which generates API call for every single click, such as Like button.

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