How to run the React source code repository in a local environment

Official Repository Fork facebook/react #

Usually, open-source projects have a CONTRIBUTING.md file that lets other developers know how to contribute to the project, or you can find useful information about running tests and publishing actions in the .github/workflows directory of this project.

Clone the repository locally

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

VSCode Environment#

Open with VSCode

code react

Plugins#

Since React is written in flow language (similar to TypeScript), you need to download the flow language plugin for VSCode. Download the flow-for-vscode plugin in VSCode.

.vscode/extensions.json

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

Settings#

Create the following file in the root directory of the locally opened repository

.vscode/settings.json

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

Let me explain the configuration here. The first two lines disable the default JavaScript and TypeScript validation. Then, it enables the flow plugin and uses the flow from the node_modules directory. These two settings are actually enabled by default. For more detailed configuration, refer to flow-for-vscode#configuration.

Local Environment#

You can directly refer to the official documentation of contribution-prerequisites, but there are a few things to note.

.nvmrc corresponds to the node version, it is better to install the corresponding version.
package.json has the corresponding yarn version in packageManager.
There is no specific version mentioned for Java environment. I installed java 17.0.11 2024-04-16 LTS here.

gcc environment

Install Dependencies, Environment Check#

You can refer to this part of the documentation sending-a-pull-request

Install using yarn.lock completely. Here, I recommend a useful tool called antfu-collective/ni. You can directly use nci to install. I also wrote a Rust version based on someone else's project, Debbl/nci.

yarn install --frozen-lockfile

Since I am using an M1 chip, I encountered a few issues during the installation process:

/bin/sh: autoreconf: command not found Install using brew brew install autoconf.
If the previous step was installed using brew, you will encounter an issue error-cant-exec-aclocal-with-homebrew-installed-autoreconf-on-mac. You need to install brew install automake.
optipng-bin dependency error, you can refer to optipng-bin/issues/117.

Configure flow environment#

yarn flow

Running this command will prompt you to choose the corresponding environment.

Here, I am using the dom-node environment.

yarn flow dom-node

After execution, you will notice that a .flowconfig file is added to the root directory.

Check if flow is working#

After completion, VSCode will provide suggestions.

Testing, Local Execution#

yarn test

Running the Packaged React Locally#

You can refer to the documentation development-workflow

cd build/oss-experimental/react
yarn link

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

Here, please note that if you are using the node environment, you need to link three repositories: react, react-dom, and scheduler.

You can also directly use the environment in the fixtures directory. Here, I am using fixtures/packaging/webpack/dev.

cd fixtures/packaging/webpack/dev

yarn

yarn build

You need to replace the input.js file. The new version of ReactDom does not have the render function.

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!'));

Open fixtures/packaging/webpack/dev/index.html using LiveServer.