Aurelian C.

react.dev

The official React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis.

React Resume (personal project)

My personal website with a lot of React explanations and articles.

reactrouter.com

React Router enables "client side routing".

React Router v6.4.5, redirect on page load

React Router URLs don't work when refreshing or writing manually

TanStack Query

TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.

TanStack Query - Devtools

When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!

Practical React Query

React Query meets React Router

React data fetching

React Query refetches despite the fact that staleTime is set to Infinity

Invalidate queries doesn't work

Redux

Redux is a predictable state container for JavaScript apps.

Redux Toolkit

The official, opinionated, batteries-included toolset for efficient Redux development.

Redux - Not Dead Yet!

MobX

Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)

The new wave of React state management

React Hook Form

React Hook Form is only about handling the form submission and form errors. It doesn't give you any prebuilt components.

Formik

Build forms in React, without the tears.

DnD Kit

A lightweight, performant, accessible and extensible drag & drop toolkit for React.

React Hot Toast

Add beautiful notifications to your React app with react-hot-toast.

React Helmet

This reusable React component will manage all of your changes to the document head.

React OAuth2 | Google

Simple yet flexible JavaScript charting library for the modern web.

Framer Motion

Complete documentation of the Framer Motion animation library. A production-ready motion library for React.

Material UI

MUI offers a comprehensive suite of free UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

Ant Design

Help designers/developers building beautiful products more flexible and working with happiness.

React Icons

Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Recharts

A composable charting library built on React components.

Chart.js

Simple yet flexible JavaScript charting library for the modern web.

Reusable React error boundary component

Reusable React error boundary component. Supports all React renderers (including React DOM and React Native).

Detect clicks outside of specific component with useClickAway

use-global-hook

Easy state management for React using hooks.

Creating a Custom useForm Hook

In this tutorial, we will learn how we can create a custom hook to manage forms in React without relying on any library.

Styled components library

Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

The styled-components Happy Path

A Thorough Analysis of CSS-in-JS

Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

create-react-app

Create React apps with no build configuration.

Start a New React Project - react.dev

If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. Frameworks provide features that most apps and sites eventually need, including routing, data fetching, and generating HTML.

React Developer Tools Chrome Extension

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

HTML to JSX

CodeSandBox

Angular vs React vs Vue

Tao of React - Software Design, Architecture & Best Practices

Writing Resilient Components

Typechecking With PropTypes

A (Mostly) Complete Guide to React Rendering Behavior

A Visual Guide to React Rendering - It Always Re-renders

Inside Fiber: in-depth overview of the new reconciliation algorithm in React

A Cartoon Intro to Fiber

What Is React Fiber?

The React and React Native Event System Explained: A Harmonious Coexistence

Under the hood of React's hooks system

Why Do React Hooks Rely on Call Order?

So you think you know everything about React refs

A Visual Guide to React Rendering - useMemo

React as a UI Runtime

A Complete Guide to useEffect

useEffect sometimes fires before paint

Making setInterval Declarative with React Hooks

Picking the right React component pattern

STOP using useState, instead put state in URL (in React & Next.js)

Speed Up Your React Apps With Code Splitting (Dynamic Imports)

Learn useEffect In 13 Minutes

Build a Complete React Admin Dashboard App

How to Use SVG in React