Introducing react.dev – React
March 16, 2023 by Dan Abramov and Rachel Nabors
At the moment we’re thrilled to launch react.dev, the brand new house for React and its documentation. On this publish, we want to provide you with a tour of the brand new web site.
tl;dr
- The brand new React web site (react.dev) teaches trendy React with perform elements and Hooks.
- We’ve included diagrams, illustrations, challenges, and over 600 new interactive examples.
- The earlier React documentation web site has now moved to legacy.reactjs.org.
New web site, new area, new homepage
First, a bit of little bit of housekeeping.
To have fun the launch of the brand new docs and, extra importantly, to obviously separate the outdated and the brand new content material, we’ve moved to the shorter react.dev area. The outdated reactjs.org area will now redirect right here.
The outdated React docs are actually archived at legacy.reactjs.org. All current hyperlinks to the outdated content material will routinely redirect there to keep away from “breaking the net”, however the legacy web site won’t get many extra updates.
Consider it or not, React will quickly be ten years outdated. In JavaScript years, it’s like an entire century! We’ve refreshed the React homepage to mirror why we predict React is an effective way to create person interfaces at this time, and up to date the getting began guides to extra prominently point out trendy React-based frameworks.
When you haven’t seen the brand new homepage but, test it out!
Going all-in on trendy React with Hooks
Once we launched React Hooks in 2018, the Hooks docs assumed the reader is acquainted with class elements. This helped the group undertake Hooks very swiftly, however after some time the outdated docs did not serve the brand new readers. New readers needed to study React twice: as soon as with class elements after which as soon as once more with Hooks.
The brand new docs educate React with Hooks from the start. The docs are divided in two principal sections:
- Learn React is a self-paced course that teaches React from scratch.
- API Reference supplies the small print and utilization examples for each React API.
Let’s have a more in-depth take a look at what you could find in every part.
Fast begin
The Be taught part begins with the Quick Start web page. It’s a brief introductory tour of React. It introduces the syntax for ideas like elements, props, and state, however doesn’t go into a lot element on learn how to use them.
When you wish to study by doing, we advocate trying out the Tic-Tac-Toe Tutorial subsequent. It walks you thru constructing a bit of sport with React, whereas instructing the talents you’ll use daily. Right here’s what you’ll construct:
import { useState } from 'react'; perform Sq.({ worth, onSquareClick }) { return ( <button className="sq." onClick={onSquareClick}> {worth} </button> ); } perform Board({ xIsNext, squares, onPlay }) { perform handleClick(i) { if (calculateWinner(squares) || squares[i]) { return; } const nextSquares = squares.slice(); if (xIsNext) { nextSquares[i] = 'X'; } else { nextSquares[i] = 'O'; } onPlay(nextSquares); } const winner = calculateWinner(squares); let standing; if (winner) { standing = 'Winner: ' + winner; } else { standing = 'Subsequent participant: ' + (xIsNext ? 'X' : 'O'); } return ( <> <div className="standing">{standing}</div> <div className="board-row"> <Sq. worth={squares[0]} onSquareClick={() => handleClick(0)} /> <Sq. worth={squares[1]} onSquareClick={() => handleClick(1)} /> <Sq. worth={squares[2]} onSquareClick={() => handleClick(2)} /> </div> <div className="board-row"> <Sq. worth={squares[3]} onSquareClick={() => handleClick(3)} /> <Sq. worth={squares[4]} onSquareClick={() => handleClick(4)} /> <Sq. worth={squares[5]} onSquareClick={() => handleClick(5)} /> </div> <div className="board-row"> <Sq. worth={squares[6]} onSquareClick={() => handleClick(6)} /> <Sq. worth={squares[7]} onSquareClick={() => handleClick(7)} /> <Sq. worth={squares[8]} onSquareClick={() => handleClick(8)} /> </div> </> ); } export default perform Sport() { const [history, setHistory] = useState([Array(9).fill(null)]); const [currentMove, setCurrentMove] = useState(0); const xIsNext = currentMove % 2 === 0; const currentSquares = historical past[currentMove]; perform handlePlay(nextSquares) { const nextHistory = [...history.slice(0, currentMove + 1), nextSquares]; setHistory(nextHistory); setCurrentMove(nextHistory.size - 1); } perform jumpTo(nextMove) { setCurrentMove(nextMove); } const strikes = historical past.map((squares, transfer) => { let description; if (transfer > 0) { description = 'Go to maneuver #' + transfer; } else { description = 'Go to sport begin'; } return ( <li key={transfer}> <button onClick={() => jumpTo(transfer)}>{description}</button> </li> ); }); return ( <div className="sport"> <div className="game-board"> <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} /> </div> <div className="game-info"> <ol>{strikes}</ol> </div> </div> ); } perform calculateWinner(squares) { const strains = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ]; for (let i = 0; i < strains.size; i++) { const [a, b, c] = strains[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } } return null; }
We’d additionally like to focus on Thinking in React—that’s the tutorial that made React “click on” for many people. We’ve up to date each of those basic tutorials to make use of perform elements and Hooks, in order that they’re pretty much as good as new.
Be taught React step-by-step
We’d like everybody on this planet to have an equal alternative to study React without cost on their very own.
Because of this the Be taught part is organized like a self-paced course break up into chapters. The primary two chapters describe the basics of React. When you’re new to React, or need to refresh it in your reminiscence, begin right here:
The following two chapters are extra superior, and will provide you with a deeper perception into the trickier elements:
- Managing State teaches learn how to manage your logic as your app grows in complexity.
- Escape Hatches teaches how one can “step outdoors” React, and when it makes most sense to take action.
Each chapter consists of a number of associated pages. Most of those pages educate a selected talent or a way—for instance, Writing Markup with JSX, Updating Objects in State, or Sharing State Between Components. Among the pages deal with explaining an thought—like Render and Commit, or State as a Snapshot. And there are a number of, like You Might Not Need an Effect, that share our strategies primarily based on what we’ve discovered over these years.
You don’t should learn these chapters as a sequence. Who has the time for this?! However you could possibly. Pages within the Be taught part solely depend on ideas launched by the sooner pages. If you wish to learn it like a e-book, go for it!
Test your understanding with challenges
Most pages within the Be taught part finish with a number of challenges to examine your understanding. For instance, listed here are a number of challenges from the web page about Conditional Rendering.
You don’t have to resolve them proper now! Until you actually need to.
Problem 1 of 2:
Present an icon for incomplete gadgets with ? :
Use the conditional operator (cond ? a : b) to render a ❌ if isPacked isn’t true.
perform Merchandise({ identify, isPacked }) { return ( <li className="merchandise"> {identify} {isPacked && '✔'} </li> ); } export default perform PackingList() { return ( <part> <h1>Sally Journey's Packing Listing</h1> <ul> <Merchandise isPacked={true} identify="Area swimsuit" /> <Merchandise isPacked={true} identify="Helmet with a golden leaf" /> <Merchandise isPacked={false} identify="Photograph of Tam" /> </ul> </part> ); }
Discover the “Present resolution” button within the left backside nook. It’s useful if you wish to examine your self!
Construct an instinct with diagrams and illustrations
Once we couldn’t determine learn how to clarify one thing with code and phrases alone, we’ve added diagrams that assist present some instinct. For instance, right here is likely one of the diagrams from Preserving and Resetting State:
When part modifications to div, the part is deleted and the brand new div is added
You’ll additionally see some illustrations all through the docs—right here’s one of many browser painting the screen:
We’ve confirmed with the browser distributors that this depiction is 100% scientifically correct.
A brand new, detailed API Reference
Within the API Reference, each React API now has a devoted web page. This consists of all types of APIs:
You’ll discover that each API web page is break up into a minimum of two segments: Reference and Utilization.
Reference describes the formal API signature by itemizing its arguments and return values. It’s concise, however it might probably really feel a bit summary in the event you’re not acquainted with that API. It describes what an API does, however not learn how to use it.
Usage reveals why and the way you’d use this API in apply, like a colleague or a buddy would possibly clarify. It reveals the canonical situations for a way every API was meant for use by the React staff. We’ve added color-coded snippets, examples of utilizing totally different APIs collectively, and recipes you can copy and paste from:
Fundamental useState examples
Instance 1 of 4:
Counter (quantity)
On this instance, the rely state variable holds a quantity. Clicking the button increments it.
import { useState } from 'react'; export default perform Counter() { const [count, setCount] = useState(0); perform handleClick() { setCount(rely + 1); } return ( <button onClick={handleClick}> You pressed me {rely} instances </button> ); }
Some API pages additionally embrace Troubleshooting (for widespread issues) and Alternatives (for deprecated APIs).
We hope that this method will make the API reference helpful not solely as a strategy to search for an argument, however as a strategy to see all of the various things you are able to do with any given API—and the way it connects to the opposite ones.
What’s subsequent?
That’s a wrap for our little tour! Take a look across the new web site, see what you want or don’t like, and preserve the suggestions coming within the anonymous survey or in our issue tracker.
We acknowledge this mission has taken a very long time to ship. We wished to take care of a top quality bar that the React group deserves. Whereas writing these docs and creating the entire examples, we discovered errors in a few of our personal explanations, bugs in React, and even gaps within the React design that we are actually working to deal with. We hope that the brand new documentation will assist us maintain React itself to a better bar sooner or later.
We’ve heard a lot of your requests to broaden the content material and performance of the web site, for instance:
- Offering a TypeScript model for all examples;
- Creating the up to date efficiency, testing, and accessibility guides;
- Documenting React Server Elements independently from the frameworks that help them;
- Working with our worldwide group to get the brand new docs translated;
- Including lacking options to the brand new web site (for instance, RSS for this weblog).
Now that react.dev is out, we will shift our focus from “catching up” with the third-party React instructional assets to including new data and additional bettering our new web site.
We predict there’s by no means been a greater time to study React.
Who labored on this?
On the React staff, Rachel Nabors led the mission (and offered the illustrations), and Dan Abramov designed the curriculum. They co-authored many of the content material collectively as properly.
In fact, no mission this huge occurs in isolation. We now have lots of people to thank!
Sylwia Vargas overhauled our examples to transcend “foo/bar/baz” and kittens, and have scientists, artists and cities from all over the world. Maggie Appleton turned our doodles into a transparent diagram system.
Due to David McCabe, Sophie Alpert, Rick Hanlon, Andrew Clark, and Matt Carroll for added writing contributions. We’d additionally wish to thank Natalia Tepluhina and Sebastian Markbåge for his or her concepts and suggestions.
Due to Dan Lebowitz for the positioning design and Razvan Gradinar for the sandbox design.
On the event entrance, because of Jared Palmer for prototype improvement. Due to Dane Grant and Dustin Goodman from ThisDotLabs for his or her help on UI improvement. Due to Ives van Hoorne, Alex Moldovan, Jasper De Moor, and Danilo Woznica from CodeSandbox for his or her work with sandbox integration. Due to Rick Hanlon for spot improvement and design work, finessing our colours and finer particulars. Due to Harish Kumar and Luna Ruan for including new options to the positioning and serving to keep it.
Large because of the oldsters who volunteered their time to take part within the alpha and beta testing program. Your enthusiasm and invaluable suggestions helped us form these docs. A particular shout out to our beta tester, Debbie O’Brien, who gave a discuss her expertise utilizing the React docs at React Conf 2021.
Lastly, because of the React group for being the inspiration behind this effort. You’re the purpose we do that, and we hope that the brand new docs will show you how to use React to construct any person interface that you really want.