React のいちばん短い例はこのようになります：

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

これは “Hello, world!” という見出しをページに表示します。

Try it on CodePen

上記のリンクをクリックしてオンラインエディタを開いてください。好きなように書き換えて、出力にどう影響するのかを確認してみてください。このガイドのほとんどのページにはこのような編集可能な例が出てきます。

このガイドの読み方

このガイドでは、React アプリケーションの構成部品である React 要素やコンポーネントの使い方を見ていきます。一度それらをマスターすると、小さくて再利用可能な部品から複雑なアプリケーションを作成できるようになります。

ヒント

このガイドはコンセプトを一段階ずつ学んでいきたい人向けに構成されています。手を動かして学びたい方は実践的なチュートリアルを参照してください。このガイドとチュートリアルは互いに相補的なものです。

このページは、React のコンセプトをステップバイステップで学ぶためのガイドのうち最初の章です。全ての章のリストはナビゲーション用のサイドバーにあります。モバイルデバイスで読んでいる場合は、画面の右下にあるボタンを押すことでナビゲーションにアクセスできます。

それぞれの章は、前の章までに学んだ知識を前提として構成されています。“Main Concepts” にある章をサイドバーに並んでいる順番に読んでいくことで、React のほとんどを学ぶことができます。例えば “JSX の導入” がこの章の次の章です。

前提となる知識

React は JavaScript ライブラリなので、JavaScript 言語の基本的な理解があることを想定しています。あまり自信がない場合は、JavaScript のチュートリアルを一通り読んで知識レベルを確認し、このガイドを迷わず読み進められるようにしてください。そうすれば 30 分から 1 時間ほどかかるかもしれませんが、JavaScript と React を同時に学んでいるような気分にならずにすむでしょう。

補足

<<<<<<< HEAD This guide occasionally uses some newer JavaScript syntax in the examples. If you haven’t worked with JavaScript in the last few years, these three points should get you most of the way.

Let’s Get Started!

Keep scrolling down, and you’ll find the link to the next chapter of this guide right before the website footer.

このガイドでは時折比較的新しい JavaScript の構文を例の中で使用しています。ここ数年 JavaScript を使った仕事をしていなかったという場合は、この 3 点を理解すればだいたい理解したことになるでしょう。

origin

始めましょう！

下にスクロールすればウェブサイトのフッターのすぐ手前にこのガイドの次の章へのリンクが出てきます。