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