Windowsとの互換性を持つ自由なOSを開発するプロジェクトの「ReactOS」とは異なります。
.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%;font-size:90%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}html.client-js body.skin-minerva .mw-parser-output .mbox-text-span{margin-left:23px!important}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}

この記事は更新が必要とされています。
この記事には古い情報が掲載されています。編集の際に新しい情報を記事に反映させてください。反映後、このタグは除去してください。（2022年12月）

React
作者Jordan Walke
開発元Metaとコミュニティ
初版2013年3月29日 (11年前) (2013-03-29)[1]

最新版18.3.1[2]  - 2024年4月26日 (23日前)
リポジトリ

github.com/facebook/react

プログラミング
言語JavaScript
対応OSクロスプラットフォーム
種別JavaScriptライブラリ
ライセンスMITライセンス
公式サイトreact.dev
テンプレートを表示

React (リアクト)またはReact.js、ReactJS とは、ウェブブラウザで複雑なUIを容易に生成するためのフリーかつオープンソースなフロントエンドJavaScriptライブラリである[3]。Meta（旧Facebook）が2011年から社内用に開発していたライブラリを2013年に一般に公開したもので、Meta社と個人や企業からなるコミュニティによって開発されている。
概要

Reactの主な特徴は、クライアントサイドであること、コンポーネントベースであること、仮想DOMを扱うことである。Reactはクライアントサイドである。従来、データファイルや通信内容をもとに複雑なUIをもったWebページ用htmlを生成するためには、PHPやJAVA、RubyなどWEBサーバー上で動くサーバーサイド言語が用いられていた。それに対して、Reactはブラウザ上で動くJavaScriptを使い、ページ表示後にhtmlタグ要素を既存のhtmlに挿入するJSXとよばれる手法によりクライアントサイドで動作するという特徴がある（ただし後に登場したRSC(React Server Components)機能でサーバーサイドレンダリングも可能）。

Reactはコンポーネントベースである。先行するクライアントサイドのUI開発に使われていたjQuery等と比べ、コンポーネントを単位にした要素ごとの開発が可能であり、大規模な開発に適している。

Reactは仮想DOMを採用し、軽量に更新可能である。仮想DOMとは、html言語の階層木構造(DOM)を直接操作するのではなく、仮想的なDOMを操作し最小限の変更点のみ実際のDOMに反映する機能で、VueJSなども採用している。

Reactは単独でも動作するが、予約サイトなど双方向の通信機能によって表示を変える動的ページの構築では、サーバーサイドの処理をNodejs(JavaScriptのサーバーサイド向け拡張)と組み合わせたりNext.js(Nodejsのライブラリ)と組み合わせて使われることが一般的である。また、Reactの実際の開発では、直接JavaScriptを書くのではなく、TypeScript(JavaScriptを型付きにした拡張言語)でReactを書きJavaScriptにトランスパイルすることがある。

Reactはシングルページアプリケーションのwebアプリを開発したり、React Nativeを用いてアプリを開発するための雛形として使用することができる。複雑なReactアプリケーションでは通常、状態管理・ルーティング・APIとの対話のための追加のライブラリが必要となる[4]。
特徴
主な特徴

Reactが提供する代表的な機能を以下に挙げる。

宣言的UI（テンプレーティング）: JSX

データバインディング

コンポーネント化: 関数コンポーネント

高効率レンダリング: 仮想DOM

他フレームワークとの比較

Reactと立ち位置が近く、競合するフレームワークとして、VueJS、NuxtJS、jQuery、AngularJS、PHPなどがある。VueJSはクライアントサイドのJavaScriptによるUI向けライブラリという点では共通しているが、JSXではなくPHP風の置換記法によってhtmlを書き換えたり、双方向バインディングに対応している点が異なり、中小規模のプロジェクトで使われやすい[5]。Nuxtjsは、Vuejsにサーバーサイド機能を持たせたものであり、ReactでのNextjsに対応する。jQueryはReactより古く2006年に誕生したライブラリであり、DOM操作によってhtmlを動的に生成するクライアントサイドのJavaScriptライブラリである点はReactと共通しているが、UIの操作について、モデル・ビュー・コントロールを分離するMVCアーキテクチャの設計思想以前に作られ、データの一貫した管理が難しい[6]。2000年代後半から2010年代前半にかけて広く用いられた。AngularJSは2009年に誕生し、MVCアーキテクチャを採用したクライアントサイドJavaScriptライブラリであり、googleとコミュニティーが開発していたが、2022年にサポートを終了した。PHPは1995年に誕生したプログラミング言語であり、サーバーサイドでhtmlを生成する点がReactと異なる。
プロパティの一方向データバインディング

プロパティ (通常はprops) は親コンポーネントからコンポーネントに渡される。コンポーネントは1組のイミュータブルなJavaScriptオブジェクトとしてプロパティを受け取る[7]。
ステートフルコンポーネント

stateはコンポーネントの全体に渡って値を保持し、プロパティを通じて子コンポーネントに渡すことができる。class ParentComponent extends React.Component { state = { color: "green" }; render() { return <ChildComponent color={this.state.color} />; }}
仮想DOM

もう1つの注目すべき機能は、仮想DOMの使用である。Reactでは仮想DOMとしてメモリ上にDOMの状態をキャッシュしておき、仮想DOMに差分が発生した場合にのみ差分を計算し、実際のDOMに差分のみを反映させることにより効率的な描画を実現している[8]。これにより、プログラマは変更があるたびにページ全体を描画するコードを記述しながら、Reactライブラリによって実際に変更されたサブコンポーネントのみを描画することができる。
ライフサイクルメソッド

ライフサイクルメソッドはコンポーネントの生存期間中に設定した地点で、コードを実行できるようにするためのフックである。

shouldComponentUpdate - 描画が不要な場合にfalseを返すことによって、コンポーネントの不要な再描画を防ぐことができる。

componentDidMount - コンポーネントがマウントされるときに1回だけ呼び出される[注釈 1]。これは一般に、APIを介してリモートソースからデータを読み込む際のトリガとして使用されている。

render - 最も重要なライフサイクルメソッドであり、どのコンポーネントでも必要な唯一のものである。このメソッドは、通常はユーザインタフェースの変更を反映して、コンポーネントの状態が更新されるたびに呼び出される。

JSX

JSX（英語版）は、JavaScriptの構文に対する拡張である[9]。HTMLと外観が似ているが、JSXは多くの開発者がよく知っている構文を使用して、構造化されたコンポーネントを描画する方法を提供する。Reactコンポーネントは、必須ではないが、通常はJSXを使用して書かれている[注釈 2]。JSXはFacebookがPHP向けに作成した拡張構文であるXHPに似ている。

JSXのコードの例:const App = () => { return ( <div> <p>Header</p> <p>Content</p> <p>Footer</p> </div> );};
入れ子の要素

同じレベルの複数の要素は、上記の<div>のように単一のコンテナ要素にラップするか、配列として返す必要がある[10]。
属性

JSXはHTMLによって提供されるものを反映するように設計された要素属性の範囲を提供する。カスタム属性もコンポーネントに渡すことができる[11]。