Latest Articles & Tutorials

Find out what the useMemo React hook is useful for, and how to work with it!

Find out what the useEffect React hook is useful for, and how to work with it!

In this article, we are concerned with the build process, which is powered by GraphQL. This is the part where your data is managed.

Find out what the useCallback React hook is useful for, and how to work with it!

How to serve a React and a server-side backend app from the same origin, without having to use CORS on the server and worrying about ports.

Progressive Web Apps (PWAs) allow developers to deliver an app-like experience to the user. Paired with the top-notch performance of Gatsby.js, and you get a blazing fast website.

Animations delight users. And you’d think, by the sheer volume of articles, that React Hooks delight developers. But for me, fatigue was starting to creep into my opinions on Hooks.

What are event handlers, and why are they important? Event handlers make a website’s user experience a two-way street. You’re not just presented with nicely styled content… you can actually click, type, scroll it!

Frontend designers create the HTML, CSS, and presentational JavaScript code that powers web products’ user interfaces. I see frontend design as helpful mortar that bridges the gap between design and development.

In this article, we are going to make use of react-map-gl to build two map components, one that displays your current location and another that allows you to search for locations across the globe.

Guillermo Rauch tweeted this a while back. Let's take a dive into what it means.

Find out what the useState React hook is useful for, and how to work with it!

Learn how to use Next.js to create server-side rendered React applications.

Recently I’ve been working with with Michał Osadnik on a new version of the stack navigator, which lives under the react-navigation-stack repo as a standalone package.

This article assumes a working knowledge of Redux, React, React-Redux, TypeScript, and uses a little bit of Lodash for convenience.

Thankfully, adding a sitemap to a Gatsby.js project is incredibly simple! Let’s go over how in the post below.

We’re going to see how hooks make our development process easier and faster by building a chat application.

In this article, you’ll learn how to use React Visibility Sensor to detect when your React components have entered the viewport.

Let's explore how to create a modal, and how we can go about turning into a route while not un-rendering the current route.

What happens when you mix a bit of Tequila with Expo and Next.js? You obtain a nice Margarita, a subtle cocktail of cross-platform goodness!

At Chain React 2019, we announced the Hermes JavaScript engine. We have open-sourced the Hermes engine, as well as integration with Hermes for React Native. We are excited to work with the open source community and have developers start using Hermes today.

In this article, you’ll learn about React Image, a library focused on providing progressive enhancements for loading images in React.

When I first started learning to test my apps back in the day, I would get very frustrated with the different types, styles and technologies used for testing, along with the disbanded array of blog posts, tutorials and articles. I found this to be true as well for React testing.

When creating a new Gatsby.js project, there are several available options for styling. styled-components is one of the most popular CSS-in-JSS solutions, and for good reason. It’s powerful, easy to learn, and it works flawlessly with Gatsby. Let’s explore how to add it into your project!

Some observations on the tradeoffs involved in using React hooks.

For react router 4 and above.

Learn how to export data from your React app to excel using XLSX and FileSaver.

In this article, you will learn how to generate dynamic PDFs using HTML code as a template. For this particular example, we are going to create a simple receipt that will have dynamic data coming from React’s state object.

We’ll walkthrough how to build excellent, React-based search experiences using Elastic’s open source Search UI library. It’ll take about 30 minutes and afterwards you’ll be ready to bring search to any application.

Modals are one of the most vital component of UI elements on the web. they provides a solid foundation for creating dialogs, popover etc. In this article we will see how to build our own modal component in react.

You can work with React for years and actually have no opinion on some of the less practical questions and it’s fine. However, if you have an interview, then it’s quite important to have an opinion.

Next.js 9 has been released yesterday with some amazing new features. In this post we'll create a simple RSS feed reader to explore how to use the new file system based dynamic routing and API routes.

Not long ago, most people argued against a framework like React, Angular or Vue for your personal website. Since then, tools on top of these frameworks – like Gatsby.js for React.js – emerged to make static website development effortless. So if there is no actual demand, why does a static website generator like Gatsby.js do so well?

What's the difference between props and state in React?

After 70 canary releases we are pleased to introduce Next.js 9.

Today's post lays out my current thinking and approach to structuring React applications: the folder structure I use, my naming conventions, where I write tests, and so on.

In this article I’m going to share with you on how I created my own form validation using React hooks.

We are going to explore other possibilities and look at how we can improve the routing experience in React apps using hooks.

After months of hard work from hundreds of contributors, the React Native Core team is proud to announce the release of version 0.60. This release handles significant migrations for both Android and iOS platforms, and many issues are resolved too. This blog post covers the highlights of the release.

Just over six months into a job doing React development, I’ve been trying to figure out why it has taken me so long to feel comfortable with it. (Comfortable feels a bit too ambitious of a word. Maybe competent? Unexceptional? Whichever.)

Here’s part 2 of Kiran B’s challenge from last week - animating our drilldown piechart.

Learn how to use useCallback and useMemo to optimize performance.

Understanding what are types, type annotations, why use them and how to use them can help you catch errors during development while also enhancing code quality and readability.

It turns out that useState is as powerful as useReducder in terms of expressiveness. This is because useState allows functional updates. Even with deep updates, you can pass down custom callbacks.

This article will walk you through how to do that through basic authentication for an Express server. Although the client side will be a React app, you can virtually apply it to any other client-side applications.

One key factor for positive user experience is speed i.e how much time a user has to wait to first see contents from your website or application.

In this article we’ll create a React usePosition() hook to fetch and follow browser’s location. Under the hood we’ll use getCurrentPosition and watchPosition functions that are provided by global object navigator.geolocation.

This is a beginner tutorial in understanding React Hooks and the Context API.

Building forms with React involves setting up state as the container for user data and props as the means to control how state is updated using user input.

A few days ago Kiran B sent me a challenge via Twitter DM: How can I make a drilldown piechart?