Latest Articles & Tutorials

Getting Started with the React Native Navigation Library (sitepoint.com)
Nov 13, 2019
One of the most important aspects of React Native app development is the navigation. It’s what allows users to get to the pages they’re looking for. That’s why it’s important to choose the best navigation library to suit your needs.
  • Wern Ancheta
Building a payments system with React and Stripe (blog.logrocket.com)
Nov 13, 2019
By the end of this tutorial, you should be able to set up a backend and frontend for processing online payments in your React app.
  • Ovie Okeh
    Feed data to a Next.js component using getInitialProps (flaviocopes.com)
    Nov 13, 2019
    How to feed data to a Next.js component using getInitialProps
    Understanding React's key prop (kentcdodds.com)
    Nov 12, 2019
    The key prop is a mechanism for controlling component instances.
    Dynamic content in Next.js with the router (flaviocopes.com)
    Nov 12, 2019
    How to setup dynamic content in a Next.js site
    Towards a Gatsby+Suspense proof-of-concept (swizec.com)
    Nov 11, 2019
    Messing around with React Suspense gave me a great idea: What if you could fallback to preloaded data instead of a loading spinner?
    A deep dive into React Fiber internals (blog.logrocket.com)
    Nov 11, 2019
    We know that ReactDOM builds up the DOM tree under the hood and renders the application on the screen. But how does React actually build the DOM tree? And how does it update the tree when the app’s state changes?
    • Karthik Kalyanaraman
    Learn React Router in 5 Minutes - A Beginner's Tutorial (freecodecamp.org)
    Nov 11, 2019
    Sometimes you've only got 5 minutes to spare. Instead of wasting it on social media, let's get a 5-minute introduction to React-Router! In this tutorial, we're going to learn the basics of routing in React by building navigation for a Scrimba knitting shop website.
    • Bob Ziroll
    RxJS with React Hooks for state management (blog.logrocket.com)
    Nov 11, 2019
    In this article, we’ll cover the basics of RxJS and how to integrate it with React applications using React Hooks for state management. We’ll do this by building a demo chat application.
    • Ebenezer Don
    TDD with React Test Renderer (blog.logrocket.com)
    Nov 10, 2019
    It’s no secret that Enzyme has become the de facto standard for React components testing, but there are other good options around. For example: React Test Renderer.
    • Alexander Solovyev
    How to use the React Developer Tools (flaviocopes.com)
    Nov 10, 2019
    Learn this very useful tool we absolutely need to install when building a React application.
    Cleaning up the DOM with ForwardRef in React (blog.logrocket.com)
    Nov 09, 2019
    Ref forwarding in React is a feature that lets components pass down (“forward”) refs to their children. It gives the child component a reference to a DOM element created by its parent component. This then allows the child to read and modify that element anywhere it is being used.
    • Peter Ekene Eze
    Learn React Context in 5 Minutes - A Beginner's Tutorial (freecodecamp.org)
    Nov 08, 2019
    React's Context API has become the state management tool of choice for many, oftentimes replacing Redux altogether. In this quick 5-minute tutorial, you'll see an introduction to what Context is and how to use it!
    • Bob Ziroll
    Working with Fusebox and React (css-tricks.com)
    Nov 08, 2019
    If you are searching for an alternative bundler to webpack, you might want to take a look at FuseBox. It builds on what webpack offers — code-splitting, hot module reloading, dynamic imports, etc. — but code-splitting in FuseBox requires zero configuration by default.
    • Kingsley Silas
    How Discord achieves native iOS performance with React Native (blog.discordapp.com)
    Nov 07, 2019
    Early on at Discord, we adopted React Native as soon as it was open sourced to build our iOS app from the core of our React app. Years later, we are still happy with that decision.
    • Miguel Gaeta
    3 Ways to Build Your Own React Component Library (blog.bitsrc.io)
    Nov 07, 2019
    Component libraries are great resources when it comes to developing React-based applications. They allow you to logically group your components in a way that lets others in your team explore them and pick & choose the ones they need.
    • Fernando Doglio
    Building a responsive camera component with React Hooks (blog.logrocket.com)
    Nov 07, 2019
    I was recently tasked with building a front-end camera component that allows users to upload images of their identification cards to a back-end service.
    • Andrew James
      Learn React Hooks in 5 minutes - A Beginner's Tutorial (freecodecamp.org)
      Nov 06, 2019
      Sometimes 5 minutes is all you've got. So in this article, we're just going to touch on two of the most used hooks in React: useState and useEffect.
      • Bob Ziroll
      React Native End-to-end Testing and Automation with Detox (sitepoint.com)
      Nov 06, 2019
      Detox is an end-to-end testing and automation framework that runs on a device or a simulator, just like an actual end user.
      • Ahmed Mahmoud
      Experimenting with the new React Concurrent mode (swizec.com)
      Nov 06, 2019
      I’ve been playing around with React’s new Concurrent Mode and it is amazing. A little mind-bendy, a dash mad, and a whole lot of wonderful.
      The complete guide to building inline editable UI in React (blog.logrocket.com)
      Nov 06, 2019
      UI for web applications are becoming increasingly complex by the day. With more powerful client side libraries, we can push the limits of UX through UI experimentation. One of these experiments involves inline editable UI.
      • Paramanantham Harrison
      Using i18n with Next.js & React context API (itnext.io)
      Nov 05, 2019
      An internationalized HTTP/2 React app that is fast and SEO friendly.
      • Yannis Torres
      How to Enable React Concurrent Mode (kentcdodds.com)
      Nov 05, 2019
      Concurrent Mode is an enormous improvement for performance. Here's how you enable it.
      Maintain Control: A Guide to Webpack and React, Pt. 1 (toptal.com)
      Nov 05, 2019
      If you want to maintain a greater degree of control over your build process, then you might choose to invest in a custom Webpack configuration. As you’ll learn from this Webpack tutorial, this task is not very complicated, and the knowledge might even be useful when troubleshooting other people’s configurations.
      • Michael Pontus
      Nice imports with Next.js (remysharp.com)
      Nov 04, 2019
      During my React based development, I'll find myself importing a module from '../../../components/Widget' and that ../../../ is anyone's guess if it's right first time or not. Except I discovered that Next.js (which is what I do most of my React dev with) ships with a trick up its sleeve.
      • Remy Sharp
      Solutions to frustrations with React Hooks (blog.logrocket.com)
      Nov 04, 2019
      One of my previous posts, Frustrations with React Hooks, got an incredible amount of views and topped hacker news at one point. The post also got lots of comments, some of which have changed how I view Hooks and given me a completely new and positive way of viewing them.
      • Paul Cowan
      What I've Learned About Testing React Apps - Part 1: Unit Tests (dev.to)
      Nov 01, 2019
      There are a couple of types of testing - most notably unit, integration and e2e (end-to-end) testing. For the purpose of this post I'd like to combine unit and integration tests under the name of "unit tests" (any QA engineers who are reading this, please forgive me).
      • Tomasz Łakomy
      Build a coding blog from scratch with Gatsby and MDX (blog.scottspence.me)
      Oct 31, 2019
      You’re going to build a developer blog with MDX support (for some React components in Markdown goodness), so you will be able to add your own React components into your Markdown posts.
      • Scott Spence
      How to Build a Web App with GraphQL and React (sitepoint.com)
      Oct 31, 2019
      In this tutorial, we’ll learn to build a web application with React and GraphQL. We’ll consume an API available from graphql-pokemon and serve it from this link, which allows you to get information about Pokémon.
      • Ahmed Bouchefra
      React + D3.js (wattenberger.com)
      Oct 31, 2019
      When I visualize data on the web, my current favorite environment is using D3.js inside of a React.js application.
      • Amelia Wattenberger
      Improve React Native performance with immutability (blog.logrocket.com)
      Oct 31, 2019
      React Native SlowLog is a tool suitable for bigger performance problems in React Native.
      • Daniel Idaszak
      31 steps to become a professional React developer (freecodecamp.org)
      Oct 31, 2019
      Every single project and course I took to reach a hireable level. Before I learned how to code, I used to ask developers how much time it took them to learn their craft — and how they managed to do it.
      • Per Harald Borgen
      Catch Your Suspense Errors (dev.to)
      Oct 30, 2019
      Not every promise resolves. Some are rejected. So, when we use React.Suspense to show loading and loaded states, we need to consider exceptions as well.
      React Hook Form vs. Formik: A technical and performance comparison (blog.logrocket.com)
      Oct 30, 2019
      Formik outperformed Redux Form in terms of size, best practices, and performance, but in this article, we will see how Formik measures up against the new kid on the block, React Hook Form. We will compare the two libraries and determine who will emerge as the victor in the end.
      • Siegfried Grimbeek
      It’s All In the Head: Managing the Document Head of a React Powered Site With React Helmet (css-tricks.com)
      Oct 30, 2019
      The document head might not be the most glamorous part of a website, but what goes into it is arguably just as important to the success of your website as its user interface.
      • Darrell Huffman
        How to build a mapping app in React the easy way with Leaflet (freecodecamp.org)
        Oct 30, 2019
        Mapping is hard, but spinning up a new app that renders maps doesn’t have to be. Here’s how you can easily get started working with maps in a new React app.
        • Colby Fayock
          Deploy a Gatsby Site on GitHub Pages for Free (blog.bitsrc.io)
          Oct 30, 2019
          Learn how to configure Gatsby to easily deploy a blog site on Github Pages.
          • Shaumik Daityari
          Add interactivity to your CLIs with React (blog.logrocket.com)
          Oct 30, 2019
          Command-line interfaces (or CLIs) are becoming more and more interactive lately. They accept user input, render many variations of user interfaces, have improved designs, and are generally more pleasant to work with these days.
          • Vadim Demedes
            Read a File in Create React App (starikov.dev)
            Oct 29, 2019
            Imagine you have a text file on your computer. It could be JSON, CSV, markdown or any other format. And now you want to create a React app to make the information in that file more presentable and maybe somewhat interactive.
            • Herman Starikov
            Animating React: GreenSock and React Hooks (dev.to)
            Oct 29, 2019
            Prompted by a one of my students who was having trouble implementing a GSAP animation in React I decided to experiment a little and write up what I learned.
            • Christina Gorton
            How to add testing to an existing project (kentcdodds.com)
            Oct 29, 2019
            This is how you get started in testing your application.
            React onHover Event Handling (with Examples) (upmostly.com)
            Oct 29, 2019
            There is no onHover event handler in React. Instead, we have the onMouseDown, onMouseLeave, and onMouseEnter events to perform onHover actions in React.
            • James King
            How to handle async side effects in 2019 (blog.logrocket.com)
            Oct 29, 2019
            There’s been a bunch of different approaches to handling async operations, including Redux-Saga, but in this article we’ll be focusing on what I think is currently the best approach: using react-async.
            • Peter Ekene Eze
            Play with React Concurrent Mode with Your Gatsby Site (aworkinprogress.dev)
            Oct 28, 2019
            So the React team released curious cat version for concurrent mode, and I want to try that with my personal sites and side projects, only to realize that by using Gatsby I do not have direct access to my ReactDOM.render(), which I am supposed to change.
            • Wei Gao
            Creating a rudimentary pool table game using React, Three JS and react-three-fiber: Part 1 (dev.to)
            Oct 28, 2019
            This is a three-part series of articles where we will see how we can use React, three.js, and react-three-fiber to create a game of pool table.
            • Manan Joshi
            React vs. Plain JavaScript (framer.com)
            Oct 28, 2019
            Learn about the differences between using pure JavaScript or a library like React to design and develop web apps.
            • Chris Achard
              6 Tools for Debugging React Native (sitepoint.com)
              Oct 28, 2019
              In the React Native world, debugging may be done in different ways and with different tools, since React Native is composed of different environments (iOS and Android), which means there’s an assortment of problems and a variety of tools needed for debugging.
              • Said Hayani