Latest Articles & Tutorials

Challenges and opportunities of Building React and React Native Apps – Discussion with Wix.com (callstack.com)
Jun 24, 2020
Last Thursday, together with Mike Chudziak, we joined Wix.com to chat about various challenges and opportunities when it comes to building React and React Native applications in today’s world.
  • Mike Grabowski
  • Mike Chudziak
  • Wix
Composing Documents with MDX: Markdown for the Component Era (blog.bitsrc.io)
Jun 24, 2020
Build React UI components and MDX content components to compose and style a markdown document. Then, publish all components with Bit.
  • Eden Ella
A Practical Guide To Testing React Applications With Jest (smashingmagazine.com)
Jun 24, 2020
Building a well-functioning application requires good testing; otherwise, knowing whether your application works as expected would be a matter of guesswork and luck. Jest is one of the best tools available for testing React applications.
  • Adeneye David Abiodun
Create an Animated Product Review Display with React Native (codedaily.io)
Jun 24, 2020
Building reviews into an application is a common necessity for any developer. This is a design that can be added to both web and or native.
  • Jason Brown
JavaScript concepts to master before learning React (blog.logrocket.com)
Jun 23, 2020
The goal of this article is to help aspiring React developers get started by highlighting the JavaScript they ought to master before really diving into React.
  • Sebastian Weber
What’s New in Next JS 9.4 (telerik.com)
Jun 23, 2020
Let's explore the new features that shipped with Next.js 9.4, including fast refresh, integrated web vitals reporting, new environment variables support and more.
  • Nwose Lotanna Victor
Customize Create React App without Ejecting (codedaily.io)
Jun 23, 2020
Create React app has become the defacto standard for building React applications. With a standard comes inflexibility. The ecosystem of the JavaScript world has expanded greatly and sometimes you want to build upon the standard.s
  • Jason Brown
How to Create a Custom useCopyToClipboard React Hook (reedbarger.com)
Jun 23, 2020
On my website, reedbarger.com, I allow users to copy code from my articles with the help of a package called react-copy-to-clipboard.
  • Reed Barger
An Introduction To SWR: React Hooks For Remote Data Fetching (smashingmagazine.com)
Jun 22, 2020
In this article, we’ll be looking at a new way of retrieving data in React Apps named SWR. This is a set of hooks for remote data fetching that makes things easier, such as caching, pagination, and so on.
  • Ibrahima Ndaw
How to use the FlatList component in React (blog.logrocket.com)
Jun 22, 2020
The FlatList Component is among the simplest and most-used React Native components. If you are just starting out with React Native, you must get a gist of the FlatList Component and understand its purpose.
  • Gaurav Singhal
Sharing React Components between a Web App and an Electron Desktop App (blog.bitsrc.io)
Jun 22, 2020
How to publish components from a React web app and reuse them in a React-Electron desktop app.
  • Nathan Sebhastian
Exploring React Renders: Different Ways a Component Gets Re-Rendered (blog.bitsrc.io)
Jun 22, 2020
In this blog post, we would be looking at different scenarios/cases on how React components render and re-renders. This is not to be an introductory post so, some prior knowledge of React would be a prerequisite.
  • Jasbindar Singh
Simple state management with Facebook’s new Recoil library (blog.logrocket.com)
Jun 22, 2020
Recoil seems to be the new kid on the state management block — a block that’s considered overcrowded by many. Redux, MobX, Context… the list goes on and on.
  • Ohans Emmanuel
A guide to Gatsby recipes (blog.logrocket.com)
Jun 22, 2020
In this article, we will be looking at an automated version of Gatsby recipes, a tool used to automate site-building tasks into a single command.
  • Obinna Ekwuno
Blogged Answers: React Components, Reusability, and Abstraction (blog.isquaredsoftware.com)
Jun 21, 2020
Thoughts on the tradeoffs of trying to write "reusable components".
  • Mark Erikson
Event-driven state management in React using Storeon (blog.logrocket.com)
Jun 18, 2020
Storeon is a tiny, event-driven React state management library built on the Context API, but with principles similar to Redux — and the same great DevTools.
  • Abdulazeez Abdulazeez Adeshina
Let’s Build a Financial Dashboard with React (telerik.com)
Jun 17, 2020
In this tutorial we'll build a sample financial dashboard from scratch, and learn a bit about CSS grid, KendoReact, and theming in the process.
  • TJ VanToll
Authenticating React applications with Magic Links (blog.logrocket.com)
Jun 17, 2020
There is no one-size-fits-all when it comes to securing your apps. Magic is a viable alternative to the authentication strategies you might be used to.
  • Samaila Bala
Everything You Need to Know About FLIP Animations in React (css-tricks.com)
Jun 16, 2020
Let’s take a look at the intersection of using the WAAPI, FLIP, and integrating all that into React. But we’ll start without React first, then get to that.
  • Kirill Vasiltsov
Why Frontend Developers Choose Gatsby Over Traditional CMS (blog.bitsrc.io)
Jun 16, 2020
Today, having a modern and attractive website is at the forefront of any business. Most of these websites are rich with content and provoking user interactions. You will find more unique designs, timely updated never than before.
  • Ashan Fernando
Migrating from Gatsby to Next.js (blog.logrocket.com)
Jun 16, 2020
Like a lot of developers, I like to use my blog as a personal playground to try out the latest technologies. My blog was written in Gatsby, but recently I migrated it to Next.js. In this post, I’m going to talk about my experience, what went well, and what didn’t.
  • Matija Marohnić
A deep dive into React Context API (blog.logrocket.com)
Jun 16, 2020
This post gives you a thorough overview of what the React Context API is and what it isn't, and explains where you should probably use Redux instead.
  • Adebiyi Adedotun
React Hook Form VS Formik (blog.bitsrc.io)
Jun 15, 2020
A comprehensive comparison of the two libraries, with examples.
  • Nathan Sebhastian
How to Create PDF Reports in React (freecodecamp.org)
Jun 15, 2020
In this article, we'll be building a button that generates a PDF document (like you see above) based on data from an API call.
  • Adebola Adeniran
    How to Persist a Logged-in User in React (freecodecamp.org)
    Jun 15, 2020
    If you run a quick Google search for persisting a logged-in user in React (or keeping a user logged in in React), you don't get a lot of straightforward results. There aren't really any easy to follow examples on how to achieve this. So I decided I had to write that simple guide.
    • Adebola Adeniran
    Building A Facial Recognition Web Application With React (smashingmagazine.com)
    Jun 11, 2020
    In this article, Adeneye David Abiodun explains how to build a facial recognition web app with React by using the Face Recognition API, as well as the Face Detection model and Predict API. The app built in this article is similar to the face detection box on a pop-up camera in a mobile phone — it’s able to detect a human face in any image fetched from the Internet.
    • Adeneye David Abiodun
      Another React animation library? Here’s why you should use Framer Motion (blog.logrocket.com)
      Jun 11, 2020
      If you’re like me, your first thought when you read this headline might be, “Why do we need yet another animation library for React? This is getting tiring!”
      • Glyn Lewington
      Building a Universal Higher-Order Component Page Loader for your React App (blog.bitsrc.io)
      Jun 10, 2020
      Loading screens are needed everywhere — don’t reinvent the wheel every time.
      • Paige Niedringhaus
      Understanding React Native linear gradient (blog.logrocket.com)
      Jun 10, 2020
      Gradients come in handy when trying to create multi-color backgrounds or custom buttons. We'll look at how to add linear gradients to our React Native apps.
      • Kitavi Joseph
      What is Storybook and How Can I Use It to Create a Component Library in React? (freecodecamp.org)
      Jun 09, 2020
      Frameworks like React, Vue, and Angular all help developers create modular systems using components, but that doesn't usually include a good way to see them all from a higher point of view. How can we use Storybook to build libraries and design systems that self-document as we build them?
      • Colby Fayock
      How to use React memo (robinwieruch.de)
      Jun 09, 2020
      React's memo API can be used to optimize the rendering behavior of your React function components. We will got through an example component to illustrate the problem first, and then solve it with React's memo API.
      A practical guide to integrating Google Maps in React (blog.logrocket.com)
      Jun 09, 2020
      Google Maps is flexible and powerful enough to handle a wide variety of use cases, and it can provide real value to users of your React app.
      • Ovie Okeh
        How to Enable Offline Mode for Your Gatsby Site (freecodecamp.org)
        Jun 09, 2020
        One of the reasons we create JAMstack sites is because of their great performance. Serving static files is easy and quick. But what if we upgrade the visitor's experience and make the site available offline?
        • Ondrej Polesny
        Higher-Order Components In React (smashingmagazine.com)
        Jun 08, 2020
        In this tutorial, we are going to learn about higher-order components, the syntax of higher-order components, as well as use cases for them. In the process, we will build a higher-order component from an existing React component.
        • Shedrack Akintayo
        How to Publish React Components (blog.bitsrc.io)
        Jun 08, 2020
        How to quickly publish React components from any repository.
        • Eden Ella
        Stop mocking fetch (kentcdodds.com)
        Jun 08, 2020
        Why you shouldn't mock fetch or your API Client in your tests and what to do instead.
        Learn React Hooks by Building a Paint App (freecodecamp.org)
        Jun 05, 2020
        According to people in the know, React Hooks are hot, hot, hot. In this article, we follow Christian Jensen's 14-part tutorial to find out about the basics of this new feature of React.
        • Per Harald Borgen
        Improving SEO with React Helmet (blog.bitsrc.io)
        Jun 04, 2020
        React Helmet is a tremendously popular library that helps us improve our SEO by “tailoring” our pages’ metadata to each page content, in a dynamic and efficient way.
        • John Au-Yeung
          How to Publish React Native Components for Reuse (blog.bitsrc.io)
          Jun 04, 2020
          Publishing and reusing React Native components across applications with Bit.
          • Josh Kuttler
          How GraphQL boosts performance in Gatsby (blog.logrocket.com)
          Jun 04, 2020
          We'll take a look at how Gatsby, which is a PWA generator, uses GraphQL to pull in data at build time and also its implications on performance.
          • Obinna Ekwuno
          Create a drag-and-drop component with react-dropzone (blog.logrocket.com)
          Jun 04, 2020
          In this tutorial, I’ll demonstrate how to create a component for dragging and dropping images to upload. The component will include a regular image click and select functionality.
          • Uzochukwu Eddie Odozi
          Jumping Into Webmentions With NextJS (or Not) (css-tricks.com)
          Jun 03, 2020
          Webmention is a W3C recommendation last published on January 12, 2017. And what exactly is a Webmention? It’s described as… a simple way to notify any URL.
          • Atila Fassina
          Consuming REST APIs In React With Fetch And Axios (smashingmagazine.com)
          Jun 03, 2020
          If you’re a React developer who’d like to learn how you can start consuming APIs in your React applications, then this article is for you. Shedrack Akintayo explains what a REST API is and how to build a simple application that consumes a REST API by using both Fetch API and Axios.
          • Shedrack Akintayo
          The post-Hooks guide to React call order (blog.logrocket.com)
          Jun 03, 2020
          The goal of this article — in addition to stressing that writing Hooks requires a different mindset than writing class components — is to give you a better overview of how, exactly, the whole React component lifecycle works. That is to say, in what order the code is being executed in your app.
          • Rafael Quintanilha
          How to implement scroll with React-gridlist (blog.logrocket.com)
          Jun 03, 2020
          Getting scroll to work perfectly requires a lot of trial and error. React-gridlist provides a painless and fast way to implement scroll in your application.
          • Jeremy Kithome
          Building OTP Authentication with ReactJS and AWS Amplify (blog.bitsrc.io)
          Jun 02, 2020
          In this project, let’s explore AWS and implement the OTP authentication with ReactJS and AWS Amplify.
          • Bryan Chua
          How to Build a Markdown Previewer with React.js (freecodecamp.org)
          Jun 02, 2020
          This will be a simple react app which will contain a textarea for Markdown input and a preview tab where the converted text will appear.
          • Ashutosh Kumar Singh
            Multiple entry points in Create React App without ejecting (blog.logrocket.com)
            Jun 02, 2020
            You can create multiple entry points in Create React App without ejecting by using an environment variable to conditionally import container files.
            • Andrew James
            How to use React Testing Library Tutorial (robinwieruch.de)
            Jun 01, 2020
            In this React Testing Library tutorial, we will go through all the steps necessary to unit test and integration test your React components with confidence.
            React Error Handling And Reporting With Error Boundary And Sentry (smashingmagazine.com)
            Jun 01, 2020
            In this article, we’ll explore the concept of error boundaries in a React application. We’ll work through an example app to see how we can use error boundaries to deliver a better app experience. Finally, we’ll integrate Sentry into our error boundary for realtime error reporting.
            • Chidi Orji