本日、私たちはReactとそのドキュメントの新しいホームであるreact.devのローンチを発表できることを嬉しく思います。この投稿では、新しいサイトをご案内したいと思います。
要約
新しいReactサイト（react.dev）では、関数コンポーネントとHooksを使用したモダンなReactを教えています。図表、イラスト、チャレンジ、そして600以上の新しいインタラクティブな例を含んでいます。以前のReactドキュメントサイトは、legacy.reactjs.orgに移動しました。
新しいサイト、新しいドメイン、新しいホームページ
まず、少し整理をしましょう。新しいドキュメントのローンチを祝い、さらに重要なことに、古いコンテンツと新しいコンテンツを明確に分離するため、より短いreact.devドメインに移行しました。古いreactjs.orgドメインは、現在ここにリダイレクトされます。
古いReactドキュメントは、legacy.reactjs.orgにアーカイブされています。古いコンテンツへの既存のリンクはすべて自動的にそこにリダイレクトされ、「ウェブを壊す」ことを避けますが、レガシーサイトはそれほど多くの更新を受けることはありません。
信じられないかもしれませんが、Reactはもうすぐ10歳になります。JavaScript年で言えば、まるで1世紀のようです！私たちは、今日Reactがユーザーインターフェースを作成する素晴らしい方法である理由を反映するようにReactホームページをリフレッシュし、モダンなReactベースのフレームワークをより目立つように言及するように入門ガイドを更新しました。
新しいホームページをまだ見ていない場合は、ぜひチェックしてください！
HooksでモダンなReactに全面移行
2018年にReact Hooksをリリースしたとき、Hooksのドキュメントは読者がクラスコンポーネントに精通していることを前提としていました。これにより、コミュニティは非常に迅速にHooksを採用しましたが、しばらくすると古いドキュメントは新しい読者にサービスを提供できなくなりました。新しい読者は、Reactを2回学ぶ必要がありました：一度はクラスコンポーネントで、そしてもう一度Hooksで。
新しいドキュメントは、最初からHooksでReactを教えています。ドキュメントは2つの主要なセクションに分かれています：
- Learn Reactは、Reactをゼロから教えるセルフペースのコースです。
- API Referenceは、すべてのReact APIの詳細と使用例を提供します。
各セクションで何を見つけることができるか、詳しく見てみましょう。
注意： Hookベースの同等物がまだない、いくつかの稀なクラスコンポーネントの使用例がまだあります。クラスコンポーネントは引き続きサポートされており、新しいサイトのLegacy APIセクションで文書化されています。
クイックスタート
Learnセクションは、Quick Startページから始まります。これは、Reactの短い入門ツアーです。コンポーネント、props、stateなどの概念の構文を紹介しますが、それらの使用方法について詳しくは説明しません。
実践で学ぶのが好きな場合は、次にTic-Tac-Toe Tutorialをチェックすることをお勧めします。これは、Reactで小さなゲームを構築しながら、毎日使用するスキルを教えてくれます。
React を段階的に学ぶ
世界中の誰もが、自分のペースで無料でReactを学ぶ平等な機会を持つことを願っています。これが、Learnセクションが章に分かれたセルフペースのコースのように構成されている理由です。
最初の2つの章では、Reactの基礎について説明します。Reactが初めての場合、または記憶を新たにしたい場合は、ここから始めてください：
- Describing the UIでは、コンポーネントで情報を表示する方法を教えます。
- Adding Interactivityでは、ユーザー入力に応答して画面を更新する方法を教えます。
次の2つの章はより高度で、より複雑な部分についてより深い洞察を提供します：
- Managing Stateでは、アプリの複雑さが増すにつれてロジックを整理する方法を教えます。
- Escape Hatchesでは、Reactから「外に出る」方法と、それが最も理にかなう場合について教えます。
各章は、いくつかの関連ページで構成されています。これらのページのほとんどは、特定のスキルやテクニックを教えます。たとえば、Writing Markup with JSX、Updating Objects in State、またはSharing State Between Componentsなどです。一部のページは、Render and CommitやState as Snapshotなどのアイデアの説明に焦点を当てています。そして、You Might Not Need an Effectのように、これらの年月で学んだことに基づく私たちの提案を共有するページもいくつかあります。
これらの章を順番に読む必要はありません。誰にそんな時間があるでしょうか？でも、読むことはできます。Learnセクションのページは、前のページで紹介された概念にのみ依存しています。本のように読みたい場合は、どうぞ！
チャレンジで理解度をチェック
Learnセクションのほとんどのページは、理解度をチェックするためのいくつかのチャレンジで終わります。たとえば、Conditional Renderingに関するページからのいくつかのチャレンジがあります。今すぐ解く必要はありません！本当にやりたい場合を除いて。
図表とイラストで直感を構築
コードと言葉だけでは何かを説明する方法がわからない場合、直感を提供するのに役立つ図表を追加しました。たとえば、Preserving and Resetting Stateからの図表の1つです：
sectionがdivに変更されると、sectionは削除され、新しいdivが追加されます
ドキュメント全体を通してイラストも見ることができます。ここに、ブラウザが画面をペイントしているイラストの1つがあります：
Rachel Lee Naborsによるイラスト
この描写が100％科学的に正確であることを、ブラウザベンダーと確認しました。
新しい詳細なAPI Reference
API Referenceでは、すべてのReact APIに専用のページがあります。これには、あらゆる種類のAPIが含まれます：
useStateなどの組み込みHooks<Suspense>などの組み込みコンポーネント<input>などの組み込みブラウザコンポーネントrenderToPipeableStreamなどのフレームワーク指向APImemoなどのその他のReact API
すべてのAPIページが少なくとも2つのセグメントに分かれていることに気づくでしょう：ReferenceとUsage。
Referenceは、引数と戻り値をリストすることで、正式なAPIシグネチャを説明します。簡潔ですが、そのAPIに慣れていない場合は少し抽象的に感じるかもしれません。APIが何をするかを説明しますが、使用方法は説明しません。
Usageは、同僚や友人が説明するように、実際にこのAPIを使用する理由と方法を示します。各APIがReactチームによってどのように使用されることを意図されているかの標準的なシナリオを示します。
色分けされたスニペット、異なるAPIを一緒に使用する例、およびコピー＆ペーストできるレシピを追加しました：
基本的なuseStateの例
- カウンター（数値）
- テキストフィールド（文字列）
- チェックボックス（ブール値）
- フォーム（2つの変数）
一部のAPIページには、Troubleshooting（一般的な問題用）とAlternatives（非推奨API用）も含まれています。
このアプローチにより、APIリファレンスが引数を調べる方法としてだけでなく、任意のAPIでできるさまざまなことを見る方法として、そしてそれが他のAPIとどのように接続するかを見る方法として有用になることを願っています。
次は何？
私たちの小さなツアーはこれで終わりです！新しいウェブサイトを見回して、気に入ったものや気に入らないものを見て、続けてください...