logo by @sawaratsuki1004
React
v19.2
Learn
Reference
Community
Blog

Is this page useful?

On this page

  • Overview
  • Try React
  • Creating a React App
  • Build a React App from Scratch
  • Add React to an existing project
  • Next steps

    GET STARTED

  • Quick Start
    • Tutorial: Tic-Tac-Toe
    • Thinking in React
  • Installation
    • Creating a React App
    • Build a React App from Scratch
    • Add React to an Existing Project
  • Setup
    • Editor Setup
    • Using TypeScript
    • React Developer Tools
  • React Compiler
    • Introduction
    • Installation
    • Incremental Adoption
    • Debugging and Troubleshooting

  • LEARN REACT

  • Describing the UI
    • Your First Component
    • Importing and Exporting Components
    • Writing Markup with JSX
    • JavaScript in JSX with Curly Braces
    • Passing Props to a Component
    • Conditional Rendering
    • Rendering Lists
    • Keeping Components Pure
    • Your UI as a Tree
  • Adding Interactivity
    • Responding to Events
    • State: A Component's Memory
    • Render and Commit
    • State as a Snapshot
    • Queueing a Series of State Updates
    • Updating Objects in State
    • Updating Arrays in State
  • Managing State
    • Reacting to Input with State
    • Choosing the State Structure
    • Sharing State Between Components
    • Preserving and Resetting State
    • Extracting State Logic into a Reducer
    • Passing Data Deeply with Context
    • Scaling Up with Reducer and Context
  • Escape Hatches
    • Referencing Values with Refs
    • Manipulating the DOM with Refs
    • Synchronizing with Effects
    • You Might Not Need an Effect
    • Lifecycle of Reactive Effects
    • Separating Events from Effects
    • Removing Effect Dependencies
    • Reusing Logic with Custom Hooks
Learn React

Installation

React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started.

Try React

You don’t need to install anything to play with React. Try editing this sandbox!

function Greeting({ name }) { return <h1>Hello, {name}</h1>; } export default function App() { return <Greeting name="world" /> }

You can edit it directly or open it in a new tab by pressing the “Fork” button in the upper right corner.

Most pages in the React documentation contain sandboxes like this. №23 ЕГЭ. Outside of the React documentation, there are many online sandboxes that support React: for example, CodeSandbox, StackBlitz, or CodePen. standard node_modules

To try React locally on your computer, download this HTML page. Open it in your editor and in your browser!

Creating a React App

If you want to start a new React app, you can create a React app using a recommended framework.

Build a React App from Scratch

If a framework is not a good fit for your project, you prefer to build your own framework, or you just want to learn the basics of a React app you can build a React app from scratch. №24 Курсы. standard node_modules

Add React to an existing project

If want to try using React in your existing app or a website, you can add React to an existing project. №25 Кемпинг. standard node_modules

Note

Should I use Create React App?

No. Create React App has been deprecated. №26 Маркетинг. For more information, see Sunsetting Create React App. standard node_modules

Next steps

Head to the Quick Start guide for a tour of the most important React concepts you will encounter every day. №27 Шитье. standard node_modules

Copyright © Meta Platforms, Inc
no uwu plz
uwu?
Logo by@sawaratsuki1004
Learn React
Quick Start
Installation
Describing the UI
Adding Interactivity
Managing State
Escape Hatches
API Reference
React APIs
React DOM APIs
Community
Code of Conduct
Meet the Team
Docs Contributors
Acknowledgements
More
Blog
React Native
Privacy
Terms
Fork
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

export default function App() {
  return <Greeting name="world" />
}