Introducing react.dev

📰 Hacker News · clessg

Learn about the new React documentation site, react.dev, and how to get started with modern React using function components and Hooks.

beginner Published 16 Mar 2023
Action Steps
  1. Visit the new React documentation site at react.dev
  2. Explore the Learn section, which provides a self-paced course to learn React from scratch
  3. Check out the API Reference section for details and usage examples for every React API
  4. Start with the Quick Start page to get a short introductory tour of React
  5. Use the interactive examples and challenges to practice and reinforce your learning
Who Needs to Know This

Frontend developers and designers who use React can benefit from the new documentation site, which provides interactive examples and a self-paced course to learn React from scratch.

Key Insight

💡 The new React documentation site teaches modern React with function components and Hooks from the beginning, making it easier for new learners to get started.

Share This
🚀 Introducing react.dev, the new home for React documentation! 📚 Learn modern React with interactive examples and a self-paced course. #React #JavaScript

Key Takeaways

Learn about the new React documentation site, react.dev, and how to get started with modern React using function components and Hooks.

Full Article

Title: Introducing react.dev – React

URL Source: https://react.dev/blog/2023/03/16/introducing-react-dev

Markdown Content:
[![Image 1: logo by @sawaratsuki1004](https://react.dev/_next/image?url=%2Fimages%2Fuwu.png&w=128&q=75)](https://react.dev/)

[React](https://react.dev/)

[v 19.2](https://react.dev/versions)

Search⌘Ctrl K

[Learn](https://react.dev/learn)

[Reference](https://react.dev/reference/react)

[Community](https://react.dev/community)

[Blog](https://react.dev/blog)

[](https://react.dev/community/translations)

[](https://github.com/facebook/react/releases)

[Blog](https://react.dev/blog)

Copy page Copy

# Introducing react.dev[](https://react.dev/blog/2023/03/16/introducing-react-dev#undefined "Link for this heading")

March 16, 2023 by [Dan Abramov](https://bsky.app/profile/danabra.mov) and [Rachel Nabors](https://twitter.com/rachelnabors)

* * *

Today we are thrilled to launch [react.dev](https://react.dev/), the new home for React and its documentation. In this post, we would like to give you a tour of the new site.

* * *

## tl;dr [](https://react.dev/blog/2023/03/16/introducing-react-dev#tldr "Link for tl;dr ")

* The new React site ([react.dev](https://react.dev/)) teaches modern React with function components and Hooks.
* We’ve included diagrams, illustrations, challenges, and over 600 new interactive examples.
* The previous React documentation site has now moved to [legacy.reactjs.org](https://legacy.reactjs.org/).

## New site, new domain, new homepage [](https://react.dev/blog/2023/03/16/introducing-react-dev#new-site-new-domain-new-homepage "Link for New site, new domain, new homepage ")

First, a little bit of housekeeping.

To celebrate the launch of the new docs and, more importantly, to clearly separate the old and the new content, we’ve moved to the shorter [react.dev](https://react.dev/) domain. The old [reactjs.org](https://reactjs.org/) domain will now redirect here.

The old React docs are now archived at [legacy.reactjs.org](https://legacy.reactjs.org/). All existing links to the old content will automatically redirect there to avoid “breaking the web”, but the legacy site will not get many more updates.

Believe it or not, React will soon be ten years old. In JavaScript years, it’s like a whole century! We’ve [refreshed the React homepage](https://react.dev/) to reflect why we think React is a great way to create user interfaces today, and updated the getting started guides to more prominently mention modern React-based frameworks.

If you haven’t seen the new homepage yet, check it out!

## Going all-in on modern React with Hooks [](https://react.dev/blog/2023/03/16/introducing-react-dev#going-all-in-on-modern-react-with-hooks "Link for Going all-in on modern React with Hooks ")

When we released React Hooks in 2018, the Hooks docs assumed the reader is familiar with class components. This helped the community adopt Hooks very swiftly, but after a while the old docs failed to serve the new readers. New readers had to learn React twice: once with class components and then once again with Hooks.

**The new docs teach React with Hooks from the beginning.** The docs are divided in two main sections:

* **[Learn React](https://react.dev/learn)** is a self-paced course that teaches React from scratch.
* **[API Reference](https://react.dev/reference)** provides the details and usage examples for every React API.

Let’s have a closer look at what you can find in each section.

### Note

There are still a few rare class component use cases that do not yet have a Hook-based equivalent. Class components remain supported, and are documented in the [Legacy API](https://react.dev/reference/react/legacy) section of the new site.

## Quick start [](https://react.dev/blog/2023/03/16/introducing-react-dev#quick-start "Link for Quick start ")

The Learn section begins with the [Quick Start](https://react.dev/learn) page. It is a short introductory tour of React. It introduces the syntax for
Read full article → ← Back to Reads

Related Videos

Best Free UI Components Library Every Web Developer Should Be Using
Best Free UI Components Library Every Web Developer Should Be Using
Alamin
Best Free Animated Icons Library Every Designer Should Know About
Best Free Animated Icons Library Every Designer Should Know About
Alamin
Google Stitch Full Tutorial: Free AI UI Design Tool for Websites & Apps
Google Stitch Full Tutorial: Free AI UI Design Tool for Websites & Apps
DolphyAI
Add Color Outline Borders to Images in Canva: Step by Step Tutorial for Beginners
Add Color Outline Borders to Images in Canva: Step by Step Tutorial for Beginners
Mariah Magazine
How to Build a Doctor Appointment Booking Website in WordPress | CLDoctor Theme
How to Build a Doctor Appointment Booking Website in WordPress | CLDoctor Theme
Quick Tips - Web Desiign & Ai Tools
Design Thinking
Design Thinking
Agile Digest