Hello World
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。
React の導入については新しいクイックスタートを参照してください。
React のいちばん短い例はこのようになります：
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);これは “Hello, world!” という見出しをページに表示します。
上記のリンクをクリックしてオンラインエディタを開いてください。好きなように書き換えて、出力にどう影響するのかを確認してみてください。このガイドのほとんどのページにはこのような編集可能な例が出てきます。
このガイドの読み方
このガイドでは、React アプリケーションの構成部品である React 要素やコンポーネントの使い方を見ていきます。一度それらをマスターすると、小さくて再利用可能な部品から複雑なアプリケーションを作成できるようになります。
ヒント
このガイドはコンセプトを一段階ずつ学んでいきたい人向けに構成されています。手を動かして学びたい方は実践的なチュートリアルを参照してください。このガイドとチュートリアルは互いに相補的なものです。
このページは、React のコンセプトをステップバイステップで学ぶためのガイドのうち最初の章です。全ての章のリストはナビゲーション用のサイドバーにあります。モバイルデバイスで読んでいる場合は、画面の右下にあるボタンを押すことでナビゲーションにアクセスできます。
それぞれの章は、前の章までに学んだ知識を前提として構成されています。“Main Concepts” にある章をサイドバーに並んでいる順番に読んでいくことで、React のほとんどを学ぶことができます。例えば “JSX の導入” がこの章の次の章です。
前提となる知識
React は JavaScript ライブラリなので、JavaScript 言語の基本的な理解があることを想定しています。あまり自信がない場合は、JavaScript のチュートリアルを一通り読んで知識レベルを確認し、このガイドを迷わず読み進められるようにしてください。そうすれば 30 分から 1 時間ほどかかるかもしれませんが、JavaScript と React を同時に学んでいるような気分にならずにすむでしょう。
補足
このガイドでは時折比較的新しい JavaScript の構文を例の中で使用しています。ここ数年 JavaScript を使った仕事をしていなかったという場合は、この 3 点を理解すればだいたい理解したことになるでしょう。
始めましょう！
下にスクロールすればウェブサイトのフッターのすぐ手前にこのガイドの次の章へのリンクが出てきます。