React Guide

React is a JavaScript library for building user interfaces out of small, reusable components. You describe what the screen should look like for a given state, and React updates the page when that state changes. That one idea explains most of what you need to learn: components, props, state, and the hooks (such as useState and useEffect) that let a function component remember things and react to changes.

A sensible order is to get comfortable with plain JavaScript first, build a few small components, learn how data flows down through props and how state lives in the nearest common parent, and only then add the surrounding ecosystem: routing, forms, data fetching, a state manager when local state gets awkward, and a framework such as Next.js when you need server rendering. Most of the frustration people report with React comes from adding tools before the problem that needs them has shown up.

The reading list below follows the same order. Start with the fundamentals, move on to building real interface pieces, then look at state management, tooling and testing, and finish with full-stack apps. The articles are written as step-by-step tutorials, so they work best if you follow along in an editor. Check the publish date on older posts: library versions move quickly and some APIs have changed since they were written.

Reading list

Fundamentals and hooks

Start here to get a feel for components and hooks, and for keeping a React app fast.

• Exploring the Power of Basic React Hooks
• Mastering useEffect: The Ultimate React Hook Guide
• Mastering React Components: The Ultimate Reference Guide
• 5 Ways to Optimize Large Lists in React with Examples
• Boost React App Performance: Integrate Web Workers with Comlink

Building interface pieces

Hands-on tutorials for the components almost every app needs.

• Build a Custom React Toast Component from Scratch
• Build a Multilevel Dropdown Menu in React: A Step-by-Step Guide
• Accessible Dropdown Menu in React with TypeScript and Tailwind CSS
• Build Dynamic UIs: How to Create Collapsible React Components with react-collapsed
• Build Interactive UIs: Create Draggable Components with React-Draggable
• Drag-and-Drop Made Easy: A Guide to React Beautiful DND
• Master React Table: The Ultimate Guide with TanStack Updates
• Create Stunning React Charts with Nivo
• Mastering Dark Mode in React: A Comprehensive Guide

State management

When component state is no longer enough, these cover MobX and Redux.

• Mastering React with MobX: A Beginner’s Guide
• Mastering Enterprise State Management with MobX
• Type-Safe React Redux: A Step-by-Step Guide
• Simplifying State Management in Next.js with Redux: A Step-by-Step Guide

Tooling and testing

Testing approaches, cleaner imports and component-driven development.

• React Testing Showdown: Jest vs Enzyme vs Cypress
• Streamline Your Code: Mastering Path Aliases in React and TypeScript
• Master Component-Driven Development with React’s Ultimate Documentation Tool

Next.js and full-stack apps

Larger projects that combine React with a framework, a database or an authentication service.

• Next.JS for Busy Devs: A Practical, Step-by-Step Guide
• Vercel and Next.js: Worth It?
• Getting Started with Next.js: Building a Simple Application with PostgreSQL Integration
• Secure Your Next.js App with Auth0 Authentication
• Next.js Firebase Authentication: A Step-by-Step Guide
• Scalable Next.js Architecture: A Step-by-Step Guide
• Build an Ecommerce Store with Next.js and Shopify: A Step-by-Step Guide

Want more? Browse every article in the React category.