Provide a summary of the following web Content, written in the voice of the original author. If there is anything controversial please highlight the controversy. If there is something surprising, unique, or clever, please highlight that as well. Content:
Title: React.dev
Site: react.dev
March 16, 2023 by  Dan Abramov  and  Rachel Nabors 
 
 Today we are thrilled to launch  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  
 
 The new React site ( 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 . 
 
 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  domain. The old  reactjs.org  domain will now redirect here. 
 The old React docs are now archived at  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  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  
 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  is a self-paced course that teaches React from scratch. 
 API 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  section of the new site. 
 Quick start  
 The Learn section begins with the  Quick Start  page. It is a short introductory tour of React. It introduces the syntax for concepts like components, props, and state, but doesn’t go into much detail on how to use them. 
 If you like to learn by doing, we recommend checking out the  Tic-Tac-Toe Tutorial  next. It walks you through building a little game with React, while teaching the skills you’ll use every day. Here’s what you’ll build: 
 import   {   useState   }   from   'react' ; 

 function   Square ( {   value ,   onSquareClick   } )   { 
   return   ( 
     < button   className = "square"   onClick = { onSquareClick } > 
       { value } 
     </ button > 
   ) ; 
 } 

 function   Board ( {   xIsNext ,   squares ,   onPlay   } )   { 
   function   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   status ; 
   if   ( winner )   { 
     status  =  'Winner: '  +  winner ; 
   }   else   { 
     status  =  'Next player: '  +  ( xIsNext  ?  'X'  :  'O' ) ; 
   } 

   return   ( 
     < > 
       < div   className = "status" > { status } </ div > 
       < div   className = "board-row" > 
         < Square   value = { squares [ 0 ] }   onSquareClick = { ( )   =>   handleClick ( 0 ) }   /> 
         < Square   value = { squares [ 1 ] }   onSquareClick = { ( )   =>   handleClick ( 1 ) }   /> 
         < Square   value = { squares [ 2 ] }   onSquareClick = { ( )   =>   handleClick ( 2 ) }   /> 
       </ div > 
       < div   className = "board-row" > 
         < Square   value = { squares [ 3 ] }   onSquareClick = { ( )   =>   handleClick ( 3 ) }   /> 
         < Square   value = { squares [ 4 ] }   onSquareClick = { ( )   =>   handleClick ( 4 ) }   /> 
         < Square   value = { squares [ 5 ] }   onSquareClick = { ( )   =>   handleClick ( 5 ) }   /> 
       </ div > 
       < div   className = "board-row" > 
         < Square   value = { squares [ 6 ] }   onSquareClick = { ( )   =>   handleClick ( 6 ) }   /> 
         < Square   value = { squares [ 7 ] }   onSquareClick = { ( )   =>   handleClick ( 7 ) }   /> 
         < Square   value = { squares [ 8 ] }   onSquareClick = { ( )   =>   handleClick ( 8 ) }   /> 
       </ div > 
     </ > 
   ) ; 
 } 

 export   default   function   Game ( )   { 
   const   [ history ,   setHistory ]  =  useState ( [ Array ( 9 ) . fill ( null ) ] ) ; 
   const   [ currentMove ,   setCurrentMove ]  =  useState ( 0 ) ; 
   const   xIsNext  =  currentMove  %  2  ===  0 ; 
   const   currentSquares  =  history [ currentMove ] ; 

   function   handlePlay ( nextSquares )   { 
     const   nextHistory  =  [ ... history . slice ( 0 ,   currentMove  +  1 ) ,   nextSquares ] ; 
     setHistory ( nextHistory ) ; 
     setCurrentMove ( nextHistory . length  -  1 ) ; 
   } 

   function   jumpTo ( nextMove )   { 
     setCurrentMove ( nextMove ) ; 
   } 

   const   moves  =  history . map ( ( squares ,   move )   =>   { 
     let   description ; 
     if   ( move  >  0 )   { 
       description  =  'Go to move #'  +  move ; 
     }   else   { 
       description  =  'Go to game start' ; 
     } 
     return   ( 
       < li   key = { move } > 
         < button   onClick = { ( )   =>   jumpTo ( move ) } > { description } </ button > 
       </ li > 
     ) ; 
   } ) ; 

   return   ( 
     < div   className = "game" > 
       < div   className = "game-board" > 
         < Board   xIsNext = { xIsNext }   squares = { currentSquares }   onPlay = { handlePlay }   /> 
       </ div > 
       < div   className = "game-info" > 
         < ol > { moves } </ ol > 
       </ div > 
     </ div > 
   ) ; 
 } 

 function   calculateWinner ( squares )   { 
   const   lines  =  [ 
     [ 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  <  lines . length ;   i ++ )   { 
     const   [ a ,   b ,   c ]  =  lines [ i ] ; 
     if   ( squares [ a ]  &&  squares [ a ]  ===  squares [ b ]  &&  squares [ a ]  ===  squares [ c ] )   { 
       return   squares [ a ] ; 
     } 
   } 
   return   null ; 
 } 

 Show more 
 We’d also like to highlight  Thinking in React —that’s the tutorial that made React “click” for many of us.  We’ve updated both of these classic tutorials to use function components and Hooks,  so they’re as good as new. 
 Note The example above is a  sandbox . We’ve added a lot of sandboxes—over 600!—everywhere throughout the site. You can edit any sandbox, or press “Fork” in the upper right corner to open it in a separate tab. Sandboxes let you quickly play with the React APIs, explore your ideas, and check your understanding. 
 Learn React step by step  
 We’d like everyone in the world to have an equal opportunity to learn React for free on their own. 
 This is why the Learn section is organized like a self-paced course split into chapters. The first two chapters describe the fundamentals of React. If you’re new to React, or want to refresh it in your memory, start here: 
 The next two chapters are more advanced, and will give you a deeper insight into the trickier parts: 
 
 Managing State  teaches how to organize your logic as your app grows in complexity. 
 Escape Hatches  teaches how you can “step outside” React, and when it makes most sense to do so. 
 
 Every chapter consists of several related pages. Most of these pages teach a specific skill or a technique—for example,  Writing Markup with JSX ,  Updating Objects in State , or  Sharing State Between Components . Some of the pages focus on explaining an idea—like  Render and Commit , or  State as a Snapshot . And there are a few, like  You Might Not Need an Effect , that share our suggestions based on what we’ve learned over these years. 
 You don’t have to read these chapters as a sequence. Who has the time for this?! But you could. Pages in the Learn section only rely on concepts introduced by the earlier pages. If you wa<truncated>