ローカル環境でReactのソースコードリポジトリを実行する方法

fork 公式リポジトリ facebook/react #

通常、オープンソースのプロジェクトには、他の開発者がこのプロジェクトに貢献する方法や、このプロジェクトの実行情報を含むCONTRIBUTING.mdファイルがあります。また、このプロジェクトの実行情報は、.github/workflowsディレクトリ内にあるアクションで見つけることができます。

ローカルでクローンしたリポジトリをダウンロードします。

git clone [email protected]:Debbl/react.git

VSCode 環境#

VSCode を開きます。

code react

プラグイン#

React はflow言語（ts に似た言語）を使用しているため、VSCode で関連する言語のサポートを提供するために、flow 言語のプラグインflow-for-vscodeをダウンロードします。

.vscode/extensions.json

{
    "recommendations": [
        "flowtype.flow-for-vscode"
    ]
}

設定#

ローカルで開いたリポジトリのルートディレクトリに、次のファイルを作成します。

.vscode/settings.json

{ 
    "javascript.validate.enable": false,
    "typescript.validate.enable": false,
    "flow.enabled": true,
    "flow.useNPMPackagedFlow": true
}

ここでの設定の説明です。最初の 2 つはデフォルトの js と ts のチェックを無効にし、flow プラグインを有効にし、node_modules内の flow を使用するようにします。これらの設定は実際にはデフォルトで有効になっています。詳細な設定については、flow-for-vscode#configurationを参照してください。

ローカル環境#

ここでは、公式ドキュメントのcontribution-prerequisitesを直接参照できますが、いくつか注意が必要な箇所があります。

.nvmrcファイルに対応する node のバージョンがある場合は、対応するバージョンをインストールすることをお勧めします。
package.jsonのpackageManagerに対応する yarn のバージョンがある場合は、対応するバージョンをインストールします。
Java の環境には明示的なバージョンが指定されていませんが、ここではjava 17.0.11 2024-04-16 LTSをインストールしました。

gcc 環境

依存関係のインストール、環境チェック#

ここでは、ドキュメントのこの部分sending-a-pull-requestを参考にすることができます。

yarn.lockを使用して完全にインストールするため、便利なツールantfu-collective/niを使用して、nciを使用してインストールします。私も他の人のプロジェクトを参考にして、Rust のバージョンDebbl/nciを作成しました。

yarn install --frozen-lockfile

M1 チップを使用しているため、インストール中にいくつかの問題が発生しました。

/bin/sh: autoreconf: command not foundは、brew install autoconfを使用してインストールします。
前のステップで brew を使用してインストールした場合、問題が発生する場合があります。error-cant-exec-aclocal-with-homebrew-installed-autoreconf-on-macを参照して、brew install automakeをインストールする必要があります。
optipng-binの依存関係のエラーが発生する場合は、optipng-bin/issues/117を参照してください。

flow 環境の設定#

yarn flow

ここでコマンドを実行すると、対応する環境を選択するように求められます。

ここではdom-node環境を使用します。

yarn flow dom-node

実行が完了すると、ルートディレクトリに.flowconfigファイルが追加されます。

flow が有効になっているか確認#

完了すると、VSCode にヒントが表示されます。

テスト、ローカル実行#

yarn test

ビルドされた React のローカル実行#

ドキュメントのdevelopment-workflowを参考にすることができます。

cd build/oss-experimental/react
yarn link

cd build/oss-experimental/react-dom
yarn link

ここで注意する必要があります。node 環境の場合、3 つのリポジトリreact react-dom schedulerをリンクする必要があります。

または、fixturesディレクトリの環境を使用することもできます。ここでは、fixtures/packaging/webpack/devを使用します。

cd fixtures/packaging/webpack/dev

yarn

yarn build

input.jsファイルを置き換える必要があります。新しいバージョンの ReactDom には、もはやrender関数がありません。

fixtures/packaging/webpack/dev/input.js

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  React.createElement('h1', null, 'Hello World!'),
  document.getElementById('container')
);

var React = require('react');
var {createRoot} = require('react-dom/client');

console.log('react version:', React.version);

const root = createRoot(document.getElementById('container'));
root.render(React.createElement('h1', null, 'Hello World!'));

LiveServerを使用して、fixtures/packaging/webpack/dev/index.htmlを開きます。