For example, to add features like authentication or styling, you'll need to find a good third-party library to handle it.

In this comprehensive guide, I'm going to show you all of the libraries that I would recommend you use in 2024 to build fast, reliable React apps with ease.

Table of Contents

• React Framework
• Package Manager
• CSS & UI Libraries
• State Management
• Data Fetching
• Routing
• Authentication
• Database & ORM
• Dates & Times
• Forms
• Drag & Drop
• Mobile Apps
• Deployment
• TypeScript
• Become a Pro React Developer

🛠️ React Framework

First of all, how do we even create our React app in 2024?

If you want a client-rendered React project, your best choice is Vite, which has displaced the deprecated Create React App tool.

If you're interested in building a server-rendered or full-stack React project, Next.js is the most complete and popular full-stack React framework.

Next.js version 13 introduced the app router, which gave us features like server components and server actions. These allow us to fetch data and render our React components on the server.

If some of Next.js's features are too complex or you don't understand how to use them, a great full-stack alternative for making dynamic and static sites is Remix.

If you're making an application that you want to load quickly and largely serve static content, another great pick is Astro. Astro allows you to use React alongside other frameworks like Vue and Svelte (meaning it is “framework agnostic”) and is designed to ship the smallest amount of JavaScript necessary to the client, which results in very fast load times.

📦 Package Manager

To install all of these libraries listed in this guide, you're going to need something called a package manager.

If you have Node.js installed, which is necessary to run a React project locally on your computer, you can simply use NPM, which is still a great choice in 2024. There are other alternatives to NPM, including Yarn and PNPM.

The newest alternative, which is quickly becoming very popular in the JavaScript world, is Bun. Bun is both a JavaScript runtime like Node as well as a package manager and is marketed as a faster alternative to Node and NPM.

🎨 CSS & UI Libraries

Now that you've got your project set up and your libraries installed, how are you going to style your React projects?

All of the frameworks I've mentioned above include basic CSS support. It's perfectly fine in 2024 if you want to stick to just styling your React projects with plain CSS.

You can use CSS style sheets or CSS modules, but perhaps the most popular choice at the moment in terms of pure styling is to use Tailwind CSS. Tailwind CSS does come with a few setup steps, but it allows you to chain pre-made classes together to quickly add styles directly within your component files.

ShadCN is a very popular UI library for 2024 that combines Tailwind CSS with a component library called Radix UI. Component libraries like Radix allow you to easily add components without coding them yourself.

ShadCN has become popular due to the greater control it provides over how your components look with the help of Tailwind CSS.

There are a bunch of other very popular functional component libraries as well. Material UI still remains popular, as well as others like Mantine and Chakra UI. Which one you pick really depends on how you want your final app to look. I'd recommend trying out a bunch of these UI libraries and see which one you like best.

💽 State Management

React has built-in tools such as useState and useReducer to manage your app state in basic applications. If you're using Next.js, state management has been moved to the URL when working with server components. Despite these options, you may need a way to manage state in a more precise way.

You might have lots of pieces of state and want greater control over how state updates render your components. If so, you can reach for a dedicated state management library.

Libraries such as Zustand, Recoil, and Jotai, which are all very similar, allow you to manage state simply by declaring properties and methods on an object. This ultimately is the simplest way to handle state management across your app's components.

If I had to pick one state management library for all of my React projects in 2024, I would choose Zustand. It takes almost no time to learn how to use it. It also doesn't require you to add a provider component to your application, which makes it very convenient to use in any component you like.

🐕 Data Fetching

State management and data fetching often go hand in hand. If you're building a client-rendered React app, you're likely going to need a data fetching library.

The best way to fetch data from a server in a React app in 2024 remains React Query or Tanstack Query as it's now called. TanStack Query gives you fine-grained control over not only fetching data, when to fetch and refetch it, caching, all through convenient custom hooks, as well as very easily change or mutate data.

Another solid alternative is SWR, which also offers a custom hook to handle queries and mutations, but it's far simpler in terms of what it offers. You can't go wrong with picking either one and fetching data and performing your HTTP requests with the fetch API.

Here's an article that walks you through some of the most popular methods of data fetching in React (including Tanstack Query and SWR).

🧭 Routing

If you're using a framework like Next.js, Remix, or Astro, your routing is already taken care of. All of them come with built-in ways to create routes or pages in your project.

With a client-rendered React app such as one made with Vite or Create React App, you're going to need to pick a routing library. React Router still remains the most popular choice. It takes care of every routing need you might have. It’s also very advanced due to its data loading features with the loader prop. The loader prop allows you to fetch data for a given route without using an external library like React Query.

An up-and-coming library that appears to have equally good features is Tanstack Router. The Tanstack Router was made to be fully type-safe and offer great defaults for data fetching just like React Router version 6 provides.

While Tanstack Router is a bit newer, you really can't go wrong with either choice, and it's a perfect pairing if you're already using Tanstack Query or SWR in your applications.

🔒 Authentication

While authentication is something that's handled by the server side of our projects, it's worth knowing what libraries integrate best with React projects, both on the client and the server.

In 2024, Supabase has emerged as a very robust authentication solution and offers easy integration with React apps, both on the server, say, in a Next.js project, and on the client. In past years, Firebase was chosen for similar reasons, but it's harder to integrate on the server side of things.

If you're using Next.js, you have a ton of options available to you such as NextAuth, Clerk, and the newcomer Lucia. It's unfortunate that there isn't currently a built-in auth library for Next.js, but perhaps in the future there'll be one.

In the meantime, I'll personally be using Supabase and would highly recommend you check them out as well via their documentation.

🥞 Database & ORM

Much like authentication, your database is something that will and should speak largely to your server-side code.

Databases like Supabase and Firebase don't require that you have a server. You can get and change data directly in the client, and you can add security rules within your dashboard to make sure certain types of requests are allowed or not allowed according to users' authentication status and role.

Outside of these two options, if you're using a traditional server or a full-stack framework, there are countless options. In 2024, the general preference is clearly for SQL databases like MySQL or PostgreSQL over NoSQL databases like MongoDB or Firebase.

With your database, to talk to your database, you'll either use plain SQL or an ORM that allows you to use a custom query language. Popular options for ORMs include Prisma or Drizzle. Both of them allow you to generate type-safe code so that you know what data will be returned and both integrate very well with SQL or NoSQL databases of your choosing.

🕰️ Dates & Times

When you're working with JavaScript, it's always recommended to have a date library. JavaScript's date constructor is unpredictable and virtually impossible to work reliably with things like time zones.

There are a bunch of options, but I tend to gravitate to date-fns or day.js. Both are very small but extensive libraries that allow you to manipulate JavaScript dates either in the browser or on the back end. You can't go wrong with either one.

📋 Forms

You may not need a form library in most cases if you're just building an app with a simple sign-up form, using the required prop on your inputs is usually all you need.

If you're building something more complex and have a lot of forms, React Hook Form is a fully featured form library that allows you to validate form input and display errors with very minimal code.

Other form libraries, such as Formik and React Final Form, will give you the same functionality, but React Hook Form is a bit better because it has a more modern API based on hooks and usually requires less code.

☔️ Drag & Drop

When it comes to adding drag and drop to your application, you almost certainly need a third-party library. The most popular choice in the past has been React Beautiful DnD. As of 2024, it is no longer receiving regular updates.

Going forward, a solid replacement for drag and drop is to use DnD Kit. It's lightweight, very flexible, and the documentation includes a bunch of super helpful examples covering every use case you might have when implementing drag and drop.

📱 Mobile Apps

If you want to build a mobile app, the library to do so for React developers has always been React Native. There are some exciting libraries pushing the boundaries of React Native to extend to the web.

Expo is a tool similar to Vite, but for making mobile React apps. It has great features like fast refresh, and with Expo Go, you can easily run your project on your own device as you develop it. Expo is making it easier to take your mobile code base and also deploy it to the web.

This is the end goal of other projects such as Tamagui, which you should also check out if you want to make a real native app that runs on Android, iOS, and the web.

If you have a React app that you've already written to run in the browser, the fastest way to have it run as a native app and launch it on the Apple App Store or Google Play Store is to use Capacitor.js.

🚀 Deployment

There are more ways than ever to deploy your React app. Vercel is probably the easiest platform to deploy your React app with, whether it's client-rendered or server-rendered. They support just about every framework you can think of, including non-JavaScript languages. They have a generous hobby plan, and competitors in the same space include Netlify and Cloudflare Pages.

Cloudflare Pages might be a little bit trickier to set up, especially if you have a full-stack React project, but it is the most generous in terms of price out of all of these options. If you don't mind paying for a server, you can use something like Railway or Render, which is great to deploy to if you have a server that is separate from your React app.

✨ The #1 Library To Know

Finally, the number one essential library you should know if you're a React developer in 2024 is TypeScript. All of the frameworks I've mentioned include options to build a React app with TypeScript.

TypeScript is a tool that allows you to detect type errors in your JavaScript code to help you prevent runtime errors. You can build all of your React projects with just JavaScript, but at some point, you're going to either see the benefits of using TypeScript yourself or be looking at a codebase that has TypeScript in it.

I'd highly recommend you set aside some time to learn TypeScript. It's the most essential, the most in-demand tool to know as a React developer and can greatly improve your overall code quality.

🏆 Become a Professional React Developer

Looking for the ultimate resource to learn React from start to finish?

✨ Introducing: The React Bootcamp

The bootcamp features every resource to help you succeed with React:

• 🎬 200+ in-depth videos
• 🕹️ 100+ hands-on React challenges
• 🛠️ 5+ impressive portfolio projects
• 📄 10+ essential React cheatsheets
• 🥾 A complete Next.js bootcamp
• 🖼️ A complete series of animated videos

Click below to try the React Bootcamp for yourself.

Click to get started

In this full-stack React and Next.js project, you’ll learn how to build a stunning admin dashboard from front to back.

Our final admin dashboard will allow you to display and search through authenticated users within a users table and show important data using interactive bar and line charts.

The final version of our admin dashboard

In addition to learning about important Next.js concepts, you’ll become familiar with a bunch of powerful tools, including Prisma, PostgreSQL, Tremor, NextAuth and TailwindCSS.

Table of Contents

• Tools to Install
• Create Postgres Database
• Set Up Prisma Schema
• Use the Prisma Client
• Connect Prisma to NextAuth
• Build the App Navbar
• Display the Account Info
• Protect Routes
• Create the Analytics Page
• Build the Chart Component
• Create Users Table
• Search for Users
• Conclusion
• Become a Pro React Developer

📁 Download the Code

You can grab the starting and final code for the project we're going to build here.

🛠️ Tools to Install

To start building the admin dashboard, you'll need to have:

• Node.js installed on your computer.
• You should also have a code editor, such as Visual Studio Code.
• Finally, you’ll need to have a Github account.

Once you’ve grabbed the starting code and unzipped the start folder, drag it into Visual Studio Code, open up a terminal window and run the command:

npm install

This will install all of your app’s dependencies listed in the package.json file.

After doing that, you can start up your development server by running this command:

npm run dev

You can visit localhost:3000 in your browser to see your app up and running.

📀 How to Create a Postgres Database

The backend of your app will consist of a Postgres database. We'll use Prisma to interact with that database and the authentication service will be NextAuth.

To create a new Postgres database, visit railway.app/new. You can make a PostgreSQL database for free without creating an account.

Once our database is created, click on it, then go to the Variables tab and copy the DATABASE_URL value.

Variables page for Postgres Database on Railway

After that, go to the .env.example file in your project, rename it to .env, and add the database url to the DATABASE_URL environment variable.

✍️ How to Set Up Prisma Schema

Now that we have a fully functional database, you need to connect it with Prisma. Prisma is what we'll use to model all our data. You can see this in the schema.prisma file.

The schema.prisma file, takes care of connecting to the database, setting up a Prisma client, and modelling all your data.

In your terminal, run the command npx prisma db push. This will push your schema to your Railway Postgres database.

This command also generates your Prisma client, which lets you get and change data in your database using Prisma.

How to Use the Prisma Client

Within the lib folder, create a prisma.ts file. In this file, you'll pass the Prisma client to your entire app as a global variable.

// lib/prisma.ts
import { PrismaClient } from "@prisma/client";

declare global {
  var prisma: PrismaClient;
}

const client = globalThis.prisma || new PrismaClient();
if (process.env.NODE_ENV !== "production") globalThis.prisma = client;

export default client;

Now you can simply import client into any file that needs to use Prisma and get data from your database.

🪝How to Connect Prisma to NextAuth

The next step is connecting Prisma to NextAuth, which will be responsible for authenticating our users.

Within the root folder of your project, create a pages folder, which should contain an API folder, which should contain an auth folder. In the auth folder, place the file […nextauth].ts.

Your folder structure should look like this:

pages
 └ api
    └ auth
       └ [...nextauth].ts

This is where you’ll set up NextAuth, which has to be connected to Prisma using the Prisma adapter.

In this file, you can paste in the following code:

// pages/api/auth/[...nextauth].ts
import prisma from "@/lib/prisma";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import NextAuth, { AuthOptions } from "next-auth";
import GitHub from "next-auth/providers/github";

export const authOptions: AuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    GitHub({
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    }),
  ],
  debug: process.env.NODE_ENV === "development",
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    async signIn() {
      return true;
    },
    async redirect() {
      return "/";
    },
  },
};

export default NextAuth(authOptions);

To authenticate users with Github, you’ll use the Github provider, which requires a client ID and client secret.

To retrieve these, you’ll need to log into your Github account and use this link to create a new Github OAuth App.

Registering a Github OAuth App

Add a unique application name such as “Admin Dashboard”. The homepage URL will be http://localhost:3000, where your application runs in development. This will be your production URL if you choose to deploy this application.

The callback URL is included in the .env file. The catch-all route we set up allows this callback URL to be used.

Next, register the application to receive your client ID, which you'll set to the GITHUT_CLIENT_ID environment variable. Generate a new client secret, copy it, and include it under GITHUB_CLIENT_SECRET.

Finally, we need a secret. Go back to your .env file. I've included a command to generate a unique string:

openssl rand -hex 32

Run this command in your terminal, then paste the generated string for NEXT_AUTH_SECRET.

With all of the environment variables we have provided, Next Auth is set up successfully and can be used to authenticate users and protect routes throughout our application.

🧭 How to Build the App's Navbar

All of the components in our app are going to be placed in the “components” folder.

Let’s include a Navbar component across every page in the app. To do that, we can add it to the root layout component (layout.tsx in the app folder).

// app/layout.tsx
import Navbar from '@/components/Navbar';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { Suspense } from 'react';
import './globals.css';

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Admin Dashboard',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
         <Navbar />
        {children}
      </body>
    </html>
  )
}

Let’s create a sign in link in the Navbar component so users can authenticate themselves.

In Navbar, use a function from NextAuth to initiate the sign-in process. Find the "sign-in" text and implement functionality for both desktop and mobile views.

// components/Navbar.tsx

// ...
<Menu.Item>
  {({ active }) => (
    <button
      className={classNames(
        active ? "bg-gray-100" : "",
        "flex w-full px-4 py-2 text-sm text-gray-700"
      )}
      onClick={() => signIn("github")}
    >
      Sign in
    </button>
  )}
</Menu.Item>
// ...

To use this signIn function, add above the Navbar component:

import { signIn, signOut } from "next-auth/react";

Selecting sign-in should redirect to a GitHub hosted page for users to authenticate themselves. If users are authenticated properly, they’ll navigate back to the home page and will be logged in.

You can check and see if a new user is created after logging by running the command npx prisma studio. The Prisma Studio allows you to view and manage model data, including accounts, sessions, and users.

Prisma Studio

How to Display Account Info

The next step is displaying the GitHub account information, like the email and avatar image, in place of the dummy avatar. For this, we need a client component due to certain libraries, such as the headless UI components.

Create a new component in the components folder called Nav.tsx:

// components/Nav.tsx
import Navbar from "@/components/Navbar";
import { authOptions } from "@/pages/api/auth/[...nextauth]";
import { getServerSession } from "next-auth";

export default async function Nav() {
  const session = await getServerSession(authOptions);

  return <Navbar user={session?.user} />;
}

Here, we are getting the current session of the logged in user and passing it to the Navbar component on the user prop.

Within Navbar, we need to receive that prop and declare its type using the type Props.

// components/Navbar.tsx
import { Session } from "next-auth";

type Props = {
  user: Session["user"];
};

export default function Navbar({ user }: Props) {
// ...

Since Nav is now wrapping our Navbar component, replace the Navbar with Nav in your layout.tsx file:

// app/layout.tsx
import Nav from '@/components/Nav';

// ...
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Nav />
        {children}
      </body>
    </html>
  )
}

Save all files and log the session within Nav. Refresh the app and check logs for user data. Logging the user in the navbar should display user data in the browser console.

To display the logged-in user data instead of the default avatar, use a ternary statement in the navbar.

If user.image is present, return an image from “next/image” with appropriate classes and attributes.

Also, set the source to user.image, height and width to 32, and alt text to user.name or "avatar" as a fallback.

If the image isn't present or the user isn't authenticated, use the Avvvatars component with the value "U".

// components/Navbar.tsx

// ...
<Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2">
  <span className="sr-only">Open user menu</span>
  {user?.image ? (
    <Image
      className="h-8 w-8 rounded-full"
      src={user.image}
      height={32}
      width={32}
      alt={user?.name ?? 'avatar'}
    />
  ) : (
    <Avvvatars value={'U'} />
  )}
</Menu.Button>
// ...

For the menu items component, add the user to the ternary statement, enabling the display of the "sign out" button. Implement an onClick event to call 'sign out' when clicked.

// components/Navbar.tsx

// ...
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
  {user ? (
    <Menu.Item>
      {({ active }) => (
        <button
          className={classNames(
            active ? "bg-gray-100" : "",
            "flex w-full px-4 py-2 text-sm text-gray-700",
          )}
          onClick={() => signOut()}
        >
          Sign out
        </button>
      )}
    </Menu.Item>
  ) : (
// ...

This approach demonstrates fetching data on the server and passing it to a client component. It's an effective way to handle user data and display it in your application.

🛡️ How to Protect Routes

The final step in authentication is protecting routes. We have a dashboard, a users page (which is the homepage), and an analytics page. The analytics page, which we'll build out, needs to be password-protected so that only authenticated users can access it.

To protect this route, fetch data on the server using the getServerSession function. But to protect the /analytics route, you'll need to create it within the app folder. Add a folder named analytics and within it, a page.tsx file.

We have to protect the AnalyticsPage based on the session status. If there's no authenticated user, we redirect to the login route, which is /api/auth/sign-in.

// app/analytics/page.tsx
import Analytics from "@/components/Analytics";
import { authOptions } from "@/pages/api/auth/[...nextauth]";
import { getServerSession } from "next-auth";
import { redirect } from "next/navigation";

export default async function AnalyticsPage() {
  const session = await getServerSession(authOptions);

  if (!session) {
    redirect("api/auth/signin");
  }

  return <Analytics />;
}

This basic pattern is essential for protecting content in an admin dashboard. With authentication now covered, we can move on to building the user interface.

📈 How to Create the Analytics Page

We'll use a library called Tremor to build graphs and charts on the analytics page. Tremor allows us to create dashboards quickly, although we won't source the dashboard data from our database.

We’ll use the Grid, Title, and Flex components for layout and styling. We'll also use the Metric and Text components from Tremor for displaying stats and labels within a Grid of cards.

// components/Analytics.tsx
"use client";

import Chart from "@/components/Chart";
import { BarList, Card, Flex, Grid, Metric, Text, Title } from "@tremor/react";

const app = [
  { name: "/shop", value: 789 },
  { name: "/product-features", value: 676 },
  { name: "/about", value: 564 },
  { name: "/login", value: 234 },
  { name: "/downloads", value: 191 },
];

const data = [
  {
    category: "Mobile App",
    stat: "2,543",
    data: app,
  },
];

export default function Analytics() {
  return (
    <main className="p-4 md:p-10 mx-auto max-w-7xl">
      <Grid numItemsSm={2} numItemsLg={3} className="gap-6">
        {data.map((item) => (
          <Card key={item.category}>
            <Title>{item.category}</Title>
            <Flex
              justifyContent="start"
              alignItems="baseline"
              className="space-x-2"
            >
              <Metric>{item.stat}</Metric>
              <Text>Total views</Text>
            </Flex>
            <Flex className="mt-6">
              <Text>Pages</Text>
              <Text className="text-right">Views</Text>
            </Flex>
            <BarList
              data={item.data}
              valueFormatter={(number: number) =>
                Intl.NumberFormat("us").format(number).toString()
              }
              className="mt-2"
            />
          </Card>
        ))}
      </Grid>
      <Chart />
    </main>
  );
}

📊 How to Build the Chart Component

After setting up the top grid with bar charts, let’s set up the chart at the bottom using the AreaChart component from Tremor.

The area chart will include data over different months, comparing sales and profit.

// components/Chart.tsx
"use client";

import { Card, AreaChart, Title, Text } from "@tremor/react";

const data = [
  {
    Month: "Jan 21",
    Sales: 2890,
    Profit: 2400,
  },
  {
    Month: "Feb 21",
    Sales: 1890,
    Profit: 1398,
  },
  {
    Month: "Jan 22",
    Sales: 3890,
    Profit: 2980,
  },
];

export default function Chart() {
  return (
    <Card className="mt-8">
      <Title>Performance</Title>
      <Text>Comparison between Sales and Profit</Text>
      <AreaChart
        className="mt-4 h-80"
        data={data}
        categories={["Sales", "Profit"]}
        index="Month"
        colors={["indigo", "fuchsia"]}
        valueFormatter={(number: number) =>
          `$ ${Intl.NumberFormat("us").format(number).toString()}`
        }
        yAxisWidth={60}
      />
    </Card>
  );
}

👥 How to Create the Users Table

Now that we’ve taken care of our analytics page, let's address the users' table.

This table will display users from our Postgres database. We'll fetch and query all users using the Prisma client and show how to search for users by name or other fields.

We’ll begin by making a simple table with the help of Tremor components in the UsersTable component. If you’re familiar with HTML table elements, this should look very familiar to you.

We’re going to make rows for the name, email and created_at values for each of the users and display those values in the table body:

// components/UsersTable.tsx
import { User } from "@prisma/client";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeaderCell,
  TableRow,
} from "@tremor/react";

type Props = {
  users: User[];
};

export default function UsersTable({ users }: Props) {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeaderCell>Name</TableHeaderCell>
          <TableHeaderCell>Email</TableHeaderCell>
          <TableHeaderCell>Created At</TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.id}>
            <TableCell>{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
            <TableCell>
              {new Intl.DateTimeFormat("en-US").format(user.createdAt)}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

🔎 How to Search for Users

To make our table searchable, we’ll go back out to the home page and build the basic UI for the search component.

// components/Search
export default function Search({ query }: Props) {
  return (
    <div className="relative mt-5 max-w-md">
      <label htmlFor="search" className="sr-only">
        Search
      </label>
      <div className="rounded-md shadow-sm">
        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
          <SearchIcon className="mr-3 h-4 w-4 text-gray-400" />
        </div>
        <input
          type="text"
          name="search"
          autoComplete="off"
          id="search"
          className="h-10 block w-full rounded-md border border-gray-200 pl-9 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
          placeholder="Search by name..."
          onChange={(event) => handleSearch(event.target.value)}
          defaultValue={query}
        />
      </div>
    </div>
  );
}

Since Next.js users server components by default, we can use URL state to initiate queries.

Within a new function called handleSearch, we can update the URL by adding a query parameter called q and set the query that the user typed into the input as the value.

That means that when the user types into the input, the search query will be added to the URL.

// components/Search.tsx
import { usePathname, useRouter } from "next/navigation";
import { useTransition } from "react";

type Props = {
  query?: string;
};

export default function Search({ query }: Props) {
  const router = useRouter();
  const pathname = usePathname();
  const [isPending, startTransition] = useTransition();

  function handleSearch(value: string) {
    const params = new URLSearchParams(window.location.search);

    if (value) {
      params.set("q", value);
    } else {
      params.delete("q");
    }

    startTransition(() => {
      router.replace(`${pathname}?${params.toString()}`);
    });
  }
// ...

Back in our server component, app.tsx, we'll use the search params (which are provided as props in page components) to query our database with Prisma.

We can modify the findMany method to search for users according to name and email using the “where” filter. We can also do it in a case-insensitive way using mode: insensitive.

// app/page.tsx
// ...
type Props = {
  searchParams: {
    q?: string;
  };
};

export default async function Home({ searchParams }: Props) {
  const query = searchParams.q;
  const users = await prisma.user.findMany({
    where: {
      name: {
        contains: query,
        mode: "insensitive",
      },
      email: {
        contains: query,
        mode: "insensitive",
      },
    },
  });
// ...

Finally, we are using the useTransition hook to change the URL in a performant way.

Back in the Search component, you can add a loading spinner to the end of your input to tell the user that we are in the process of changing the URL.

// components/Search.tsx
// ...
  {isPending && (
    <div className="absolute right-0 top-0 bottom-0 flex items-center justify-center">
      <RotateCwIcon className="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-700" />
    </div>
  )}
</div>

This approach demonstrates changing URL state with each keystroke in a performant way, especially important when using server components in Next.js.

Conclusion

In conclusion, building this admin dashboard covers many aspects, from setting up authentication with NextAuth and Prisma to creating a user-friendly interface with Tremor.

These tools and techniques offer a comprehensive way to create flexible and visually appealing dashboards. Feel free to use this admin dashboard in your projects.

Thank you for following along and I hope this guide has been helpful!

🏆 Become a Professional React Developer

Looking for the ultimate resource to learn React from start to finish?

✨ Introducing: The React Bootcamp

The bootcamp features every resource to help you succeed with React:

• 🎬 200+ in-depth videos
• 🕹️ 100+ hands-on React challenges
• 🛠️ 5+ impressive portfolio projects
• 📄 10+ essential React cheat sheets
• 🥾 A complete Next.js bootcamp
• 🖼️ A complete series of animated videos

Click below to try the React Bootcamp for yourself.

Click to get started

In this article, I'm going to break down all of the major ways you can use to create a React app and which one you should pick based off of your project's needs.

I'll also include a quick guide at the end to show you exactly how to choose between each according to the type of project you're building.

Let's get started!

❌ Why You Shouldn't Use Create React App

In 2023, the Create React App tool was deprecated, which means that it was no longer being maintained. Create React App has been the go-to way to make a new React project, but it's been dethroned by a number of different alternatives.

For that reason, Create React App is not an option I would recommend for creating a new React project in 2024.

💨 How to Create a React App with Vite

You may be asking, "What's a good replacement for Create React App?" That option is Vite.

Vite is ideal for making client-rendered React projects that run exclusively in the browser.

Vite docs home page

To spin up a new React project with Vite, you just have to run a single command:

npm create vite@latest my-react-app -- --template react

The great thing about Vite is, as its name indicates, it's much faster than virtually every alternative. Where Vite really shines is how quickly it runs in development.

Vite is unopinionated, however, which means you will likely need to install a suite of third-party libraries for basic functionality, like routing and data fetching.

If your application doesn't have a server or you are using an external API and it doesn't need server-side rendering, Vite is a perfect choice.

Additionally, Vite comes with its own config file, vite.config.js, which might require reading the documentation in order to configure things such as environment variables, build options, and image options.

🥞 How to Create a React App with Next.js

If you're looking for a way to build a React app that gives you a single-page app (SPA) experience but with server-side rendering and server components, Next.js is your choice.

Next.js docs home page

Next.js is the only option at the moment that comes with server components, which allows you to mark a component as async and await in some operation on the server.

async function getData() {
  const res = await fetch('https://api.example.com/...');
  return res.json();
}

export default async function Page() {
  const data = await getData();

  return <main>{data}</main>;
}

The benefit of server components is that you don't have to show a loading spinner in your app before fetching data. Server components allow you to ship far less JavaScript to the client, which leads to faster load times for your users.

Server components do require that you have a server, however, this means that it can't be deployed as simply as a client-rendered React app made with Vite.

Next.js is powerful because it comes with a ton of built-in features, such as a dedicated file-based routing, image optimization, and font loading, to name a few.

Next.js also allows you to tap into server actions, which is a new React feature that allows you to run server code by calling a function.

// Server Component
export default function Page() {
  // Server Action
  async function create() {
    'use server'

    // ...
  }

  return (
    // ...
  )
}

Next.js also has route handlers, which lets you to make HTTP requests to an API endpoint. This is something that client-rendered React apps can't do, because there's no server.

With all of Next.js' benefits, it comes with a steeper learning curve. There are a number of Next.js-specific concepts that may seem to go against some React concepts you've already learned.

For example, within server components, you can't use React Hooks. This means that you have to rely on patterns such as storing state in the URL.

Despite the learning curve, Next.js is the most popular React framework and is relied upon to build impressive React apps that power small startups to Fortune 500 companies.

If you want to make something impressive with React, you can certainly do it with Next.js.

💿 How to Create a React App with Remix

Remix, like Next.js, is a React-based framework that has a different focus on web standards to deliver a better user experience. Remix allows you to also write server and client React code.

Remix docs home page

Remix prides itself on serving static and dynamic content faster than Next.js. This means it's equally good at building full-stack applications as well as static websites.

Instead of server components and server actions, Remix simply has actions. Actions allows you to handle data mutations on your server, which is anything that isn't a GET request. Actions are just simple functions with the name action.

To get data, you use simple functions called loaders. React Remix uses React Router under the hood. So if you're comfortable with React Router, you'll likely feel at home with Remix as well.

export async function loader() {
  return json(await fakeGetTodos());
}

export default function Todos() {
  const data = useLoaderData<typeof loader>();
  return (
    <div>
      <TodoList todos={data} />
      <Form method="post">
        <input type="text" name="title" />
        <button type="submit">Create Todo</button>
      </Form>
    </div>
  );
}

Remix is a bit more stable than Next.js and has a less steep learning curve, still allowing you to build just as impressive applications, with the only downside being that it's not nearly as popular as Next.js. So it doesn't have the same community support and libraries around it.

But if you do want something with server-side rendering and client-side rendering, Remix still remains a great option to build your next React project.

🚀 How to Create a React App with Astro

The newest way to build a React project is definitely the most performant. React apps can also be built using a framework called Astro.

Astro docs home page

Astro's goal is deliver content to users quickly through something called "island architecture".

In short, this means that JavaScript is loaded only when the user needs them, making for a much more optimal user experience. If you want the fastest website possible, I'd highly recommend looking at Astro.

Astro supports server-side rendering and is great for SEO-focused websites that are largely static. However, what's neat about Astro is that it can also run code on the server if you choose to. It's not as popular to build fully dynamic, full-stack applications with Astro, but it is possible to do so.

Astro is also very flexible as it's not even tied to React. You don't need to use React whatsoever to build an Astro app, and you can use React alongside other frameworks such as Vue and Svelte within the same app.

If you're building a website that has posts or content that uses markdown or MDX, Astro should be your top choice. It uses a feature called "collections" to describe all the data within your markdown files so that you know exactly what content is going to be rendered in your React components.

Astro is gaining rapidly in popularity, and it's probably the best choice out there if you are interested in making a static website that doesn't need a database or authentication, or a website that is largely static.

🤔 So What Should I Choose?

If you've read up to this point and you're still trying to figure out which framework would be best for you to build a React project in 2024, here's the rundown:

• If you're just starting out and learning the React basics but want to build a simple or medium-sized project, stick with Vite.
• If you want a full-stack framework with all the bells and whistles, like server components, and you don't mind spending time learning additional concepts, check out Next.js.
• If you've tried Next.js and find some of its concepts difficult to understand, but still want to build a full-stack React application, definitely look into Remix.
• Finally, if you have a static or content-driven website, and you don't really need a database or authentication, I would highly recommend using Astro.

🏆 Become a Professional React Developer

Looking for the ultimate resource to learn React from start to finish?

✨ Introducing: The React Bootcamp

The bootcamp features every resource to help you succeed with React:

• 🎬 200+ in-depth videos
• 🕹️ 100+ hands-on React challenges
• 🛠️ 5+ impressive portfolio projects
• 📄 10+ essential React cheat sheets
• 🥾 A complete Next.js bootcamp
• 🖼️ A complete series of animated videos

Click below to try the React Bootcamp for yourself.

Click to get started

I have put together a list of seven projects that I think are ideal for becoming a confident React developer, from simple to complex applications. This will give you some inspiration for what apps to build.

I'll also walk you through the entire tech stack I would use to build each project, as well as a summary of how to build each one step by step.

Let's get started!

🤖 ChatGPT AI App

As ChatGPT becomes more powerful, you can build impressive applications using the ChatGPT API.

ChatGPT AI app: Draw-a-UI

This is a great starter app because, for most applications, all you need to do is send text or an image to the ChatGPT API, give it some instructions, and it'll send a response back to you.

You could use the ChatGPT API to build a text summarizer, a translation app, an app that explains what a code snippet does. The possibilities are really endless.

One simple ChatGPT-powered AI app that I've built is "Draw a UI", where you can draw a quick mockup of a user interface, send it to ChatGPT, and it'll actually send you back the HTML that was generated according to your screenshot!

I would build this application using Next.js as well as the tldraw npm package, which allows you to draw pictures in your React app.

Next, send that screenshot to a Next.js route handler on the back end that uses the openai npm package to talk with ChatGPT, and then sends you back the HTML code.

👨‍💻 Personal Website

If you're not ready to build something very complex yet, a personal website is a great starting point. You can use it as a way to get comfortable working with JSX and CSS in React.

A personal website made with Next.js and TailwindCSS

Learn how to create basic components, add images, links to your social media profiles, and so on. When you start building more projects, you can show them off on your website.

The great thing about a personal website is that you can extend it as much as you want. You can add your own integrated blog, or you can talk about things that you've learned or what you're working on at the moment.

In order to build your personal website, I would recommend using Next.js because it makes it so easy to build individual pages that are statically rendered, which is good for SEO.

For the images, you can use the integrated next/image library. And for making a blog, I'd highly recommend using the ContentLayer package , which you can use to write all of your blog posts as markdown or MDX.

ContentLayer is great because it makes your markdown content type safe so you know what data each blog post includes. This is also a great way to get started with TypeScript in React, although it may seem intimidating at first.

💬 Chat App

A truly dynamic web application would be a chat app, something that you likely use every day. It's good to build applications that you're familiar with because it gives you a good idea of what parts it's composed of.

Chat App made with React, similar to WhatsApp

A chat app is simple in terms of its components. You only need a messages area, an input to type new messages, and a list of people to chat with.

It's a great project because it can be as simple or as complex as you like. To build something like this, I would use Vite to create the React project and power the backend with Supabase.

You don't need any server-side code here with Supabase, and it also gives you real-time chat functionality, entirely free. You can add authentication to identify users (using Supabase Auth), and put all the created users in a sidebar to chat with.

Then you can create a table for messages and send them off to Supabase whenever someone types in some text. To extend it further, you could make it possible for them to add images and video with Supabase Storage.

Finally, you can display messages in real-time using subscriptions depending on to the user you're chatting with.

💳 E-Commerce App

The next type of app we'll talk about is an e-commerce app.

An e-commerce app can be used for selling physical or digital products with a one-time purchase feature.

An E-Commerce app with physical goods, made with Next.js

After the purchase, you need to deliver it to the customer. The e-commerce app could be very complex, but it doesn't have to be at the start. You just need to make a basic storefront with your products.

Give them an associated image with a description, as well as a buy button. You don't even need to add authentication. To build this, I would use Next.js integrated with Stripe to handle purchases.

The inventory system doesn't have to be very complex if you're selling a physical product. It could be as simple as having a number in a database that can be updated whenever stock is added and decreased whenever someone makes a purchase.

🛒 Online Marketplace

The online marketplace is an extension of the e-commerce app. It's a bit more complex because you're adding more products.

You might also consider adding extra features such as reviews, which are essential to online shopping.

Next.js store with an integrated shopping cart and reviews

The challenge in this case is adding a shopping cart. To make for a good user experience on a website with many products, you want to allow customers to add multiple products to their cart.

To add a shopping cart, I would use the same stack as before, Next.js and Stripe, to handle managing and purchasing the products. Fortunately, there's a great package called use-shopping-cart, which integrates perfectly with Stripe checkout.

You can use it to make a complete shopping cart with the ability to add and remove items, as well as clear the cart right out of the box.

For reviews, you could add a database layer like Supabase, or you could outsource reviews to a third-party service that allows you to integrate reviews, like Trustpilot, for example.

🚚 SaaS App (Software as a Service)

The final evolution in doing sales online with React is a SaaS application.

Gumroad inspired SaaS app made with Next.js

In this app, you provide customers access to a certain software service that you've made, usually for a monthly or yearly subscription fee.

You can create a SaaS application as a paid version of an app that you've already built, such as the AI app or the chat app.

In short, if you can build an application that users would pay for, either to be more productive, for entertainment, or to educate them, then all you need to do to make a SaaS app is to charge those customers a fee for using it.

A SaaS app could charge users based on usage or over a set period of time, such as a month or a year.

This can be done with the help of Stripe or a merchant of records such as Paddle, which makes taxes easier. Both of them can handle subscriptions.

I would recommend using Stripe Checkout to allow customers to manage their subscription and cancel it if necessary.

📱Real-World App Clone

Finally, the most ambitious project would be to build a clone of an app that you really like or that you use every day.

A clone of the YouTube web app with React

An app clone is very difficult because you're usually cloning something that a big company is based off of. However, doing so is a great approach to leveling up your skills as a React developer because you have to think through about how a service is made.

If you were to clone something like YouTube, for example, you're not only going to build out the user interface and have it look like YouTube's, but you'll also need the functionalities that YouTube has, such as menus and drawers and notifications, and the ability to add and view videos, comments, likes, and so on.

If I were to build a YouTube clone, I would use either Supabase or a MySQL database like PlanetScale, along with Next.js, and authentication with Supabase or NextAuth.

I would build the user interface with TailwindCSS and Radix UI. Radix is a library that provides simple (primitive) components that can be easily styled, but are fully functional, which saves you a bunch of time.

To upload videos and media, I would use a platform dedicated to streaming videos such as Mux, which provides a great developer API.

For storing images and all other media and attachments, I would use Supabase Storage.

How far you take it really depends on your ambition and whether you want it to be a business of your own or a great portfolio project to show off to potential employers.

🛠️ Want to Build All the Projects?

You can learn exactly how to build each project within this list inside the all-new React Bootcamp:

✨ Introducing: The React Bootcamp

You'll learn how to build every project in this list through hours of step-by-step videos, plus the complete source code to make them your own.

The bootcamp features every resource to help you succeed with React:

• 🎬 200+ in-depth videos
• 🕹️ 100+ hands-on React challenges
• 🛠️ 5+ impressive portfolio projects
• 📄 10+ essential React cheat sheets
• 🥾 A complete Next.js bootcamp
• 🖼️ A complete series of animated videos

Click below to try the React Bootcamp for yourself.

My goal is to show you the happy path in React, navigating you away from pitfalls so you can spend your time on what really matters in React to help you reach your goals.

Here's the roadmap I would choose for any React developer, whether you're a total beginner or a more advanced one, to help you build amazing apps, get a job, and enjoy using React.

If you're interested in a step-by-step guide on how to learn React in 2024, check out this article that I've written. I recommend reading the two together.

Here's an Outline:

1. Learn Core React Concepts
2. Learn Core Hooks
3. Intermediate React Concepts
4. Create React Apps with Vite
5. Fetch Data with TanStack Query
6. Manage State with Zustand
7. Style with TailwindCSS and Radix
8. Add Routing with TanStack Router
9. Build Forms with React Hook Form
10. Full-Stack React Apps with Next.js

🧱 Learn Core React Concepts

There are a number of core React concepts that are necessary to build just about any React application, no matter how simple or complex.

The biggest concept in React is arguably components. In 2024, almost every component you make will be a function component.

These components are composed of React elements and JSX. Understanding the behavior of JSX is essential, as well as passing data to components using props and knowing the difference between props and state. Finally, knowing how to conditionally render parts of the user interface with conditional rendering is also key.

⏳ Spend less time on:

• Class components, which are almost exclusively seen in older projects. Class components are no longer the default component type due to React Hooks, which are used only in function components.
• Older patterns like render props and higher-order components aren't necessary to learn because they were used largely before React Hooks arrived in 2018.
• Simple concepts such as list, keys, and events, which are not as difficult to grasp.

🎣 Learn Core Hooks

After the core concepts of React, you have the built-in React Hooks. The most important and frequently used of which are useState, useEffect, useRef, and useContext.

To use these hooks, you're going to need to understand the basics of React state, how to perform a side effect with useEffect, and avoid the potential pitfalls of useEffect, such as infinite loops.

You'll need to also understand refs for the useRef hook. And the context API for useContext.

Again, these are what you're going to use probably 90% of the time. The other 10% or so might be custom hooks that you make in order to add unique functionality to your application.

⏳ Spend less time on:

• Hooks like useReducer, which won't be used that frequently in comparison to useContext.
• Optimization hooks like useCallback and useMemo. These can be important at times, but you'll use them far less frequently.

🧠 Intermediate React Concepts

To really master React, you need to have a solid grasp of some intermediate concepts.

Some of these intermediate concepts include:

• Understand what causes React to render
• How to move business logic into reusable hooks
• Basic patterns like "lifting state up"
• How to use composition to avoid prop drilling and overusing context

While the core concepts I mentioned are usually best understood by actively coding and making React projects, intermediate concepts require understanding how React works.

Fortunately, you can get all of that understanding through reading the all-new React documentation. There are a number of very helpful guides covering these intermediate and sometimes advanced concepts.

🛠️ Create React Apps with Vite

What is both a positive and a negative of React is how unopinionated it is. React helps us to make single-page applications, but we often need to resort to third-party libraries to add essential functionality.

To create a new React app in 2024, I'd highly recommend using the CLI/build tool, Vite.

Create React apps with Vite

You can use a package manager like NPM and a single command to create a React application from scratch with all the tools that you need to run it in development and build it for production.

npm create vite@latest my-react-app -- --template react

Create React App is no longer recommended. It's not being as actively maintained and is far slower than Vite.

🐕 Fetch Data with TanStack Query

Data fetching out of the box in React applications is hard. Without a dedicated library, you need to resort to performing HTTP requests in the useEffect hook.

However, this requires adding a lot of additional boilerplate code to manage loading and error state, and it doesn't handle a lot of logic to prevent making unnecessary requests.

The go-to library I'd recommend for any React or Next.js application would be TanStack Query (previously known as React Query).

Fetch data with TanStack Query

It provides simple hooks to not only request but also to "mutate" (update) data from an API endpoint.

It covers just about everything you could want out of a data-fetching library, including caching, deduping multiple requests, knowing when data is out of date. And can be customized exactly the way you'd like.

If you're looking for a good alternative, you can try SWR. It does not have as many features as TanStack Query but is another good lightweight option that makes data fetching with React much easier.

🤹‍♂️ Manage State with Zustand

State management libraries are a must in React applications when you get to a certain size project. The default state management library for React applications for a long time has been Redux, and has been improved with Redux Toolkit.

There are still thousands of companies using Redux even in 2024. However, the ecosystem has shifted towards easier state management solutions.

That allows you to describe your state as an object and write functions to update properties on that state object. The go-to state management library for the past couple of years for me has been Zustand.

Manage state with Zustand

It's a great small library that's very helpful – not just at managing state across any component using simple hooks, but it also provides very convenient features such as preventing unnecessary rerenders.

There are many good alternatives to Zustand such as Recoil and Jotai, both of which share a similar API to Zustand.

✨ Style with TailwindCSS and Radix

There are tons of styling options for React in the form of component libraries. These are premade sets of components, which not only offer a nice consistent design, but built-in functionality as well.

In past years, I would have recommended something like Material UI, but these component libraries can often be inflexible, hard to customize, and increase your bundle size greatly.

A better alternative for 2024 that many developers and businesses are moving towards is using a solution like Tailwind CSS. It just allows you to style your components with chainable, premade classes, in combination with a minimal component library, such as Radix.

Radix provides what are known as primitives. They allow you to make very functional components that your application needs such as dialogs, buttons, selects, tooltips, and just about anything you can think of, which can be styled any way you like.

Style your apps with ShadCN UI

ShadCN UI is a set of components that uses both TailwindCSS and Radix components and provides a good starting place for any application. You can also customize it more than a traditional component library.

I'd highly recommend using something like ShadCN UI for React projects that you use in 2024.

If you would like to use a component library instead, some good choices are Mantine, Chakra UI, and Material UI.

🪧 Add Routing with TanStack Router

React Router still remains the go-to router for most React applications you will build.

React Router has been around since virtually the beginning of React and continues to get significant updates with React Router 6. It covers just about any use case you can imagine, as you can see in their thorough documentation.

One important alternative, however, is TanStack Router.

Add routing with TanStack Router

It's a brand new router for 2024 with a plethora of great features. It has type-safe navigation, built-in TypeScript support, nested routing, automatic route prefetching, and is designed for use with client-side data fetching libraries like TanStack Query and SWR.

If you're using TanStack Query, I'd highly recommend checking out TanStack Router for future React projects.

📑 Build Forms with React Hook Form

Form libraries are not always necessary when building React apps. But if you need form validation, a highly customizable and straightforward choice is React Hook Form.

Form Validation with React Hook Form

With the built-in useForm hook, it makes it very easy to customize the input validation and the error messages.

What's great about React Hook Form is that there's very little code to add to your components. Most of it is abstracted in the useForm hook itself.

Some other reliable alternatives that might include a bit more code to setup are Formik and Final Form.

🥞 Full-Stack React Apps with Next.js

Perhaps the most important choice here when choosing a way to build a React project is the full-stack React framework.

These frameworks allow you to build not only the React client that users interact with, but also the server-side, where you can create APIs, add authentication, and so on.

The most popular React framework is Next.js and for good reason.

Build full-stack apps with Next.js

Next.js 13 gave us server components, which allow us to run our React code on the server. This reduces the amount of JavaScript sent to our client, making for an overall better and faster user experience.

This also allows us to fetch data on the server, and include that data in our React component on its initial render. That means that we can avoid a lot of loading spinners, but still give our applications a single-page app-like experience.

The downside of Next.js is that it does come with a lot of patterns that might seem to conflict with the core concepts of React. But it's done with the intention of making your life easier as a React developer and building faster.

A good alternative to Next.js is Remix, which will soon be adopting server components.

🏆 Become a Professional React Developer

Looking for the ultimate resource to learn React from start to finish?

✨ Introducing: The React Bootcamp

The bootcamp features every resource to help you succeed with React:

• 🎬 200+ in-depth videos
• 🕹️ 100+ hands-on React challenges
• 🛠️ 5+ impressive portfolio projects
• 📄 10+ essential React cheatsheets
• 🥾 A complete Next.js bootcamp
• 🖼️ A complete series of animated videos

Click below to try the React Bootcamp for yourself.

Click to get started

In this comprehensive guide, I'll show you how I would go from knowing nothing about React to becoming a job-ready, junior React developer in 3 to 6 months.

Keep in mind that becoming a skilled developer is not a race. This is just the path I personally would choose to learn React from front to back as quickly and efficiently as possible.

This guide assumes that you have about 3-4 hours of undistracted time a day to dedicate to learning and practicing React. Feel free to adjust this guide to your particular circumstances and goals.

📖 Weeks 1-2: Explore the New React Docs

If you're just getting started with React, the ideal resource throughout your journey is not a course or a book. It's the entirely free React documentation at react.dev.

A sample page from the new React documentation

The React docs were rewritten in 2023. They are the official source for all things React, whether it's simple or complex topics.

Not only are the React docs a great way to become familiar with React, but it's also the most complete resource online to learn React from front to back.

What To Do:

• Try to read (and understand) the first 10 articles of the React docs.
• Get familiar with the core React concepts: elements, components, JSX, passing data with props, rendering, and lists.

If you encounter any especially difficult concepts, try asking ChatGPT for a simpler explanation.

The new React docs also include interactive code sandboxes, meaning you can play with the React code in their examples within the browser.

🤔 Do I Need to Learn JavaScript First?

You might be asking whether you need to fully learn JavaScript before you dive into React.

In 2024, I would personally say, no, you don't really need to.

There are just a handful of JavaScript basics that you're going to need to utilize in any React app.

These include simple data types like strings, numbers, and booleans, as well as complex ones like objects and arrays, plus functions and asynchronous operations with promises. That's about it. Here's an overview of some of those concepts to know before diving into React.

Everything else can be learned as you encounter it. So no, you don't have to spend months learning JavaScript in its entirety before you dive into React.

💻 Week 3: Run a React Project on Your Computer

At this point, you need to do one crucial thing before building a React app.

You simply need to learn how to create a React project from scratch and run the project in development on your computer. That's it.

What To Do:

• Set aside a week to learn the entire process of creating, installing, and running a React project on your local machine.
• The React documentation has a complete guide for this that you can dig into.

It takes some time to get used to this process, but this is important because you will primarily be working here: out of a React project folder on your computer.

Spend some time setting up and getting comfortable with your code editor, which is likely going to be Visual Studio Code. Then see how to create a React project using Vite.

Visual Studio Code: the most popular React code editor

There are many ways to create React projects. But, I would highly recommend using Vite instead of Create React App. CRA is now outdated in 2024, and at this point, you shouldn't be creating projects with Next.js.

Finally, you want to get comfortable opening and running basic commands in your terminal, whether it's the integrated terminal in Visual Studio Code or your computer's terminal or command line.

If you have extra time, take a look at how to use Git and GitHub to see how to push any changes you make to your code. It's essential to keep track of these changes using a version control system like Git when you're working with a team.

If you have trouble with this step, remember that you can also create and code React apps in your browser using tools like CodeSandbox or StackBlitz. Not every project needs to be created as a folder on your computer.

🧱 Weeks 4-6: Build Static React Projects

Now that you have a basic grasp of what React is and how it can be used to build user interfaces, start building simple ones.

Before you start making fully functional applications, you need to focus on building the shell of it using React elements, components, and CSS for styling.

What To Do:

• Take a look at websites you use every day and see if you can build a part of it (a button, a navbar, a hero section, and so on)
• It doesn't have to be a complete page – just start with a simple part. Write it as a separate component.
• Recreate the component so that it looks close to the original in appearance (with the help of CSS).
• As you feel more confident, try putting these components together into a more complete user interface.

You can follow this process using simple React elements. You'll learn how to take those elements and break them into components so that they can be reused. After that, you can try to make it dynamic using data passed with props.

At this stage, I'd highly recommend getting comfortable with using CSS in React. You can use a simple stylesheet or something like Tailwind CSS, which is very popular.

Try not to use a component library because there is ultimately no way of avoiding CSS as a frontend developer. You need it to create attractive interfaces.

This stage of building static pages with React is also a good chance to learn the basics of semantic HTML. If you don't know what that is, there are plenty of articles that will show you how to properly structure your HTML tags so that it's not an confusing pyramid of divs.

🛠️ Weeks 7-10: Build Dynamic React Projects

After making static React projects, your goal is to make small, but functional React projects that perform a simple task.

What To Do:

• Try to make 10+ mini dynamic apps that perform a simple task using state and events.
• They should be small, and take no longer than a day to make, such as a calculator, a video player, a todo list, an image carousel, a quote generator, and so on.

An example intermediate React project: a shopping list app

What makes these projects intermediate exactly? In short, these projects should function more like real-world applications as compared to the basic, static ones. They should take user input, meaning handle events and manage data with React state.

You should make projects that use side effects as well. This usually involves requesting data from an external data source with the Fetch API.

During this stage, you should become comfortable working with the basic React hooks: useState, useEffect, and at times useRef, useContext, and maybe useReducer.

Don't worry too much about performance-related hooks like useCallback and useMemo. These should be used sparingly.

Try to build as many mini apps as you can (I would recommend at least 10), but don't spend more than a day at the most building any particular project. Build one, or if you can't, move on to the next one.

If you need any ideas, I have a complete article that shows you a ton of React beginner projects that you can do within a day.

This period of time is very important for getting comfortable with using React and writing React-specific code as compared to just plain HTML (technically JSX) and CSS.

🧑‍💻 Weeks 11-14: Build Your Developer Portfolio

This final stage of building projects should come after you feel that most intermediate projects have become a little too simple.

When you start feeling confident in building mini React projects, that's a sign that it's a good time to push yourself towards more advanced projects.

What To Do:

• Pick a larger, much more ambitious React project that you really want to make over the course of a longer period of time (like a month)
• Highlight this project on your developer portfolio and describe what skills and tools you used to build it.

An advanced project might be a mini clone of a larger application such as a YouTube clone where users can sign in, upload videos, and share them with friends.

An example portfolio project: a mini YouTube clone

Keep in mind that React is used to build major applications that you use every single day, like TikTok, Twitch, Hulu, Notion, and more. So think big when you are picking what portfolio projects to make.

These more advanced projects should take a much longer period of time, and that's a good thing. They should be a passion project – something that you really are interested in building with React, and excites you to make.

Along the way, you're going to be learning a lot of things that you didn't know before. You're going to need to research (for example, in our YouTube sample project):

• How to upload media with React
• How to authenticate users using some kind of authentication service, whether free or paid
• What library is best for playing videos in a React project

All on top of many smaller decisions that you'll figure out along way.

This last stage should really challenge you as a developer. And what you ultimately build over the course of a month or more is a perfect addition to your developer portfolio.

Your developer portfolio should be one or more projects that represent your proficiency with React. It's going to show to your potential employer what you can bring to the job.

Once you've got a functioning project that you're proud of, you feel like you understand core React concepts pretty well, and you know how to problem-solve while coding, you should be in a good position to start applying for junior developer positions with React.

🏆 Become a Professional React Developer

Looking for the ultimate resource to learn React from start to finish?

✨ Introducing: The React Bootcamp

The bootcamp features every resource you need to succeed with React, including:

• 🎬 200+ in-depth videos
• 🕹️ 100+ hands-on React challenges
• 🛠️ 5+ real-world portfolio projects
• 📚 10+ essential React cheatsheets
• 🥾 A complete Next.js bootcamp
• 🖼️ A complete series of animated videos

Click below to try the React Bootcamp for yourself!

Click to get started

In reality, using props in React components is almost identical to using arguments in plain JavaScript functions.

Let's take a quick look at what props are in React through some helpful animations. These will help you visualize how props function and how you can use them in your React projects.

How to Pass Data to a JavaScript Function

The following JavaScript function is broken. What will happen if you try to use it?

function sum() {
  return a + b;
} 

sum(); // Reference Error: a is not defined

When sum function is called, it throws a Reference Error: a is not defined

If you call this function, you’re going to get a Reference Error which says, "a is not defined".

This makes sense – the sum function is using two values, a and b, but has no idea what they are.

To fix it, we need to add a and b as parameters and pass two numbers as arguments.

function sum(a, b) {
  return a + b;   
}

sum(2, 2); // 4

Fix the sum function by passing values to both arguments a and b

That’s how you pass data to a JavaScript function, but what about a React component?

How to Pass Data to a React Component

A React component looks a lot like a plain JavaScript function. But unlike a JS function, it returns and renders React elements, such as a button.

function Button() {
  return <button>Click me</button>;   
}

React component, Button, that renders a button element

To call a React component and have it display those elements, we use it as if it was a custom HTML element, but written in JavaScript.

function App() {
  return <Button />;   
}

function Button() {
  return <button>Click me</button>;   
}

Button component is used in another component, App

But how do we pass data to functions when they are called like this?

Using this HTML-like syntax, we can pass it any data we like as if it was a custom HTML attribute.

For example, if we wanted to add our own custom text to our button, we could add a text attribute and set its value equal to some string.

function App() {
  return <Button text="⭐️" />;   
}

function Button() {
  return <button>Click me</button>;   
}

"text" prop is added to the Button component, with value ⭐️

In the world of React, this custom attribute is what is known as a "prop".

We can add as many props to our components as we like. They can be any JavaScript data type.

function App() {
  return <Button text="⭐️" color="green" />;   
}

function Button() {
  return <button>Click me</button>;   
}

prop named "color" (with the value "green") is added to the Button component

If we want to use the props we've passed down to our component, you might think that each one is passed as a separate argument.

Passed props are not provided as separate arguments to a component

But that’s not the case. Unlike a regular JavaScript function, all of these props are collected into one value, which is itself an object.

This single parameter is referred to and named "props”.

All props that are passed to a component become properties on a single object within that component's parameters

It can be named anything, but the convention is to call this parameter "props" because that's what it contains – all of the values that are passed down to this component.

Another reason it makes sense to call these values “props” is because what we've passed down are turned into properties on an object.

Once we’ve passed down the data that we like to our component, they can be used inside that component with curly braces.

function App() {
  return <Button text="⭐️" color="green" />;   
}

function Button(props) {
  return (
    <button style={{ background: props.color }}>
     {props.text}
    </button>
  );
}

The "color" and "text" props are used as properties within the Button component

And a neat pattern to use if your components are small, is to destructure the props object.

By adding a set of curly braces in your parameters, you can use destructure props into individual variables that you can use directly.

function App() {
  return <Button text="⭐️" color="green" />;   
}

function Button({ color, text }) {
  return (
    <button style={{ background: color }}>
     {text}
    </button>
  );
}

Props are destructured as individual variables within the Button component, "color" and "text"

🏆 Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It features over 100 hands-on challenges, real-world projects, and a complete series of animations to help you finally understand how React works.

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

This article will give you all the understanding of Python variables you need to use them effectively in your projects.

If you want the most convenient way to review all the topics covered here, I've put together a helpful cheatsheet for you right here:

Download the Python variables cheatsheet (it takes 5 seconds).

What is a Variable in Python?

So what are variables and why do we need them?

Variables are essential for holding onto and referencing values throughout our application. By storing a value into a variable, you can reuse it as many times and in whatever way you like throughout your project.

You can think of variables as boxes with labels, where the label represents the variable name and the content of the box is the value that the variable holds.

In Python, variables are created the moment you give or assign a value to them.

How Do I Assign a Value to a Variable?

Assigning a value to a variable in Python is an easy process.

You simply use the equal sign = as an assignment operator, followed by the value you want to assign to the variable. Here's an example:

country = "United States"
year_founded = 1776

In this example, we've created two variables: country and year_founded. We've assigned the string value "United States" to the country variable and integer value 1776 to the year_founded variable.

There are two things to note in this example:

1. Variables in Python are case-sensitive. In other words, watch your casing when creating variables, because Year_Founded will be a different variable than year_founded even though they include the same letters
2. Variable names that use multiple words in Python should be separated with an underscore _. For example, a variable named "site name" should be written as "sitename"._ This convention is called snake case (very fitting for the "Python" language).

How Should I Name My Python Variables?

There are some rules to follow when naming Python variables.

Some of these are hard rules that must be followed, otherwise your program will not work, while others are known as conventions. This means, they are more like suggestions.

Variable naming rules

1. Variable names must start with a letter or an underscore _ character.
2. Variable names can only contain letters, numbers, and underscores.
3. Variable names cannot contain spaces or special characters.

user_age = 20 # valid

website = 'https://freecodecamp.org' # valid

1password = True # invalid

Variable naming conventions

1. Variable names should be descriptive and not too short or too long.
2. Use lowercase letters and underscores to separate words in variable names (known as "snake_case").

What Data Types Can Python Variables Hold?

One of the best features of Python is its flexibility when it comes to handling various data types.

Python variables can hold various data types, including integers, floats, strings, booleans, tuples and lists:

Integers are whole numbers, both positive and negative.

answer = 42

Floats are real numbers or numbers with a decimal point.

weight = 34.592

Strings are sequences of characters, namely words or sentences.

message = "Hello Python"

Booleans are True or False values.

is_authenticated = True

Lists are ordered, mutable collections of values.

fruits = ['apple', 'banana', 'cherry']

Tuples are ordered, immutable collections of values.

point = (3, 4)

There are more data types in Python, but these are the most common ones you will encounter while working with Python variables.

Python is Dynamically Typed

Python is what is known as a dynamically-typed language. This means that the type of a variable can change during the execution of a program.

Another feature of dynamic typing is that it is not necessary to manually declare the type of each variable, unlike other programming languages such as Java.

You can use the type() function to determine the type of a variable. For instance:

print(type(answer))  # Output: <class 'int'>
print(type(message))  # Output: <class 'str'>

What Operations Can Be Performed?

Variables can be used in various operations, which allows us to transform them mathematically (if they are numbers), change their string values through operations like concatenation, and compare values using equality operators.

Mathematic Operations

It's possible to perform basic mathematic operations with variables, such as addition, subtraction, multiplication, and division:

# Arithmetic operations
a = 10
b = 5

sum = a + b
difference = a - b
product = a * b
quotient = a / b

print(sum, difference, product, quotient)  # Output: 15 5 50 2.0

It's also possible to find the remainder of a division operation by using the modulus % operator as well as create exponents using the ** syntax:

# Modulus operation
remainder = a % b
print(remainder)  # Output: 0

# Exponentiation
power = a ** b
print(power)  # Output: 100000

String operators

Strings can be added to one another or concatenated using the + operator.

# String concatenation
first_name = "Guido"
last_name = "van Rossum"
full_name = first_name + " " + last_name
print(full_name)  # Output: Guido van Rossum

Equality comparisons

Values can also be compared in Python using the <, >, ==, and != operators.

These operators, respectively, compare whether values are less than, greater than, equal to, or not equal to each other.

# Comparison operations
x = 15
y = 20

print(x < y)  # Output: True
print(x > y)  # Output: False
print(x == y)  # Output: False
print(x != y)  # Output: True

Finally, note that when performing operations with variables, you need to ensure that the types of the variables are compatible with each other.

For example, you cannot directly add a string and an integer. You would need to convert one of the variables to a compatible type using a function like str() or [int()](https://www.freecodecamp.org/news/python-string-to-int-convert-a-string-example/).

Variable Scope

The scope of a variable refers to the parts of a program where the variable can be accessed and modified. In Python, there are two main types of variable scope:

Global scope: Variables defined outside of any function or class have a global scope. They can be accessed and modified throughout the program, including within functions and classes.

global_var = "I am a global variable"

def access_global_var():
    print(global_var)

access_global_var()  # Output: I am a global variable

Local scope: Variables defined within a function or class have a local scope. They can only be accessed and modified within that function or class.

def function_with_local_var():
    local_var = "I am a local variable"
    print(local_var)

function_with_local_var()  # Output: I am a local variable
print(local_var)  # Error: NameError: name 'local_var' is not defined

In this example, attempting to access local_var outside of the function_with_local_var function results in a NameError, as the variable is not defined in the global scope.

Conclusion

Don't be afraid to experiment with different types of variables, operations, and scopes to truly grasp their importance and functionality. The more you work with Python variables, the more confident you'll become in applying these concepts.

Finally, if you want to fully learn all of these concepts, I've put together for you a super helpful cheatsheet that summarizes everything we've covered here.

Just click the link below to grab it for free. Enjoy!

Download the Python variables cheatsheet

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

In some cases, the amount of code you need to write doesn't exceed more than a single line, which is why they are known as one-liners.

Let's go through 10 essential one liners worth using in virtually every JavaScript project you create.

1. How to Capitalize Text

const capitalize = (str) => `${str.charAt(0).toUpperCase()}${str.slice(1)}`;

Capitalizing strings is not a built-in feature of JavaScript.

To fix this, we can make a capitalize function which accepts some text and makes the first letter uppercase, then appends the rest of the string.

This one-liner is useful for just about every kind of text you want to capitalize. I use it most frequently with displaying users' names.

const name = "robert";

capitalize(name) // "Robert";

2. How to Calculate Percent

const calculatePercent = (value, total) => Math.round((value / total) * 100)

Calculating a percent is pretty easy and just involves some simple math. It is an essential task if you want to display user progress, for example in incrementing a progress bar.

calculatePercent accepts a certain amount, divides it by the total amount, then multiplies it by 100. Finally, we use Math.round() to round the result up to the nearest whole number.

const questionsCorrect = 6;
const questionTotal = 11;

calculatePercent(questionsCorrect, questionsTotal); // 55

3. How to Get a Random Element

const getRandomItem = (items) =>  items[Math.floor(Math.random() * items.length)];

Getting a random element and array is really nice when you want to make things unique for your user.

For example, you might want to show your users a congratulations message based on some action. But you probably don't want to show them the same one every time, because that would get repetitive and boring.

getRandomItem uses the Math.random() function, which returns a decimal between 0 and 1. This is multiplied by the length of the array to select a random index, which can be used to select a random element.

const items = ["Nicely done!", "Good job!", "Good work!", "Correct!"];

getRandomItem(items); // "Good job!"

4. How to Remove Duplicate Elements

const removeDuplicates = (arr) => [...new Set(arr)];

Removing duplicate values in an array is an essential task in JavaScript.

For example, you might be adding one user to another user's friends list, but you don't want that user to be added or displayed twice.

This removeDuplicates function leverages the Set constructor in JavaScript, which removes any duplicate (primitive) values by default. After that, we use the spread operator ... to spread its values into a new array.

const friendList = ["Jeff", "Jane", "Jane", "Rob"];

removeDuplicates(friendList); // ['Jeff', 'Jane', 'Rob']

5. How to Sort Elements By Certain Property

const sortBy = (arr, key) => arr.sort((a, b) => a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0);

A common task when displaying data in JavaScript is to sort it based on some property.

This sortBy function uses the native sort method, compares the elements in the array based off of the provided key, and sorts the array in ascending order.

Where would this be helpful? If you're fetching data that is supposed to be in a certain position based off of a position key, sortBy will make sure that those elements are placed in the proper order.

const lessons = [{ position: 1, name: "Intro" }, { position: 0, name: "Basics" }];

sortBy(lessons, 'position'); 

// {position: 0, name: 'Basics'},
// {position: 1, name: 'Intro'}

6. How to Check if Arrays/Objects are Equal

const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);

It's easy to check for equality with JavaScript primitives, like numbers and strings.

Checking for equality between arrays and objects is a bit harder, however. Fortunately, there's a neat trick you can use with JSON.stringify to convert arrays or objects into a JSON string. If all the elements match, isEqual will return a value of true.

This is very handy when you expect multiple inputs from a user, for example if they're answering a question and you want to compare it to the correct solution.

isEqual([1, '2'], [1, 2]); // false
isEqual([1, 2], [1, 2]); // true

7. How to Count Number of Occurrences

const countOccurrences = (arr, value) => arr.reduce((a, v) => (v === value ? a + 1 : a), 0);

Another helpful array-based one liner is to count the number of occurrences of an element in an array. It uses the .reduce() function. If the value is found in the array, it increments a counter by one.

One useful example might be a poll to determine what most people voted for.

const pollResponses = ["Yes", "Yes", "No"];
const response = "Yes";

countOccurrences(pollResponses, response); // 2

8. How to Wait for a Certain Amount of Time

const wait = async (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

In your application, you might want to wait for a certain period of time. For example, if you want to delay an animation or are waiting for an important operation for finish.

You can provide the wait function a certain amount of time to wait in milliseconds. Because it uses a promise, you can use the then callback or the await keyword to make sure it has finished.

wait(2000).then(() => goToSignupPage());

9. How to Use the Pluck Property from Array of Objects

const pluck = (objs, key) => objs.map((obj) => obj[key]);

If you need to extract data from an array of objects and are not interested in getting all the data that is returned, use the pluck function.

It takes an array of objects and a property that each of the objects contains. The function maps over this array and returns an array with only the values of the property that we specified.

For example, if we have an array of user data, but we want to convert it just to an array of their names, pluck can do this.

const users = [{ name: "Abe", age: 45 }, { name: "Jennifer", age: 27 }];

pluck(users, 'name'); // ['Abe', 'Jennifer']

10. How to Insert an Element at a Certain Position

const insert = (arr, index, newItem) => [...arr.slice(0, index), newItem, ...arr.slice(index)];

If we want to put an element in a precise location in an array, we can use this special insert function.

To use it, we just need to pass to insert the array we want to transform, the index where we want the element insert, and the element to insert.

This is a great function to use instead of .splice() because it does not mutate the original array. It creates a new array with the help of the slice method, by slicing the array into two parts around the specified index and then creates a new one.

const items = [1, 2, 4, 5];

// insert the number 3 at index 2:

insert(items, 2, 3); // [1, 2, 3, 4, 5]

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

I have created seven unique and fun React projects for you to make, all of which will teach you essential React concepts that you need to know in 2023.

Unlike other recommended projects which require you going to use multiple third-party libraries, all of these projects only use the core React library. Each of them use the latest React version (18) and no CSS frameworks.

My goal in creating this guide is to show you that you don't need a ton of code and special libraries to start building cool things with React.

Let's get started!

1. Image Carousel

The first React project on our list is an image slider or carousel.

Final result

How you will build it

Our carousel should allow the user to click the backwards or forwards button to go to the previous or next image.

The images will be stored in a simple array. We will see how to use state in order to store the current image. Then we will update that state to go to the previous or next image, according to the button the user pressed.

If the user has gone through all of the images, you will figure out how to start at the beginning of the array, to allow them to cycle through the images again. If you don't want to use images, you could also use text to make a testimonial carousel that cycles through reviews for a given product.

Finally, if you want to take your carousel to the next level, try adding a fun transition using CSS to animate the image as it changes.

React concepts you will learn

• useState (storing and updating state)
• Conditionals (ternaries)
• Lists, keys, and .map()

2. FAQ/Accordion

Another common type of component which can utilizes state is an accordion component, which can both reveal and hide text.

Final result

How you will build it

You will learn how to toggle state to make sure that each accordion opens and closes after each button press. You will also learn simple conditionals such as the and (&&) operator that will only show the content of the accordion when the accordion state says it is open.

Finally, we will create an entire FAQ (frequently asked questions) section by displaying multiple accordion components. To do so, we will learn how to pass each accordion's data down into the component using props.

React concepts you will learn

• Toggling state with useState
• Conditionals (&&)
• Passing data to components via props
• Displaying multiple components with .map()

3. Quote Generator

Using external APIs and making HTTP requests are an essential part of any React application. To learn how to make HTTP requests in React, we will make a random quote generator.

Final result

How you will build it

Our quote generator will need to use the useEffect hook to perform a "side effect" to fetch the quotes from an external API. After fetching our quotes, we will put them in our local app state, which we will call quotes.

We'll then take that array of quotes and use a function to select a random item within that array. Then we'll put it in another state variable called just quote, which can then be displayed to our user.

We also want to add a "New Quote" button above each quote that will perform the same operation – get a new random quote from our quotes array and put it in quote.

Finally, the quote isn't loaded in state. So we'll make sure to use the optional chaining operator (?) to safely check our object before we attempt to get a value from that quote in state to make sure our app doesn't throw an error.

React concepts you will learn

• useEffect (to perform side effects)
• HTTP requests with Fetch API
• Conditional chaining operator (?)

4. Shopping list

Next we'll take a look at how to build a shopping list where users can add new items to the list that they'd like to get from the store and delete items from the list.

Final result

How to build it

This project will teach you how to add new items to an array in our local state using the array spread operator. Additionally, you'll learn how to delete any item we like using the filter function in JavaScript.

This project will also get you familiar with typing values into a form input and then retrieving those values when the form is submitted. You'll do this using the onSubmit event handler.

One fun way to enhance this project would be to enable our users to double click each item in our list to strike through it to put a line through it in addition to being able to delete it.

React concepts you will learn

• Updating lists with useState
• JavaScript array spread operator and filter functions
• Forms and inputs in React
• onSubmit event handler

5. GitHub User Search

In this project, we will use an input's value to search for users in GitHub using their username or email.

Final result

How to build it

You will first store the value typed into the input in a state value called query. After that, you will perform an HTTP request to a GitHub API endpoint to then fetch the users' profile which once again uses the browser fetch API. The request URL will use the input value.

Once the results are fetched, we'll see how to display all the relevant info such as their name, avatar, and a link to go to their profile.

A good way to extend this project would be to attempt to allow search functionality as the user types instead of having to submit the form first. Make sure to use a debounce function to ensure that you do not too many requests to the GitHub API and get a 429 error response (too many requests).

6. Video Player

React can also be used to work with the HTML video element and toggle between different videos.

How to build it

In our project, we will allow users to toggle through several different videos using a radio input. We will not only see how to work with radio inputs in forms in React, but how to pass props down to our two components, Menu and Video.

In particular, we will learn how to pass down functions to update state in the parent components from the child component. This pattern is called lifting state up and is a very important pattern to know in React.

A fun way to improve this project would be to add a button to extend the functionality of the video player. For example, to add buttons to control whether the video is looped, whether the video autoplays, and more.

React concepts you will learn

• Radio inputs in React
• Passing functions as props
• Lifting state up in React

7. BMI Calculator

Finally we will build a simple BMI (body mass index) calculator which will use a person's weight and height in order to calculate their body mass index as a number.

How to build it

We will use a couple of range inputs to enable our users to select their weight and height on a sliding scale.

Body mass index is calculated based off of the stored weight and height values. Our goal will be to calculated output their body mass index instantly, according to whatever values are stored in the weight and height state variables.

To do so, we will use the useMemo React hook to performantly calculate this value whenever either of these two values changed.

React concepts you will learn

• Range inputs in React
• useMemo (to performantly perform calculations)

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

They enable us to easily reuse functionality across our application's components. What's best about hooks is their reusability – you can reuse your hooks both across components and your projects.

Here are seven of the most important React hooks that I reuse across every react project I create. Give them a try today and see if they're as useful for you when building your own React apps.

Before we begin, it's important to clarify that not every custom React hook needs to be written by you. In fact, all of the hooks that I will mention come from the library @mantine/hooks.

Mantine is great third-party library that includes these hooks and many more. They will add just about every significant feature to your React app that you can think of.

You can check out the documentation for @mantine/hooks at mantine.dev.

The useIntersection Hook

When a user scrolls down the page in your application, you may want to know when an element is visible to them.

For example, you might want to start an animation only when a user sees a specific element. Or, you may want to show or hide an element after they've scrolled a certain amount down the page.

useIntersection demo

To get information about whether an element is visible, we can use the Intersection Observer API. This is a JavaScript API that's built into the browser.

We can use the API on its own using plain JavaScript, but a great way to get information about whether a particular element is being intersected within its scroll container is to use the useIntersection hook.

import { useRef } from 'react';
import { useIntersection } from '@mantine/hooks';

function Demo() {
  const containerRef = useRef();
  const { ref, entry } = useIntersection({
    root: containerRef.current,
    threshold: 1,
  });

  return (
    <main ref={containerRef} style={{ overflowY: 'scroll', height: 300 }}>
      <div ref={ref}>
        <span>
          {entry?.isIntersecting ? 'Fully visible' : 'Obscured'}
        </span>
      </div>
    </main>
  );
}

To use it, all we need to do is call the hook in our component and provide a root element. Root is the scroll container, and this can be provided as a ref with the useRef hook. useIntersection returns a ref which we pass to the target element, whose intersection in the scroll container we want to observe.

Once we have a reference to the element, we can keep track of whether the element is intersecting or not. In the example above, we can see when the element is obscured or when it's fully visible based off the value of entry.isIntersecting.

You can pass additional arguments that allow you to configure the threshold which is related to what percentage of the target is visible.

The useScrollLock Hook

Another hook related to scrolling is the useScrollLock hook. This hook is very simple: it enables you to lock any scrolling on the body element.

I have found it to be helpful whenever you want to display an overlay or a modal over the current page and do not want to allow the user to scroll up and down on the page in the background. This lets you either focus attention on the modal or allow scrolling within its own scroll container.

import { useScrollLock } from '@mantine/hooks';
import { Button, Group } from '@mantine/core';
import { IconLock, IconLockOpen } from '@tabler/icons';

function Demo() {
  const [scrollLocked, setScrollLocked] = useScrollLock();

  return (
    <Group position="center">
      <Button
        onClick={() => setScrollLocked((c) => !c)}
        variant="outline"
        leftIcon={scrollLocked ? <IconLock size={16} /> : <IconLockOpen size={16} />}
      >
        {scrollLocked ? 'Unlock scroll' : 'Lock scroll'}
      </Button>
    </Group>
  );
}

useScrollLock locks the user's scroll at their current position on the page. The function returns an array, which can be destructured, as in the code above.

The second value is a function that allows us to lock the scroll. The first destructured value, on the other hand, is a boolean that tells us whether the scroll has been locked or not.

This value is useful for example, if you want to show certain content when the scroll is locked or to tell the user that it has been locked. You can see in the example below that we are indicating within our button when the scroll has been locked or unlocked.

useScrollLock demo

The useClipboard Hook

In many cases, you want to provide a button that allows the user to copy something to their clipboard, which is where copied text is stored.

A great example of this is if you have a code snippet on your website and you want to users to easily copy it. For this, we can use another web API – the Clipboard API.

@mantine/hooks gives us a convenient useClipboard hook, which returns a couple of properties: copied, which is a boolean that tells us whether a value has been copied to the clipboard using the hook as well as a copy function, to which we can pass whatever string value we like to it to be copied.

In our example, we would like to copy a code snippet for our users to paste where they like, as seen in the video below:

useClipboard demo

We call our copy function when they hit our designated copy button, pass to it the code snippet, and then show a little checkmark or something that indicates to them that the text has been copied.

What's neat is the useClipboard hook comes with a timeout value. After a given timeout period, which is in milliseconds, the copied state will be reset, showing the user that they can copy the text again.

The useDebouncedValue Hook

The next hook, useDebouncedValue, is essential if you have a search input in your app.

Whenever a user performs a search using an input, the search operation usually involves an HTTP request to an API.

A typical problem you will encounter, especially if you want your users to receive search results as they are typing, is that a query (request) will be performed on every keystroke. Even for a simple search query, there is no need to perform so many requests before a user has finished typing what they want.

This is a great use case for the useDebounceValue hook, which applies a debounce function on the text that's has been passed to it.

import { useState } from 'react';
import { useDebouncedValue } from '@mantine/hooks';
import { getResults } from 'api';

function Demo() {
  const [value, setValue] = useState('');
  const [results, setResults] = useState([])
  const [debounced] = useDebouncedValue(value, 200); // wait time of 200 ms

  useEffect(() => {
    if (debounced) {
      handleGetResults() 
    }

    async function handleGetResults() {
       const results = await getResults(debounced)   
       setResults(results)
    }
  }, [debounced])

  return (
    <>
      <input
        label="Enter search query"
        value={value}
        style={{ flex: 1 }}
        onChange={(event) => setValue(event.currentTarget.value)}
      />
      <ul>{results.map(result => <li>{result}</li>}</ul>
    </>
  );
}

You store the text from your input in a piece of state with useState and pass the state variable to useDebouncedValue.

As the second argument to that hook, you can provide a wait time, which is the period of time that the value is debounced. The debounce is what enables us to perform far fewer queries.

You can see the result in the video below where the user types something and only after 200 milliseconds, do we see the debounced value.

useDebouncedValue demo

The useMediaQuery Hook

Another very useful hook that I use all the time is the useMediaQuery hook.

Media Queries are used in plain CSS and the useMediaQuery hook allows us to subscribe to whatever media query we pass to the hook.

For example, within our component, let's say that we want to show some text or change the styles of a component based off of a certain screen width, such as 900 pixels. We provide a media query just like we would in CSS and useMediaQuery returns to us a matches value which is either true or false.

import { useMediaQuery } from '@mantine/hooks';

function Demo() {
  const matches = useMediaQuery('(min-width: 900px)');

  return (
    <div style={{ color: matches ? 'teal' : 'red' }}>
      {matches ? 'I am teal' : 'I am red'}
    </div>
  );
}

It tells us the result of that media query in JavaScript, which is particularly useful when we have styles that we want to change directly within our JSX using the style prop, for example.

useMediaQuery

In short, this is an essential hook for those handful of cases in which CSS cannot be used to handle media queries.

The useClickOutside Hook

This next hook – useClickOutside – might seem like a strange one, but you'll see how important it is when you actually need it.

When you develop a dropdown or something that pops up in front of a page's content and needs to be closed afterwards (such as a modal or drawer), this hook is indispensable. It's very easy to open one of these types of components by clicking a button. Closing these components is a little harder.

To follow good UX practices, we want anything that obstructs our user's view to be easily closable by clicking outside of the element. This is specifically what the useClickOutside hook lets us do.

When we call useClickOutside, it returns a ref that we must pass to the element outside of which we want to detect clicks. Usually that element is going to be controlled by a boolean piece of state such as the one we have in our example below (that is, the value opened).

import { useState } from 'react';
import { useClickOutside } from '@mantine/hooks';

function Demo() {
  const [opened, setOpened] = useState(false);
  const ref = useClickOutside(() => setOpened(false));

  return (
    <>
      <button onClick={() => setOpened(true)}>Open dropdown</button>
      {opened && (
        <div ref={ref} shadow="sm">
          <span>Click outside to close</span>
        </div>
      )}
    </>
  );
}

useClickOutside accepts a callback function which controls what happens when you actually click outside that element.

In most cases, we want to do something quite simple, which is to just close it. To do so, you'll likely need to have a state setter (like setOpened) and pass it a value of false to then hide your overlayed content.

useClickOutside demo

The useForm Hook

My favorite and most helpful hook in this list is the useForm hook.

This hook comes specifically from Mantine and involves installing a specific package from the library: @mantine/form. It should give you everything that you need to create forms in React, including the ability to validate inputs, display error messages, and ensure the input values are correct before the form is submitted.

useForm accepts some initial values which correspond to whatever inputs you have within your form.

import { TextInput, Button } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    initialValues: {
      email: ''
    },

    validate: {
      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
    },
  });

  return (
    <div>
      <form onSubmit={form.onSubmit((values) => console.log(values))}>
        <TextInput
          withAsterisk
          label="Email"
          placeholder="your@email.com"
          {...form.getInputProps('email')}
        />
        <Button type="submit">Submit</Button>
      </form>
    </div>
  );
}

The great benefit of useForm is its helpers, such as the validate function, which receives the value that's been typed in to each input then allows you to create validation rules.

For example, if you have an email input, you might have a regular expression to determine whether it is in fact a valid email (as you can see in the code above). If not, then you can show an error message and prevent the form from being submitted.

useForm demo

How do you get the values that have been typed into the form?

Mantine provides a very convenient helper called getInputProps, where you simply provide the name of the input you're working with (like email) and it automatically sets up an onChange to keep track of the values that you've typed into your form.

Additionally, to handle form submission and prevent submission if its values do not pass validation rules, it has a special onSubmit function which you wrap around your regular onSubmit function. On top of applying the validation rules, it will take care of calling preventDefault() on the form event so that you don't have to do it manually.

I am just scratching the surface with this hook, but I would highly recommend you use it for your next project. Forms are traditionally a pain to get working properly, especially forms that require validation and visible error messages. useForm makes it incredibly easy!

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

I have put together eight different projects that will not only show you what's possible to make with React, but give you some inspiration on what apps to make.

Additionally, I will give you all the tools that you need to effectively build out each project in the list.

Let's get started!

Todo App

If you want to get started building projects, there's no better starting place than a simple todo app.

A todo application will feature basic CRUD functionality, meaning that you can create, read, update and delete todos. Todos can be replaced with whatever type of content that you want. In fact, many applications we use on a daily basis could arguably be considered glorified todo apps.

The benefit of building a todo app is that the entire app can be made in a short period of time. If you can build a todo app without any tutorial to guide you, it is a good test to see your proficiency with React.

TodoMVC todo app

Todo apps are a great project to begin with because you do not need any third-party libraries to build them. You can make your todo app as complex as you like, which will help you become confident with concepts that you want to learn. Want to add authentication or a database to your app? Feel free to do so! You can truly make it as simple or complex as you like.

Stack To Use

• Barebones React app
• Core React features (State, Context, and so on.)
• That's it!

Personal Blog

A step up from the basic todo app is a blog website.

If you would like to write in Markdown, which is a popular style of writing and formatting text, your blog will likely consist of a number of Markdown (.md) files.

If you want the content to be included locally within the project to make it a bit more difficult, you could try fetching it from an external source like a CMS (content management system) such as Sanity or Contentful.

Next Blog Starter Kit (https://next-blog-starter.vercel.app/)

In either case, this blog is going to consist of static pages so you can use any static site generator that you like.

A good framework choice for this blog could be Next.js or Gatsby. Both are ideal to make text-driven websites like blogs because they are server-rendered frameworks and give you better SEO. This is compared to a traditional client-rendered React app (one made with Create React App, for example).

Our stack will consist of one of these React frameworks plus a transformer to convert our markdown content into HTML when our site is built. A good choice to transform our markdown content is the remark npm package.

If you want to make an even more impressive blog, with dynamic content, then you can consider using MDX. MDX is very similar to plain markdown, but it also allows you to include your own custom React components within the markdown.

To use MDX, you would use a package like next-mdx-remote if you're using Next.js. The plain mdx-js/mdx package also works great.

Stack To Use

• Next.js/Gatsby
• Markdown or MDX (remark or mdx-js/mdx)
• CMS (Contentful or Sanity)

Just a quick note: for each of these projects, I won't be talking about styling. I personally prefer using plain CSS in the form of TailwindCSS. You can head to Tailwind's website to see how to easily set that up for whatever React framework you're using.

E-commerce App

The next step up from our blog project is an e-commerce app.

It has a lot of similar features to our blog, including the fact that most of the content is going to be largely static and unchanging.

Once again, the data can be sourced locally or fetched from a CMS at build time. What's different about an e-commerce app is that it allows us to venture into working with a server of some sort.

Next.js E-commerce App

If you want your customers to purchase an item through Stripe, for example, you might want to set up a webhook that will receive an event from Stripe when your customer has purchased a particular item. This is essential for managing things like your product inventory.

To very easily write server-side code, you could use an API route so that you don't have to set up a complete Node.js project. This function would process different events that take place upon checkout or after checkout.

Additionally, if you don't want to have to touch any server-side code, you can avoid the stripe npm package entirely and just use Stripe checkout or a Stripe payment link.

Going forward, every project that we're going to touch on will involve a server of some sort. Most every application you use has a backend and a frontend. React will always be the frontend of our application but be aware that for any of these projects, you can very easily set up a server for your application to handle things like talking with a database when you have a framework like Next.js.

Next.js includes a special type of page called an API route, which allows you to do server-side things such as authentication, webhooks, reading and writing to a database, and much more. Additionally, we'll touch on some solutions like Firebase that don't require you to make a backend at all!

Stack To Use

• Next.js
• Stripe (using API Routes for webhooks)
• CMS (Contentful or Sanity to store products)

News/Community App (Reddit Clone)

A Reddit clone that is centered around sharing links or very simple posts is a good step up from our todo app.

Reddit clone, built with React

We are still creating, updating, and deleting data, but this time it's going to be saved in a database. We might allow users to add different types of content, like a video or a link or a short post. We can use Firebase for our project to get started, which will give us the Firestore database.

Our Firestore database will consist of a simple collection that will save all of the individual posts that a user has made. We can further develop it by allowing other users to add comments and likes to the posts.

An even more developed app would include authentication. Fortunately, Firebase Auth makes it very easy. We can also add likes to individual comments and replies to comments for our comment threads.

We could use any React framework for this. A good choice would be one using a Vite template. For our individual posts, we would need dynamic routes to fetch individual posts based off of their id. A good choice for that would be React Router.

Stack To Use

• React (bootstrapped with Vite)
• React Router (install react-router-dom)
• Firestore database (from Firebase)
• Firebase Auth

Chat App (Discord Clone)

To add to our Reddit app, we could make it into something like Discord by displaying messages in realtime.

Discord clone, built with React

If we change the posts into threads, we now have a chat app where it's an ongoing conversation.

Like the Reddit clone, users can still add any type of media that they like. A good touch would be adding link previews so when a user shares a link, such as a YouTube video, other users can get a little card that displays what is actually linked to with an image before the user clicks on it. There's a library called react-tiny-link that allows you to do that.

We can still use Firebase for this project. This is a good use case for the Firebase realtime database so that we don't need to refresh or reload the page to see new messages.

Additionally, we can add different roles to our users in Discord. In the real Discord app, there are moderators with greater controls over the other users. One example feature would be to add a ban feature to remove a user from a given channel or community.

Stack To Use

• React (bootstrapped with Vite)
• React Router (install react-router-dom)
• react-tiny-link
• Firebase realtime database
• Firebase Auth

Messenger App (WhatsApp Clone)

An offshoot of this type of realtime app would be a messenger-style app like that of WhatsApp.

WhatsApp clone, made with React

This app would be a little bit more limited in that conversations are usually done with one person, although they don't have to be. Instead of talking in channels you will have different options to talk with one or another person at a time.

A good touch would be to add notifications when someone messages you. This is another app example that would require realtime data functionality from your database. Firebase is always a good option for that.

If Firebase gets boring, you could try Supabase which is a very competitive alternative also with realtime database features, but which is backed by Postgres instead of Firestore.

Stack To Use

• React (bootstrapped with Vite)
• React Router (install react-router-dom)
• Supabase

Social Media App (Twitter Clone)

What if instead of having an app where one person talks directly with another person in a very confined space, you want the opposite, where anyone can interact with anyone!

A great example of this type of app would be Twitter.

Twitter clone, made with React

Twitter is an app that requires a feed as well as a trending page in a user's feed. The user will be able to see all of the posts from the people that they follow. But on the trending page, they will see all of the most popular posts across the entire website.

To be able to figure out which posts are the most popular, you will add the ability to like (heart) a given post as well as re-share it, which allows a post to be added to or associated with another user. Finally, you will want to allow users to directly reply to other posts (like Twitter's "quote tweet" feature).

And another fundamental feature that could be added to every app that we've covered up until this point is search. In our Twitter clone, users would likely want to be able to search for different users to follow as well as posts based on their content.

One downside to Firebase is that it does not have the best tools for search and it's not easy to perform queries that are based on a certain keyword. This is one instance in which Supabase would be a superior alternative.

Stack To Use

• React (bootstrapped with Vite)
• React Router (install react-router-dom)
• Supabase or Firebase

Video Sharing App (YouTube/TikTok Clone)

The last fun project in this list is a video sharing app such as YouTube or TikTok.

The two apps have very similar features, with YouTube primarily focusing on long form video content and Tiktok mainly consisting of super-short videos under a minute.

Both platforms utilize an infinite scroll feature, whether you're scrolling through suggested videos or recommended videos. TikTok itself is arguably just one big infinite-scrolling feed.

Tiktok clone, made with React

What would be hardest to implement about both these platforms is the algorithm. You could go very far on building an app that just relies on users following other users and having a homepage with the most popular videos. Your users would first be suggested videos from the people that they follow and then the popular videos on the site.

The most essential feature for both TikTok and YouTube is streaming video. To allow users to upload their own content you need a service that includes an upload API. Some good choices in this area are Cloudflare Stream, Video.js, or Mux.

All of these tools provide you with a video player as well as an API, which would handle uploading videos that could then be posted to the site.

I would personally build this app using my own server and database. I would probably choose Prisma as the ORM (object-relational mapped) to interact with the database which would be a MySQL database managed by Planetscale.

Stack To Use

• Next.js (with API Routes for interacting with database)
• The next-auth package (to add Google Auth, among other auth providers)
• Cloudflare stream or Video.js (as our video player and to host our videos)
• Prisma (as our ORM)
• MySQL (managed by Planetscale)

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

In this guide, I'm going to show you the most valuable resources and tips that I believe will help you learn React faster. You'll also save a lot of precious time and energy in the process.

Need to Learn JavaScript? You Can Learn it While Learning React

The question I'm most frequently asked by beginners looking to learn React is: "do I need to learn JavaScript?"

React is a JavaScript library and is often advertised as being "just JavaScript." This suggests that to really learn React you must know JavaScript first. The way I would characterize JavaScript's relationship to React is–the better you know JavaScript, the better a React developer you will become.

With that being said, you do not need to learn all of JavaScript first. Many JavaScript concepts can be learned at the same time you are learning React.

Here is a shortlist of some of the concepts in JavaScript that you will need to understand to be able to use React effectively. These include:

• Variables
• Arrays (and the .map() function)
• Objects
• JavaScript events
• Functions and arrow functions
• Scopes and closures
• Promises and async-await syntax.
• Basic error handling

These are all the JavaScript concepts that, in my experience, you truly need to know to work with React at any level.

You will encounter and learn more React concepts as you start building your own projects and looking at the code of others.

If you want a helpful guide to start learning these concepts and more today, I've written an extensive cheatsheet on freeCodeCamp that covers all the JavaScript that you need to be confident with React.

Looking for a Tutorial? Use the New React Docs

When you first begin your React learning path, your first question will likely be: "where do I learn all the React-related information I need?" You might be asking whether you should watch courses on YouTube or purchase a course on Udemy.

While there are great and extensive React courses across many different sites, the first and primary site you should rely on is the official React documentation site: reactjs.org.

What's very special about learning React in 2023 versus learning it in previous years is that in the past year, the React documentation that has been completely updated and improved. It is entirely up-to-date with the current React version, has tons of practical examples, and even interactive code sandboxes so that you can start learning react in the browser without having to create projects on your own machine.

If you ever want to spin up a new React project, you can do it very quickly in the browser using the link react.new. This will create a CodeSandbox with a complete React application with which you can mess around. It's much faster and easier to do that creating a project on your own computer.

You can find the new React documentation at beta.reactjs.org. In due time, you will be able to find it simply on reactjs.org.

beta.reactjs.org

Another big reason to use the new React documentation is that it is very beginner-friendly and will, in my opinion, allow you to learn concepts much faster than you would otherwise. If you have been intimidated to reading technical documentation in the past, I think you will be pleasantly surprised.

You Don't Need to Learn Class Components

If you are wondering whether you need to learn class components in 2023, you do not.

As you begin to learn React, you will hear about this thing called a class component which is based around a normal JavaScript class. This is no longer necessary to learn as a React developer, but it can still benefit you to learn it.

After the introduction of a feature called React hooks in 2018, React developers have moved over to using function components, which are made with JavaScript functions.

Class components are still a part of React and they are still used in production code in a number of instances (such as error boundaries). But just be aware that you do not need to learn them in order to be skilled at React.

In fact, I've rarely encountered them unless I'm looking at an older code base. Most of them have been migrated over to function components and React hooks already.

Do Yourself a Favor and Learn React Query

Any serious application requires data. Often the data that you need will exist outside your application, so you will need a strategy to fetch it and use in your project.

When you get to the point of fetching data I would highly recommend that you learn a library called React Query.

You can install React Query through the npm package @tanstack/react-query.

React Query, also called Tanstack Query

React Query has become the go-to library for fetching and managing external data in React applications.

What's the benefit of using React Query? On top of being a library so many React developers and companies are now familiar with and rely upon, it will benefit you greatly to learn React Query because it is arguably the most powerful way for you to fetch and manage external data in your React applications.

The greatest benefit of using React Query comes from that fact that is gives you a cache (a store) that lets you hold on to the result of each query, so you can "save" the data that you've fetched. Plus it has many tools to update that cache exactly the way you want.

It also features relevant information about the status of every query you make such as whether it is loading or it resulted in an error.

I would learn React Query after you are comfortable manually fetching data using tools like the Fetch API or Axios with the useEffect hook. Once you are, you will see the benefit of using React Query across all of your React projects.

You Don't Need to Learn Redux

If you've tried to learn React in years past, you might have gotten the impression that to learn React, you ultimately had to learn another library called Redux.

Redux is a library that helps us manage state in our React applications. You can think of state as any data that might change in a React app. Redux enables us to manage one piece of state (like, is our user logged in) across every part of our React application.

Redux is no longer required to learn like it was in years past. The first reason for this is the release of the React Context API. In many cases, React developers used Redux to just pass data around their application's components. This is a job that React Context can do for us.

Additionally, if you need to change or update state in many different parts of your app (which is a different requirement that simply reading your state), there are many competitors to Redux. Unlike Redux, these libraries do not require that you learn new concepts, such as reducers, actions, and so on.

Zustand - "Bearbone" state management

Some of these newer, "lighter" state management libraries include:

• Zustand
• Jotai
• Recoil

Once you get past the basics of React and begin building slightly larger applications beyond the standard todo app, you will understand the need for having a state management library. Redux is still a great library, but first look to a library with a simpler API such as Zustand.

Don't Necessarily Reach for Create React App

Once you are at the point of creating a React project on your own that lives on your computer, know that there are many ways of doing this.

Web development in general is moving more and more online – not every React project has to be made on your computer. In many cases you can spin up a brand new project in the browser using tools like CodeSandbox or StackBlitz entirely free of charge.

There will be a point, however, where you will need or want to create a React project on your local machine. It is easy to reach for a tool like Create React App, which allows you to make a React project by running a single command.

Create React App is still a great tool to make React projects. Just like with Redux, new alternatives have emerged give you all the conveniences of Create React, but in a smaller, often faster package.

Vite, an alternative to Create React App

The primary example of this is Vite. Vite is a build tool that allows you to spin up a new React project as well as many other kinds of JavaScript projects.

The benefit of using Vite the over Create React App is that it gives you a much faster development server.

To develop and make changes to your app, it must run on a development server. Create React Appl, by comparison, can take a relatively long time to start up and respond to changes in code that you make (this is called hot reloading). Vite provides a much faster experience in addition to requiring far fewer dependencies.

Another great alternative to Create React App is Next.js. Next is technically a React framework, which comes with many conveniences to make development a lot easier. It comes with its own router and data fetching tools, to name a couple.

The benefit of using a framework like Next.js is that you simply have to make fewer decisions when it comes to building your project. You need to pick far fewer dependencies upon which your project relies. Most everything that you need to build your React app comes built in to Next.js

With that being said, Next operates quite differently than normal React projects due to the fact that it's server-rendered by default. This can comes with its own problems and potential pitfalls to avoid. But if you're interested in building serious, production-ready React projects, Next is arguably the best choice.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

React is a JavaScript library that, unlike frameworks like Angular, leave us to making a lot of decisions on our own. You have to choose which tools and libraries you would like to power your React projects.

I want to share my top five choices with you for building React apps. I believe these will enable you to have the most fun experience by making your app development easier, faster and, most importantly, simpler.

Want to Build a Web App? Use Next.js

Probably the most important choice you can make in building a React app is whether to choose a React framework or not.

There are many different React frameworks on the market, such as Gatsby and Redwood.js, to name a couple.

Next.js, however, continues to be an equally great option for both full-stack applications and static sites.

nextjs.org, the official documentation site for Next.js

Need to build a full-stack app with a Node server? Next.js gives you API routes out of the box, which just lets you drop an API endpoint in your pages directory that will be executed as a serverless function.

Want to build a static site that pulls data from a CMS? No problem. Next gives you static-site generation to request that data at build time and exports your site as plain HTML, CSS, and JavaScript.

Next.js does the heavy lifting for all kind of essential tasks that you will encounter as you build your app.

For example, Next.js gives you tools to...

• Effortlessly integrate with TypeScript
• Preload custom fonts (@next/font)
• Handle simple and dynamic routing
• Server-side render your content
• Use environment variables with zero configuration
• Add custom redirects, rewrites, and headers

All of this and much more is available through the next npm library. The reason it makes good sense to build with Next is that there are many things that Next.js provides that you haven't even thought of yet.

Despite being a pretty comprehensive framework, Next.js isn't going to be the only dependency you need. For example, Next.js doesn't provide authentication. However, there are some great tools such as next-auth and Blitz.js that will give you easy authentication with Next.

If Next.js can't do something for you directly, you can still find lots of solutions at the Next.js website (plus great documentation) for almost everything your React app will need.

Need to Fetch Data? Use React Query

If you're doing any type of data fetching within your application, you should be using React Query.

Note that the library is called @tanstack/react-query for React Query version 4.

React Query is a very powerful library that allows us to fetch data or handle any type of asynchronous operation using a set of custom hooks, namely useQuery and useMutation.

React Query, also known as TanStack Query

The whole purpose of React query is to make data fetching (called querying) and updating data (mutating) an enjoyable and much easier experience than it was in the past.

Previously, you might have fetched data or done some sort of async action within the useEffect hook. The problem with doing so in most cases is that this operation will always be performed on component mount. That means if your component is loaded within a particular page, that operation will be performed every time the page loads.

import { useQuery } from '@tanstack/react-query'

function App() {
  const info = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
}

The downside is that you are most likely performing that operation far more than you need to. If you are fetching data and the data does not change, what's the point of fetching it again?

That's where React Query comes in. By giving us far greater control over our data fetching, we are able to specify when we want to fetch and refetch a query.

Additionally, if we're fetching data and it has changed, React Query will default to giving us the cached data first, which is then replaced with the new data. The benefit of this is that we don't have to see a loading spinner every time the data we are fetching changes.

In short, React Query gives us total control over the external data within our application and gives us a convenient cache with sensible defaults so that we have a far better experience for our users with far fewer loading spinners.

There's a bit of a learning curve with React query, but once you get used to it, you'll wonder how you ever built a React application without it.

Need to Manage State? Use Zustand

Managing state in the past usually required installing the library Redux once your project got to a certain size.

Redux is still a great library with the somewhat recent addition of Redux Toolkit. In most cases, however, Redux may be more sophisticated than what you need.

Zustand is a library that makes managing global state and React applications dead simple.

Zustand State Management library

All you have to do to manage a certain value is to import the zustand package, create a store (which is just a function call that accepts an object), place the property that you want to manage on that object, and use this store as a hook throughout your application. That's it!

import create from 'zustand'

const useCounterStore = create({ count: 0 })

Updating that state is as simple as using the internal set function. With it, we can make methods on this object which we can update any state value the way we like. It's really that simple.

import create from 'zustand'

const useCounterStore = create((set, get) => ({ 
  count: 0,
  increaseCount: get().count + 1 // increases count value by 1
}))

The great benefit of using Zustand is that it doesn't require any provider – you don't need to wrap any thing around your React component tree. Additionally, this state can be consumed within any React component, even outside of your React components entirely.

Zustand also gives you control over how your components update in response to a state change. If you don't mind your components re-rendering on every state change, you can grab the entire state:

const state = useCounterStore()

However, if you want to only update a component when one particular value changes, you can select the slice of state you want:

const count = useCounterStore((state) => state.count)

Zustand takes what is a fundamentally intimidating thing – managing shared state across many different components – and turns it into a very simple and even enjoyable experience due to its easy syntax and many conveniences.

Want Animations? Use Framer Motion

Perhaps the most fun part of any application is adding visual effects like transitions and animations. Framer Motion is makes the process of developing any kind of transition and animation easy.

Framer Motion (framer.com/docs)

Framer Motion is a package that allows you to do really impressive animations of almost any kind. Whether it is simple transitions, gestures, or complex layout animations framer has you covered.

The benefit of using Framer Motion is that it provides a very simple declarative API for how you want your animation to take place.

To use Framer, you just swap whatever JSX element you want to animate, such as a div with motion.div.

Once we use this special motion component, we can pass it a number of props which control animation. The only prop we really need, though, to animate our components is the animate prop.

<motion.div animate={{ x: 100 }} />

This props additionally allows us to set up what its initial position will be, how it will animate, and if it exits the DOM, what the exit animation will look like.

Framer gives us just the same controls as plain CSS animations, such the ability to delay the animation or choose its easing curve. Additionally, it gives a ton more options through custom hooks and components, as well as special values that we can set.

With Framer Motion, we can:

• Animate when components are reordered with the Reorder component
• Create scroll-linked animations with useScroll
• Animate exit animations with the AnimatePresence component
• Create spring-like animations with the useSpring hook
• Add drag controls with the useDragControls hook
• Animate elements in 3d space with the framer-motion-3d package

In a sentence, if you are looking to easily make your React app visually impressive, you owe it to yourself to check out Framer Motion.

Want to Build a Native App? Use Capacitor.js

It makes sense to consider using React native if you want to build a native app as a React developer. React Native is a great library for building iOS and Android applications with a very similar syntax to any traditional React web projects

There are some libraries which may allow you to share code between your React and React Native projects if you want to build a web and native app, such as React Native web.

However, there is really only one library that will enable you to build true cross platform React apps with a single code base. That library is Capacitor.js.

Capacitor.js

Capacitor.js is a drop-in solution for you to make your web app work on native platforms. In other words, it allows your app to be deployable on the app stores to run on devices natively, but does not require you to change any of your existing code if it has already been designed for the web.

To use Capacitor, you just need to install a couple of packages, @capacitor/core and @capacitor/cli. Capacitor will give you many native APIs to provide all the functionality that a standard native app would have such as push notifications or haptic feedback.

Capacitor allows you to turn your web app into a native app with all the functionality of a native app. Capacitor is one of those impressive solutions that can really change the limits of your application to be able to serve a completely different kind of user and exists in a completely different space if you so choose.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

In this guide, we will cover three of the best options for you as a React developer to quickly launch your app using a backend-as-a-service, all while saving time, effort, and costs.

Supabase

For many years, Firebase has dominated the backend-as-a-service space. In the past couple of years, however, Supabase has emerged as a great alternative.

Supabase homepage

The main benefit of Supabase is that it is open-source. In short, Supabase allows you to take your code and deploy it wherever you like. You can build your app, deploy it to Supabase's servers, or you can deploy it to your own hosting service later on.

The great benefit of this is that it helps you avoid vendor lock-in. The problem of vendor lock-in emerges if you run into a situation where want to migrate away from the service you are using. For example, if the service's pricing becomes too high or you have fundamental problems with using the service. The problem is that you are "locked-in" and it may be very hard to go elsewhere.

As you'll see with the other two options in this list (Firebase and AWS Amplify), they have some degree of vendor lock-in. In short, it's not easy to migrate away from them.

Supabase, on the other hand, gives you the flexibility to host your project where you like without a difficult migration process.

Supabase gives you a Postgres database and it is compatible with just about every React framework including many other non-React JavaScript libraries.

Supabase-supported JavaScript libraries

To start using Supabase with your React app, you will install the supabase-js npm package.

To actually start your Supabase project itself and create your database, you will sign in to Supabase.com. The free tier will give you all of the major features that you need, including a free database, as well as built-in authentication.

Supabase Authentication

Supabase authentication includes tons of major social providers like Google and Facebook.

They also offer built-in storage which allows you to store any type of file. This feature would be essential if your application features video or image uploads.

Supabase also supports realtime data via WebSockets, a feature with both Firebase and AWS Amplify offer, as well.

Supabase storage and functions

Supabase offers edge functions, which enable you to write custom code that interacts with with your database. These edge functions may be useful if you want to write some custom logic that the Supabase npm packages don't support or if you want to do something on the server, such as sending an email.

One area where Supabase has an advantage over Firebase is their full text search feature.

Supabase full text search

If you want to provide search functionality to your app based off of what's stored in your database, this is something that Firebase's Cloud Firestore database simply does not provide.

Supabase's free plan can take you a long way, but if you would like database backups, plus the ability to store additional data, database or storage beyond the free limits you'll need to upgrade to their Pro Plan (which is $25 per month per project). Unlike Firebase and AWS, there is a big jump in pricing if you want something more than the free limit provides.

With that being said, the Supabase pro tier is very generous. When you're ready to push your app to the world, it will supply virtually everything that you need from a backend for just $25 a month.

Firebase

Firebase cannot be beat in terms of its longevity and what it offers.

Firebase has been around for 10 years at this point and offers the most products out of any backend solution.

It's a very sophisticated all-in-one service, with its own NoSQL database storage, authentication with every kind of social provider imaginable, along with some features that Supabase does not have, such as Crash Analytics, performance insights, A/B testing, push notifications and much more.

If you really want the most complete option, you should seriously consider Firebase.

Firebase homepage and services

Firebase is similarly easy to get set up with. You can create an account a many free projects at Firebase's website.

To create a database or dedicated storage requires only the click of a button. Firebase is similarly unmatched at providing a very convenient dashboard to interface with all of your individual products, such as your database.

Firebase Cloud Firestore

All these benefits of Firebase can be a potential downside. Firebase truly offers so much that it can be a little bit overwhelming to figure out what you should use and what you shouldn't to get up and running.

My recommendation for your React app is to first use the Cloud FireStore database, authentication and storage, and add on the Firebase functions service if you need to provide custom logic on your server. Only then do you need to look at their other options.

Unlike Supabase, but similar to AWS Amplify, Firebase includes built-in hosting. There is no need to look elsewhere for a hosting service or any other custom solution.

The real downside of Firebase, as I mentioned earlier, is their vendor lock-in. Once you build your app with Firebase, it may be quite difficult to migrate to another platform. With that being said, many many companies have built their entire livelihood on Firebase.

The cost of using Firebase is a bit more challenging to calculate. Fortunately, Firebase provides a convenient calculator that will give you a much better idea, based off of your app's resource usage.

Firebase's plan calculator

Their plan is generous for the free user and you can start using virtually every service for free. You will only have to start paying once you exceed those limits.

Firebase is the closest to an all-in-one service to serve as the backend of your app. If you are intent on building your app quickly, with as little time spent on choosing and managing services as possible, you can't go wrong with Firebase.

AWS Amplify

The last contender is AWS amplify, which is often overlooked, but shouldn't be.

AWS is notoriously difficult to navigate at times, but AWS Amplify was made as an exception to this rule. AWS Amplify not only provides an impressive database, storage, plus realtime experience for JavaScript developers, but comes with a component library, Amplify UI.

AWS Amplify and Amplify UI

For example, instead of having to create your own authentication component, Amplify UI provides its own for you out of the box.

In short, AWS Amplify gives you virtually all of the tools of Firebase, along with premium, pre-made components that are already integrated with your AWS backend.

One additional benefit of using AWS Amplify over Firebase and Supabase is that it's most likely going to be the least expensive overall.

AWS pricing is one of the lowest when it comes to infrastructure businesses. In many cases, AWS will give you startup credits if you're using AWS for the first time. If so, the cost of your app may be next to nothing.

Amplify Pricing

The large caveat to using AWS Amplify is that it relies on GraphQL. If you're not familiar with GraphQL this may be a sticking point for you. It does have a REST API alternative. The REST option, however, is not nearly as featureful and doesn't provide the same bonuses, such as realtime data with subscriptions.

Another downside to using AWS amplify is that you can write custom resolvers to interact with your database and other AWS services, but they are not written in JavaScript. Instead, the Amplify console uses what's known as the "Apache Velocity Template Language" or VTL. Be aware that writing custom server code could be quite difficult if you need to write custom business logic.

AWS Amplify has an enormous offering of integrated services and allows you to tap into so many AWS products, such as DynamoDB, S3 and ElasticSearch. It has been built to support every imaginable developer need you might have. It goes so far as to enable you to do things like like audio-to-text transcription and extended reality (XR) integrations.

Amplify is definitely worth checking out if you're looking to find the most cost effective service that does not sacrifice any features that Firebase has. Amplify is also a good choice if you're comfortable with GraphQL and know the AWS ecosystem well.

Thanks for reading!

Hopefully you're now well-equipped to choose the best backend as a service tool for your React project.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started