Latest Articles & Tutorials

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.

Build React UI components and MDX content components to compose and style a markdown document. Then, publish all components with Bit.

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.

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.

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.

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.

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

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.

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.

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.

How to publish components from a React web app and reuse them in a React-Electron desktop app.

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.

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.

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.

Thoughts on the tradeoffs of trying to write "reusable components".

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.

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.

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.

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.

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.

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.

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.

A comprehensive comparison of the two libraries, with examples.

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.

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.

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.

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!”

Loading screens are needed everywhere — don’t reinvent the wheel every time.

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.

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?

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.

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.

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?

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.

How to quickly publish React components from any repository.

Why you shouldn't mock fetch or your API Client in your tests and what to do instead.

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.

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.

Publishing and reusing React Native components across applications with Bit.

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.

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.

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.

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.

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.

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.

In this project, let’s explore AWS and implement the OTP authentication with ReactJS and AWS Amplify.

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.

You can create multiple entry points in Create React App without ejecting by using an environment variable to conditionally import container files.

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.

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.