宣言的な View
React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。
宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。
コンポーネントベース
自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。
コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々なデータをアプリケーション内で簡単に取り回すことができ、かつ DOM に状態を持たせないようにすることができます。
一度学習すれば、どこでも使える
React と組み合わせて使用する技術に制限はありません。React を使って新しい機能を追加する際に、既存のソースコードを書き換える必要はありません。
React は Node を使ったサーバ上でもレンダーできますし、React Native を使うことでモバイルアプリケーションの中でも動きます。
シンプルなコンポーネント
React コンポーネントを作成するには render() メソッドを実装します。このメソッドは、受け取った入力データを元に、表示する内容を返す役割を担当します。次の例では JSX と呼ばれる XML に似た構文を使っています。コンポーネントに渡された入力データを this.props で参照し、render() の中で使用しています。
React を使う際に JSX を必ず使わなくてはいけないわけではありません。 JSX のコンパイルによって生成される生の JavaScript コードを見るには、Babel REPL を参照してください。
サンプルコードを読み込んでいます……
状態を持つコンポーネント
コンポーネントは、入力されたデータを受け取るだけではなく（受け取ったデータは this.props で参照することができます）コンポーネント独自の内部状態を持つこともできます（これは this.state で参照することができます）。状態が変化した場合には、render() が再度実行され、描画されるマークアップが更新されます。
サンプルコードを読み込んでいます……
アプリケーションの実例
props と state を組み合わせることで、ちょっとした Todo アプリケーションを作ることができます。次の例では state を用いて、現在の Todo リストのアイテムの状態を追跡しています。それからユーザが入力したテキストに関しても state で管理しています。イベントハンドラは、それが書かれた要素内部にレンダーされるように一見思われますが、実際にはこれらのハンドラは集められて、イベントデリゲーションを用いて実装されます。
サンプルコードを読み込んでいます……
外部プラグインを使用するコンポーネント
React は柔軟性が高いので、React 以外のライブラリやフレームワークとやり取りをするためのフックを提供しています。次の例では Markdown の外部ライブラリである remarkable を使用しています。<textarea> に入力された値をリアルタイムに HTML へと変換しています。