Here is a simple, practical example of what the React concept of “lifting state up” is and how it can help you in building your applications.

Lifting state up is a common pattern that is essential for React developers to know, because it helps us avoid more complex (and often unnecessary) patterns for managing our state.

How does it do that? Let’s see how through a simple example.

Want to build amazing React apps using best practices from front to back? Check out the React Bootcamp.

Breaking down our Todo App

Let’s start with a basic todo application, which consists of three components:


Let’s go through the five best ways that you can fetch data with React from a GraphQL API.

While there are a couple of popular libraries which are made to interact with GraphQL APIs from a React application, there are many different ways to fetch data with GraphQL.

I’ve included code samples that show you how to fetch or “query” data in the shortest code possible and how to get up and running with each of these different methods of connecting React with GraphQL.

Want to build amazing apps with React and GraphQL from front to back? …


In this article, I’m going to show you how to very quickly deploy any React application with the help of Cloudflare pages.

You’ll see how to not only build and deploy your app within minutes using just a few tools, but also how to auto-deploy any future changes you make through your Github account.

Want to make your own amazing, full-stack React apps from start to deploy? Check out the React Bootcamp.

Getting Started

To get started, you’ll need the following tools:

  1. The package manager npm and version control software Git
  2. Your own (free) GitHub account and Cloudflare account

Create our React Project

To deploy a…


If you’re building React applications for the web, you’re going to need to use a dedicated router to display pages and navigate your user around them.

That’s why today we’re going to go over the most popular and most powerful router for React applications — React Router.

We’re going to go over 11 of the essential features you need to know if you’re using React Router in your projects today, specifically for the web using the package .

Want Your Own Copy?‬ 📄

Click here to download the cheatsheet in PDF format (it takes 5 seconds).

It includes all of the essential information here as…


One of the most important concepts for every React developer is state — what it is, how to properly use it, and to avoid common pitfalls as your build your applications.

Let’s cover five of the most essential parts of state that you need to know, each of which build upon each other to aid your overall understanding of a somewhat complex topic.

To make these abstract concepts as clear as possible, I’ve included many practical examples that you can run in Code Sandbox or any React project you have set up.

Want to become a professional React developer in…


HTML is the language of the web, but creating entire websites with HTML alone can be repetitive and hard to manage.

In this lesson, we’re going to see how to use the JavaScript library React as a way to add convenient and reusability to our websites.

React is a powerful tool for any developer who knows HTML and wants to build more organized and dynamic websites, faster.

Let’s get started!

Want the complete guide to become a professional React developer from start to finish? Check out The React Bootcamp.

Why should I use React instead of HTML?

React arrived in 2013 as a better way to build web…


There are many essential concepts and lessons that React developers need to know that simply aren’t covered in most tutorials.

I have handpicked the topics I believe are some of the most important for you to know, but few articles have dedicated the time to cover in detail.

Let’s take a look at five key React lessons worth knowing which you might not find elsewhere.

Want to learn all the skills you need to become a highly-paid React developer? Check out the React Bootcamp.

1. How React state is actually updated

As a React developer, you know that state can be created and updated with the


Developers have spent a great deal of time what React is, but have left out why this topic matters so greatly for anyone who builds React applications.

The answer to this question is essential for any React developer, regardless of their skill level, because it indicates what they must know and how they must work in developing any React application.

Whether you are a new or an advanced React developer already, I hope this thoughtful analysis will improve your own development process as you build your next React project.

Looking for the complete guide to become an in-demand React developer…


How do you make your React applications responsive for any sized device? Let’s see how to do so by making our own custom React hook.

At the top of my React site is a Header component. As I decrease the size of the page, I want to show less links:


Welcome to a tutorial made to help you become effective with React as quickly as possible as you build a complete application along the way.

As compared to many tutorials you might have gone through before, this one is meant to be thoroughly practical from start to finish.

You will learn how to create an entire React application all within around 100 lines of code, which makes use of many of the core concepts of React: hooks, state management, forms, JSX elements, components, props, styling, and conditionals.

And best of all, you will learn all of these concepts while coding…

Reed Barger

React developer who loves to build apps. Showing you how at reedbarger.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store