GeezerVison

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

• 宣言的UI（テンプレーティング）: JSX
• データバインディング
• コンポーネント化: 関数コンポーネント
• 高効率レンダリング: 仮想DOM

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

class ParentComponent extends React.Component {
  state = { color: "green" };
  render() {
    return <ChildComponent color={this.state.color} />;
  }
}

const App = () => {
  return (
    <div>
      <p>Header</p>
      <p>Content</p>
      <p>Footer</p>
    </div>
  );
};

<h1>{10 + 1}</h1>;

<h1>11</h1>

const App = ({ i }) => {
  return <div>{String(i === 1)}</div>;
};

const App = () => {
  const sections = [1, 2, 3];
  return (
    <div>
      {sections.map((n) => (
        <div>Section {n}</div>
      ))}
    </div>
  );
};

<div>
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>

ReactはFacebookのソフトウェアエンジニアであるJordan Walkeによって開発された。PHP向けのHTMLコンポーネントフレームワークであるXHPの影響を受けている^[17]。2011年にFacebookのニュースフィード上で最初に使用され、2012年にはInstagramでも使用されるようになった^[18]。2013年5月のJSConf USでオープンソース化された。

React NativeはAndroid・iOS・UWPでのReactを利用したネイティブ開発を可能にするもので、2015年2月のReact.js Confで発表され、3月にオープンソース化された。

2017年4月17日、Facebookはユーザインタフェースを構築するためのReactフレームワークライブラリの新しいコアアルゴリズムであるReact Fiberを発表した^[19]。React FiberはReactフレームワークの将来の改良と機能開発の基盤となるものである^[20]。

2013年5月に最初に一般公開されたときには標準のApache 2.0を使用していた。2014年10月に公開されたReact バージョン0.12.0からは、Facebookの関連する特許の使用を認めるPATENTSテキストファイルが追加された、特許条項付きの修正BSDライセンスにライセンスを変更した^[21]。

この特許条項はFacebookとその関連企業に対して特許権侵害訴訟した場合に、利用する権利が取り消されるというもので、Reactユーザーコミュニティ内で幾つかの論争と議論を引き起こした^[22][23]。

コミュニティからのフィードバックに基づき、2015年4月にFacebookは特許許諾を曖昧な部分を減らし、より寛容なものになるように変更した^[24]。 2017年8月、Apacheソフトウェア財団はこの特許条項がApacheの製品と相容れないものであったことからライセンスの変更を求めたが、Facebookはこれを却下した^[22]。翌月、WordPressはGutenbergとCalypsoでReactの利用を中止することを決定した^[25]。

2017年9月23日、Facebookは翌週に、Flow・Jest・React・Immutable.jsの4つを標準のMITライセンスで再ライセンスすることを発表した^[26]。同社は、Reactが「ウェブ用のオープンソースソフトウェアにおける様々なエコシステムの基盤」であり、「技術的なもの以外の問題によって発展を遅らせることは望まない」と述べている^[27]。

同月26日に、React バージョン16.0.0が標準のMITライセンスでリリースされた^[28]。この変更はReact バージョン15.6.2でバージョン15.x系にもバックポートされた^[29]。

プロジェクトの進捗状況は、コア開発チームのディスカッションフォーラムで見ることができる^[30]。しかし、Reactに対する大きな変更についてはreact-futureリポジトリのIssueとプルリクエストを通すことになっている。これによって、Reactコミュニティは将来性のある新しい機能・実験的なAPI・JavaScriptの構文の改善についてのフィードバックを提供することができる。

Reactは完全なアプリケーションフレームワークを提供しようとはしていない。Reactはユーザインタフェースを構築するために設計されており、故に、開発者がアプリケーションを構築する際に必要であると考えるかもしれない多くのツールは含まれていない。このことにより、開発者はネットワークアクセスやローカルデータストレージなどで好みのライブラリを選択することができる。ライブラリが成熟するにつれて、一般的なパターンが明らかになってきた。

2012年、Facebookの会長兼CEOであるマーク・ザッカーバーグは、「企業としての最大の失敗は、ネイティブの反対としてHTML5に大きく賭けたことだった。」とコメントしている^[40]。彼はFacebookがまもなくより良いモバイル体験を提供することを約束した。

Facebookの社内では、Jordan WalkeがJavaScript製のwebアプリからiOSのUIを生成するシステムのプロトタイプを作り上げており、本格的にReact製Webアプリからネイティブモバイルアプリを構築するために社内ハッカソンが結成された^[41]。

数ヶ月の開発の後、FacebookはReact.js Conf 2015で最初のバージョンをリリースした。Christopher Chedeauは技術的な話の中で^[42]、FacebookがReact Nativeをグループアプリと彼らの広告管理アプリで既に使用していると説明した^[37]。

React Nativeの動作原理は基本的にはReactと同一だが、ネイティブAPIを利用して描画する点がReactと異なる。React Nativeはバックグラウンドプロセス (開発者の書いたコードを解釈するためのJavaScript処理系) としてエンドデバイス上で直接実行され、シリアライズ可能で非同期かつバッチ処理されたBridgeを介してネイティブプラットフォームと通信する^[43][44]。

React NativeはHTML5に全く頼らず、全てJavaScriptで書かれており、ネイティブのSDKに頼っている。

React NativeによるHello world:

import React from "react";
import { AppRegistry, Text } from "react-native";

export const HelloWorldApp = () => <Text>Hello world!</Text>;

AppRegistry.registerComponent("HelloWorld", () => HelloWorldApp);