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 でダウンロードしてください。
.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 環境の場合は react react-dom scheduler の 3 つのリポジトリをリンクする必要があることです。
または、 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 を開きます。