Latest Articles & Tutorials

When to useLayoutEffect Instead of useEffect (
Sep 20, 2019
There are two React hooks, useEffect and useLayoutEffect, that appear to work pretty much the same.
The ultimate guide to drag and drop in React (
Sep 20, 2019
Drag and drop UI has become an integral part of most modern applications. It provides richness in UI without comprising the UX.
  • Paramanantham Harrison
React Dev Tools — Debug Like a Ninja (
Sep 20, 2019
React team launched a new version of the React Dev Tools (v4) a few weeks ago and it’s fantabulous. It gives you debugging superpowers to navigate through your tree, trace data flow, spot weak links and optimise for perf.
  • Dinesh Pandiyan
Expo SDK 35 is now available (
Sep 20, 2019
Expo SDK v35.0.0 is out today and is based on React Native 0.59.8, the same React Native version as SDKs 33 and 34.
  • Eric Samelson
Why You Rendering, React? (
Sep 19, 2019
However you put your app together, it’s always a good idea to ensure your components and state changes are triggering re-rendering as expected. That’s especially important if you have costly components to re-render.
  • Cheri Hung
Thinking in React Hooks (
Sep 19, 2019
React introduced hooks one year ago, and they've been a game-changer for a lot of developers. There are tons of how-to introduction resources out there, but I want to talk about the fundamental mindset change when switching from React class components to function components + hooks.
  • Amelia Wattenberger
React Component Monorepo Library Made Easier (
Sep 19, 2019
Keep components in a monorepo. Build, test, publish and update independent components and their dependents. Get adoption.
  • Jonathan Saring
10 mistakes React developers make (
Sep 19, 2019
Certain mistakes have become pretty common among developers working on React applications. These mistakes may be the result of an oversight, pressure to meet a deadline, or a lack of experience with React/JavaScript.
  • Ogundipe Samuel
Testing React applications in 2019 (
Sep 19, 2019
In this post, we’ll take a closer look at some of the best ways you can go about testing your React applications.
  • Peter Ekene Eze
Make your designer happier with Gatsby’s image manipulations (
Sep 17, 2019
Gatsby ships with some incredibly powerful plugins for image manipulation, performing operations that would normally require a designer (or an external 3rd-party software) to perform.
  • Aggelos Arvanitakis
Announcing React Navigation 5.0 (
Sep 17, 2019
We’ve been working on several improvements to React Navigation, such as improving animation performance with gesture-handler and reanimated libraries, migrating to TypeScript, and more.
  • Satyajit Sahoo
Animating Next.js page transitions with Framer Motion (
Sep 17, 2019
I've been testing several React animation libraries and Framer Motion made the highest impression on me. In this post we'll explore how to use Framer Motion to animate Next.js page transitions.
  • Kristian Heruc
Getting Familiar with useEffect: Part Two (
Sep 17, 2019
Last week, we took a closer look at the useEffect Hook, but we still have yet to touch on one of the function's most important features: the dependency array.
Getting Started with Electron, Typescript, React and Webpack (
Sep 17, 2019
Here we will explore an opinionated approach to setting up Electron: TypeScript, React and Webpack. We’ll start with a basic Electron project and progressively build it into an enterprise-ready solution.
  • Justin Ellison
Your React App Is a Mess Before You Even Know It (
Sep 17, 2019
This is how you separate infrastructure, content, style, layout, and state from each other.
  • Frank Zickert
How to Build a Real-time React and Express Fullstack search engine with Postgres (
Sep 16, 2019
In this tutorial we will go through and setup a full stack search engine with React as the front end, Node and Express for the server, and PostgreSQL for the database.
  • Mohammad Iqbal
Profile a React App for Performance (
Sep 16, 2019
How to use the React DevTools and React's profiling build to properly profile a production app.
State management using only React Hooks (
Sep 16, 2019
By the end of this article, you should be able to manage your application’s state in a predictable manner without any third-party package.
  • Ovie Okeh
Sharing state like Redux with React's Context API (
Sep 15, 2019
In learning React, one of the first challenges I faced was figuring out state management. State is a vital part of any application that has more complexity than a simple blog or brochure site.
  • Rohan Faiyaz Khan
CSS Pseudo-Class effects in Expo for Web! (
Sep 13, 2019
How to use Hover, Focus, and Active states in your universal app.
Redoing search UI with React Context and refs (
Sep 12, 2019
In this article, we’ll cover the following: Context: basic usage and strategies for injecting data anywhere in your component tree; Refs: what they are and why our use case calls for them.
  • Ryan Harris
React Hooks: Recipes (
Sep 11, 2019
An article providing concrete examples of why and how one uses most of the React Hooks.
  • John Tucker
How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify (
Sep 11, 2019
When interacting with a backend, a JAMstack app can do everything a mobile app can do, without the tyranny of the app store. This is a fundamental insight that goes as deep as the fight for a more open, secure, decoupled, faster web.
How to deploy a React app to production on AWS using Express, Postgres, PM2 and nginx (
Sep 11, 2019
In this tutorial I will walk you through a fairly complex production-level AWS deployment setup from scratch. I will assume very little prior knowledge about AWS and assume you are a beginner.
  • Mohammad Iqbal
Why We Switched to React Hooks (
Sep 11, 2019
Have you ever been tasked with extending a component that has a ton of branching logic, and realize that the component requires some state to make that new feature you’re adding come to life?
  • Duggie Mitchell
How to Automatically Optimize Responsive Images in Gatsby (
Sep 11, 2019
Image optimization — at least in my experience — has always been a major pain when building speedy websites. Balancing image quality and bandwidth efficiency is a tough act without the right tools.
  • Michael Wanyoike
Getting Familiar with useEffect: Part One (
Sep 10, 2019
Rendering is the heartbeat of a React application. When something changes (props, state), the component tree re-renders, reflecting that change in the user interface. But what happens when we need to do something after a render? As you might imagine, there's a Hook for that.
React Native and Expo at Flexport (
Sep 10, 2019
Now that the mobile apps have been live in production for over a year, we’d like to share our development experience with the broader community, including a deep dive into a few internal tools powered by Expo JavaScript bundles and app manifests.
  • Max Heinritz
Duplication in State Management: A Story of a Bug (
Sep 10, 2019
Why duplication in state management is a recipe for disaster
  • Llorenç Muntaner
Hamburger Menu with a Side of React Hooks and Styled Components (
Sep 10, 2019
I decided to build my own simple hamburger with sidebar. No pickles, onions or ketchup. Just meat, bun, and a side of menu items.
  • Maks Akymenko
Simplifying state management in React apps with batched updates (
Sep 10, 2019
After making an update to your component’s state using either useState or this.setState, parts of the component re-renders depending on the update.
  • Peter Ekene Eze
Mimic WhatsApp stories using React Native and Firestore (
Sep 10, 2019
Stories are now a trending feature of most social media applications, including WhatsApp, Snapchat, Instagram, and others.
  • Mohammad Kashif Sulaiman
Frustrations with React Hooks (
Sep 09, 2019
Before I detail my current frustrations with Hooks I do want to state for the record that I am, for the most part, a fan of Hooks.
  • Paul Cowan
Yet another post about React props (
Sep 09, 2019
You could say this topic has been done to death, but lately I’ve started using a technique that I don't recall having come across elsewhere.
  • Jeff M Lowery
Nested dynamic layouts in Next.js apps (
Sep 09, 2019
In this post, we'll explore how to create a Next.js app with one global layout and multiple (dynamic) sub-layouts for different sections of the website.
  • Kristian Heruc
State management with React Hooks (
Sep 09, 2019
For this article, we will be working with a pattern for managing state using two very important Hooks, useContext and useReducer, to build a simple music gallery app. The application will have only two views: one for login and the other to list the songs in that gallery.
  • Samuel Omole
How I Developed React Hooks for Web Workers (
Sep 08, 2019
Making Use of Async Generators
  • Daishi Kato
React onChange Events (With Examples) (
Sep 08, 2019
The onChange event in React detects when the value of an input element changes. Let’s dive into some common examples of how to use onChange in React.
  • James King
Secrets and Environment Variables in Next.js and Now (
Sep 07, 2019
Zeit has great documentation, but it took me a while to understand the difference between environment variables (secrets) on the serverless side vs how to get env vars exposed and available to the React code which runs client side, in the browser.
Migrating from JavaScript to TypeScript in a Real World React Project (
Sep 07, 2019
This article covers the way me and the team I am working with migrate a React application from JavaScript to TypeScript over the last couple of months and onwards. The goal is to help developers with the same idea to get a hold on where to start.
  • Hans Christian Reinl
Create and Publish a React Component Library — the easy way (
Sep 06, 2019
We are going to create a simple React component library which we can publish via npm and use it in other React projects.
  • Eshwaren M
    Hooked on Hooks (
    Sep 05, 2019
    Lately, I’ve been trying to level up my JavaScript and React/React Native skills so I’ve been making silly side projects. The past week or so I have been working on a random cat gif app using the Giphy API in an Expo project.
    • Erin Fox
    Forms in React (
    Sep 05, 2019
    Form Development in React comes down to three things: Data, Validations, and Submission. See how to handle these yourself or using Formik to make things simpler.
    React - Under the hood (
    Sep 04, 2019
    In this post, I'll try to uncover some interesting things about React which you, as a React developer would find fascinating. Let's start with the very start, the point of initialization.
    • Mehul Mohan
    Creating Complex Animations in React Using react-spring (
    Sep 04, 2019
    Before, we went over how to create single animations with react-spring. Now we’ll be looking over the different methods for combining multiple springs for more complicated animations.
    • Joshua Hall
    Adding spinners and notifications to your React app (
    Sep 04, 2019
    To make your web projects more interactive and user-friendly, you may find you want to add some additional features like notifications, or a spinner that shows a loading state.
    • Nur Islam
    Model-Based Testing in React with State Machines (
    Sep 04, 2019
    We’ll learn how model-based testing can eliminate the need to manually write integration and end-to-end tests, by automatically generating full tests that keep up-to-date with an abstract model for any app.
    • David Khourshid
    State Machines in React (
    Sep 04, 2019
    One of the biggest pain points when developing an app is the tricky business of managing state. Many bugs are caused by things getting into unexpected states, or by race conditions. Finite state machines can help eliminate both types of bugs entirely, while providing a welcome, structured way to build components.
    • Dave Geddes