Latest Articles & Tutorials

With the release of Create React App 3, we now have the ability to use absolute import paths, without ejecting.

Slides from the React Zurich Meetup.

We are bringing together the best of React Router and Reach Router into a new, hook-based API.

This tutorial demonstrates how to Dockerize a React app using the Create React App generator.

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.

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.

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.

Ever wondered how validation libraries work? This article will tell you how to build your very own validation library for React step by step.

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.

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.

Styled Components are a way of styling your React components using CSS and the advantages offered by ES6.

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.

A guide to local and global state management via useState.

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.

I’m going to spin off a Node.js server and connect it to a client built with React.js.

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.

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.

Learn how to add authentication to your Next.js application with Passport.

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.

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.

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!

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.

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.

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.

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.

Understand why patterns in React is such an important topic, and learn why they are used and what problems they came to solve.

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.

In this article, learn how to craft animations in React using a new library called React Simple Animate.

What if we want to touch the world of 3D and leverage the power of WebGL with Three.js?

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.

This article will take you through the process of creating a reusable custom hook that persists our state to local storage.

Why and how you can optimize your context provider's value to avoid performance issues.

Build an authenticated React application using RxJS and the CSS framework, Tailwind.

Why and how you should always use React's useMemo hook for your context provider value prop.

In this article, we'll learn how to profile the performance of React apps using React Profiler, and leverage it to discover performance issues.

Storybook markets itself as a playground for UI components and its main focus is on “writing stories.”

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.

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.

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.

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.

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.

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.

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.

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!

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.

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.

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.

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.

How to create and expose React Context providers and consumers.

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.