Skip to content

Setup

React integrates with tools like editors, TypeScript, browser extensions, and compilers. This section will help you get your environment set up.

Editor Setup

See our recommended editors and learn how to set them up to work with React.

Using TypeScript

TypeScript is a popular way to add type definitions to JavaScript codebases. Learn how to integrate TypeScript into your React projects.

React Developer Tools

React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it here.

React Compiler

React Compiler is a tool that automatically optimizes your React app. Learn more.

Next steps

Head to the Quick Start guide for a tour of the most important React concepts you will encounter every day.

React

Learn

Quick Start Add React to an Existing Project Adding Interactivity Build a React app from Scratch Choosing the State Structure Conditional Rendering Creating a React App Describing the UI Editor Setup Escape Hatches Extracting State Logic into a Reducer Importing and Exporting Components Installation JavaScript in JSX with Curly Braces Keeping Components Pure Lifecycle of Reactive Effects Managing State Manipulating the DOM with Refs Passing Data Deeply with Context Passing Props to a Component Preserving and Resetting State Queueing a Series of State Updates

react-compiler

React Compiler Debugging and Troubleshooting Incremental Adoption Installation Introduction

React Developer Tools Reacting to Input with State Referencing Values with Refs Removing Effect Dependencies Render and Commit Rendering Lists Responding to Events Reusing Logic with Custom Hooks RSC Sandbox Test Scaling Up with Reducer and Context Separating Events from Effects Setup Sharing State Between Components State: A Component's Memory State as a Snapshot Synchronizing with Effects Thinking in React Using TypeScript Understanding Your UI as a Tree Updating Arrays in State Updating Objects in State Writing Markup with JSX You Might Not Need an Effect Your First Component

Reference

dev-tools

React Performance tracks

eslint-plugin-react-hooks

eslint-plugin-react-hooks

lints

component-hook-factories config error-boundaries exhaustive-deps gating globals immutability incompatible-library preserve-manual-memoization purity refs rules-of-hooks set-state-in-effect set-state-in-render static-components unsupported-syntax use-memo

react-compiler

compilationMode Compiling Libraries Configuration

directives

Directives use memo use no memo

gating logger panicThreshold target

rsc

Directives Server Components Server Functions 'use client''use server'

rules

Rules of React Components and Hooks must be pure React calls Components and Hooks Rules of Hooks