Getting Started
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。
新しいクイックスタートガイドでは最新の React がライブサンプル付きで学べます。
このページは React のドキュメント、および関連する資料の概要となります。
React はユーザインターフェースを作成する為の JavaScript のライブラリです。ここのホームページ、またはこのチュートリアルから React がどういうものかを学びましょう。
React を試す
React は当初より、既存のプロジェクトに徐々に追加していけるようなデザインとなっています。たくさん React を使うのでも、少しだけ使うのでも構いません。触りだけやってみるもよし、シンプルな HTML のページにインタラクティブな機能を追加するのに使うもよし、React をフル活用した複雑なアプリを作成するもよし。どのような目的にしても、このページにあるリンクが役に立つでしょう。
Web 上で試せるオンラインエディタ
React をちょっと試してみたい場合、Web 上のコードエディタが使えます。CodePen、CodeSandbox や Stackblitz で Hello World のテンプレートを使って試してみましょう。
自前のテキストエディタを使いたい場合は、この HTML ファイルをダウンロード・編集して、ブラウザを使ってからローカルファイルシステムから開くことができます。ランタイムでの遅いコード変換が行われる為、簡単なデモに留めておくことをおすすめします。
React を Web サイトに追加する
React は HTML ページにすぐに追加することができます。そのあと徐々に全体に反映させていくか、少数のダイナミックなウィジェットに留めるかはあなたの自由です。
新規 React アプリの作成
新しく React のプロジェクトを始めたい場合でも、まずはシンプルな HTML ページに script タグを追加するのがおすすめです。数分でセットアップできます！
アプリが成長するにつれて、より統合されたセットアップを行うことを考慮していきましょう。大きいアプリの場合におすすめの様々な JavaScript を用いたツールチェインが存在します。それぞれわずかな設定、もしくは設定要らずでリッチな React のエコシステムをフル活用できます。詳細はこちら。
React を学ぶ
React を学びたい人には様々な背景があり、それぞれいろんな学び方のスタイルがあるでしょう。理論から学びたい人も、実際に手を動かしながら学びたい人も、このセクションが役に立てれば幸いです。
他の新しい技術を新しく学ぶ時と同様、React にも学習コストがあります。しかし、辛抱強く、地道にコツコツやっていくことで、絶対にできるようになります。
最初の例
React のホームページにはライブエディタにて記入できる小さな React のサンプルがいくつか載っています。まだ React のことを何も知らなくても、実際に触ってみてどのように変化するか見てみましょう。
React 初心者向けのガイド
もし、React の公式ドキュメントのペースが早すぎると感じた場合は、Tania Rascia 氏によって書かれた React の概要を読んでみましょう。React の重要なコンセプトについて詳細に説明されており、初心者にもとても易しい作りとなっています。それが終わったら、もう一度公式ドキュメントを読んでみましょう！
デザイナ向けのガイド
もしあなたがデザイナのバックグラウンドを持っているなら、これらの資料から始めることをおすすめします。
JavaScript 資料
React の公式ドキュメントはあなたがある程度 JavaScript について知っていることを想定しています。JavaScript の達人である必要は全くありませんが、JavaScript と React を同時に習得するのは難しいでしょう。
JavaScript について自分がどれだけ知っているかを知るために、この JavaScript の概要を読んでおくことをおすすめします。読むのに 30 分から 1 時間程かかってしまいますが、React を学ぶための自信へと繋がってくるでしょう。
ヒント
もし JavaScript で何か詰まった時は、MDN と javascript.info を確認すると良いでしょう。また、コミュニティ運営の掲示板を活用するのもおすすめします。
実践チュートリアル
実際に手を動かしながら学びたい人はチュートリアルからはじめましょう。このチュートリアルでは React を使って三目並べゲームを作成します。ゲーム作成に興味が無い方は飛ばそうと思うかもしれませんが、試してみてください。ここで学ぶテクニックは全ての React アプリの基礎となることであり、習得することで React に関する深い理解が得られます。
一歩づつ進めるためのガイド
コンセプトからひとつひとつ学んでいきたい人はこちらのガイドからはじめていきましょう。このガイドは章ごとに分かれていて、各章がそれまでに習ったことを上乗せする知識となっているため、余すことなく学ぶことができます。
React 的な考え方
多くの React のユーザは React の流儀を読んだ時に React についてピンときたと高く評価しています。この世に存在する一番古い React に関する資料ですが、今でも現役で使えます。
おすすめの資料
時には第三者が執筆した技術書やオンラインコース等が公式ドキュメントよりもわかりやすいという人もいます。我々はよく勧められている資料集についてもまとめています。無料のものもあります。
高度なコンセプト
React の基本コンセプトについて慣れてきて、実際に手で動かしてみたら、今度はさらに高度な内容にも手を出したいと思うかもしれません。この資料では強力な、しかし普段使われることのない コンテクスト や ref といった React のさらなる機能について紹介します。
API リファレンス
この資料は特定の React API の詳細について学びたいときに役に立つでしょう。例えば、React.Component API リファレンスでは setState() がどう機能しているかについてより詳細に記載されていたり、種々のライフサイクルメソッドがどのように役に立つかについて書かれています。
用語集と FAQ
この用語集にはこのドキュメントにてよく使われる単語等が記載されています。FAQ もあり、AJAX リクエストについて、コンポーネントの state、ファイル構成などのよくある質問とそれらに対する回答が記載されています。
最新の情報を追いたい人へ
React ブログは React チームからのアップデートが記載されている公式ブログです。リリースノートや機能の非推奨化の告知など、何か大事な発表がある時にはこのブログに真っ先に記載されます。
他にも @reactjs のツイッターアカウントをフォローすることもできますが、公式ブログを追っていれば大事なことを見落とすことはないでしょう。
全ての React のリリースにブログ記事があるわけではありませんが、リリースごとに詳細に書かれた changelog が React リポジトリの CHANGELOG.md、および Releases ページに記載されています。
バージョン管理されたドキュメント
このドキュメントは常に最新の stable 版の React に準拠しています。React 16 からは古いバージョンのドキュメントも別のページから閲覧できます。古いバージョンのドキュメントは各バージョンリリース時のスナップショットであり、更新をかけることはありません。
他に聞きたいことは？
ドキュメントに記載されていないことがあったり、わかりにくい箇所があったりしたら、困ったことや改善案等をこの公式ドキュメントのリポジトリに issue として立てるか、もしくは公式の @reactjs までご連絡ください。あなたのご意見をお待ちしております！