Latest Articles & Tutorials

Absolute imports with Create React App (hackernoon.com)
May 19, 2019
With the release of Create React App 3, we now have the ability to use absolute import paths, without ejecting.
  • David Gilbertson
React and Accessibility (aditus.io)
May 18, 2019
Slides from the React Zurich Meetup.
  • João Figueiredo
The Future of React Router and @reach/router (reacttraining.com)
May 17, 2019
We are bringing together the best of React Router and Reach Router into a new, hook-based API.
Dockerizing a React App (mherman.org)
May 17, 2019
This tutorial demonstrates how to Dockerize a React app using the Create React App generator.
  • Michael Herman
    How to create a “fashion police” with React Native and off-the-shelf AI (medium.freecodecamp.org)
    May 17, 2019
    We will be harnessing Microsoft’s “off-the-shelf” Custom Vision services to classify clothes as “cute” or “not cute” according to data you’ve given it.
    • Kelsey Wang
    The beginner’s guide to mastering React props (blog.logrocket.com)
    May 17, 2019
    As you learn how to develop web applications using React, you will inevitably come across the concept of props. Understanding the way props work is essential to mastering React, but to grasp the concept fully is no easy thing.
    • Nathan Sebhastian
    Next.js E-Commerce Tutorial: Quick Shopping Cart Integration (snipcart.com)
    May 16, 2019
    These days, there isn’t much you can’t do with React, whether you’re a seasoned developer or a complete beginner. This is mostly due to the creation of tools such as Next.js that have successfully simplified React frontend development. So, today, I want to explore what Next.js can do for e-commerce.
    • Michael Poirier-Ginter
    Creating Your Own React Validation Library: The Basics (Part 1) (smashingmagazine.com)
    May 16, 2019
    Ever wondered how validation libraries work? This article will tell you how to build your very own validation library for React step by step.
    • Kristofer Selbekk
    Iterating a React Design with Styled Components (css-tricks.com)
    May 16, 2019
    In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.
    • Cliff Hall
    How to create a searchable log with Gatsby (medium.freecodecamp.org)
    May 16, 2019
    I recently wanted a way to quickly jot down things I learn throughout the day, or lessons I want to keep in mind. But that’s not enough — I also need to be able to search these logs so I can find exactly what I’m looking for right away. That’s exactly what I’m going to show you how to build today.
    • Amber Wilkie
    Styled components: what, why and how? (dev.to)
    May 15, 2019
    Styled Components are a way of styling your React components using CSS and the advantages offered by ES6.
    • Christopher Kade
    How to create a Countdown Component with React (florin-pop.com)
    May 15, 2019
    Recently I had to create a Countdown for one of my other projects and I thought that it could also make a good tutorial, so in this post we're going to create this component using React and a little bit of SVG.
    • Florin Pop
    Why you should choose useState instead of useReducer (medium.com)
    May 15, 2019
    A guide to local and global state management via useState.
    • Austin Malerba
    How to convert from React-Redux classes to React Hooks, the easy way (medium.freecodecamp.org)
    May 15, 2019
    With the recent release of create-react-app v3 and React hooks, I decided to write a tutorial on how to refactor a class component to a functional hooks component.
    • Mohammad Iqbal
    WebSockets tutorial: How to go real-time with Node and React (blog.logrocket.com)
    May 15, 2019
    I’m going to spin off a Node.js server and connect it to a client built with React.js.
    • Avanthika Meenakshi
      Data Visualization in React Application (codeburst.io)
      May 13, 2019
      As I am a huge fan of both React and data visualization, I’ve decided to share with you my experience of adding a custom dashboard to the React app.
      • Veronika Rovnik
      How to setup continuous integration (CI) with React, CircleCI, and GitHub (medium.freecodecamp.org)
      May 13, 2019
      To ensure the highest grade of quality code, we need to run multiple checks on each commit/pull request. Running code checks is especially useful when working in a team and making sure everyone follows the best and latest practices.
      • Indrek Lasn
        Next.js Authentication Tutorial (auth0.com)
        May 13, 2019
        Learn how to add authentication to your Next.js application with Passport.
        • Bruno Krebs
        React's useReducer vs Redux (robinwieruch.de)
        May 13, 2019
        Now, many people keep wondering: Does useContext and useReducer replace Redux? As of the time of writing this article, React Hooks don’t replace Redux.
        How to get started with D3 and React (medium.freecodecamp.org)
        May 13, 2019
        Data Driven Documents (D3.js) is a JavaScript library used to create visualizations of data using HTML, CSS, and SVG. It does this by binding data to the DOM (Document Object Model) and its elements and allowing them to transform when the data changes.
        • Magda Stenius
        Build a React Timer Component Using Hooks (upmostly.com)
        May 12, 2019
        Build a React timer component using the useState and useEffect Hooks in minutes. A React timer component is a great way to learn React, so let’s begin!
        • James King
        Level Up useReducer with Immer (hswolff.com)
        May 10, 2019
        So, now that we all agree that useReducer is the best thing since the wheel, let's talk about how we can make it even better. I'm talking better than a wheel.
        • Harry Wolff
        Deploying a Client-Side Rendered create-react-app to Microsoft Azure (css-tricks.com)
        May 10, 2019
        Deploying a React app to Microsoft Azure is simple. Except that... it isn’t. The devil is in the details. If you're looking to deploy a create-react-app — or a similar style front-end JavaScript framework that requires pushState-based routing — to Microsoft Azure, I believe this article will serve you well.
        • Adebiyi Adedotun
        So You Want to Build a Serverless React App with Next.js and ZEIT Now (hackernoon.com)
        May 10, 2019
        In this article, we will discuss the pros and cons of serverless then we will quickly build a React app using Next.js and deploy it with ZEIT Now.
        • Adrian Carolli
        Re-invent all the wheels! (sid.studio)
        May 10, 2019
        My favorite way of wrapping my head around such questions is to try to implement the thing myself. So, I built a mostly-useless css-in-js library.
        Advanced Patterns in React (telerik.com)
        May 09, 2019
        Understand why patterns in React is such an important topic, and learn why they are used and what problems they came to solve.
        • Leonardo Maldonado
        Explore GraphQL with Apollo & React: Build a Superhero Database (sitepoint.com)
        May 08, 2019
        Curious about all the buzz surrounding GraphQL, but not quite sure why you should be excited? You’re in the right place! We’ll shed some light on what GraphQL is and give you an opportunity for some hands-on experience.
        • Joe Hewitson
        How to Craft Animations in React with React Simple Animate (alligator.io)
        May 08, 2019
        In this article, learn how to craft animations in React using a new library called React Simple Animate.
        • William Le
        Starting with React 16 and Three.js in 5 minutes (blog.bitsrc.io)
        May 08, 2019
        What if we want to touch the world of 3D and leverage the power of WebGL with Three.js?
        • Marina Vorontsova
          How to Scroll to Item in React? (robinwieruch.de)
          May 07, 2019
          A brief tutorial which shows you two use cases on how to scroll to an item within a list of items in a React List Component. We will use the native browser API to scroll to our React element with a button click. It’s up to you how to trigger the event in the end.
          Persisting your React state in 9 lines (dev.to)
          May 07, 2019
          This article will take you through the process of creating a reusable custom hook that persists our state to local storage.
          • Kristofer Selbekk
          How to optimize your context value (kentcdodds.com)
          May 06, 2019
          Why and how you can optimize your context provider's value to avoid performance issues.
          Build a React Application using RxJS (auth0.com)
          May 06, 2019
          Build an authenticated React application using RxJS and the CSS framework, Tailwind.
          • Sarah Jorgenson
          Always useMemo your context value (kentcdodds.com)
          May 06, 2019
          Why and how you should always use React's useMemo hook for your context provider value prop.
          Performance Profiling Your React App (telerik.com)
          May 06, 2019
          In this article, we'll learn how to profile the performance of React apps using React Profiler, and leverage it to discover performance issues.
          Documenting React Components With Storybook (dev.to)
          May 06, 2019
          Storybook markets itself as a playground for UI components and its main focus is on “writing stories.”
          • Emma Wedekind
          Getting started with Create React App (blog.logrocket.com)
          May 06, 2019
          Create React App is a popular toolchain for building simple apps. The goal of this post is to explain the components of Create React App at a deeper level to give you much better control and confidence over the development environment.
          • Karthik Kalyanaraman
          setInterval in React Components Using Hooks (upmostly.com)
          May 05, 2019
          Using setInterval inside React components allows us to execute a function or some code at specific intervals. Let’s explore how to use setInterval in React.
          • James King
          setTimeout in React Components Using Hooks (upmostly.com)
          May 04, 2019
          Use setTimeout in your React components to execute a function or block of code after a period of time. Let’s explore how to use setTimeout in React.
          • James King
          Why I Love useReducer (hswolff.com)
          May 03, 2019
          I didn't realize until recently how much I loved the React Hook useReducer. It's one of those advanced hooks, and while I read the documentation about it and already have a good amount of experience with Redux, it took a little while for me to fully understand just how powerful useReducer can make your components.
          • Harry Wolff
          How to set up Twitter OAuth using Passport.js and ReactJS (medium.freecodecamp.org)
          May 03, 2019
          This is a simple authentication tutorial for building a Twitter Authentication web application using Passport API. It’s a side project that I worked on for education purposes.
          • Leanne Zhang
          How to build a state-based router using React and MobX State Tree (medium.freecodecamp.org)
          May 03, 2019
          I wrote a library that makes it easy to configure state-based routing in MobX State Tree powered React apps, and I want to share it with you. To do this I will demonstrate how to build a very simple Todo app.
          • Miles Till
          What’s new in Create React App 3 (blog.logrocket.com)
          May 03, 2019
          Released at the end of April 2019, Create React App (CRA) 3 adds linting rules to hooks and TypeScript projects, along with other improvements and version upgrades to ease the development of React apps.
          • Esteban Herrera
          5 things you didn’t know about React DevTools (blog.logrocket.com)
          May 02, 2019
          The React DevTools is under active development, and new features are added all of the time. This article will show you five of those features that you might not have tried out yet, or that you simply didn’t know existed!
          • Kristofer Selbekk
          Discovering React Hooks with KendoReact (telerik.com)
          May 01, 2019
          React Hooks have been available for use since the React 16.8 release. We'll learn how we can start applying these Hooks by using our KendoReact components.
          • Eric Bishard
          React Navigation vs. React Native Navigation: Which is right for you? (blog.logrocket.com)
          May 01, 2019
          When it comes to mobile app development using React Native, one of the most important steps is selecting the perfect navigation library for your project.
          • Zain Sajjad
          Using React Hooks in Ionic React (blog.ionicframework.com)
          Apr 30, 2019
          We were excited to see how hooks can make common app building tasks and accessing native APIs really easy and clean, and wanted to walk through the new Hooks APIs in the context of an Ionic React app.
          • Max Lynch
          React: JSX & Rendering (itnext.io)
          Apr 30, 2019
          In this article, we’re going to take a look at what JSX is & why we should use it in our React applications. We’ll also take a look at what elements are, and how we can render them to the DOM.
          • Timothy Robards
          How to use React Context effectively (kentcdodds.com)
          Apr 29, 2019
          How to create and expose React Context providers and consumers.
          create-react-app v3, What's new? (scotch.io)
          Apr 29, 2019
          The React team recently unveiled version 3 of create-react-app and it brings some exciting new features incrementing on what was added on the previous releases.
          • Austin Roy