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 to let 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 install support for this language in VSCode. Download the flow language plugin for VSCode flow-for-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 runtime 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#

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

The .nvmrc file corresponds to the node version. It is recommended to install the corresponding version.
The package.json file has a corresponding yarn version in the packageManager field.
The official documentation does not specify a specific version for Java environment. Here, I installed java 17.0.11 2024-04-16 LTS.

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 autoconf using brew: brew install autoconf
If you installed it using brew in the previous step, you may encounter an issue error-cant-exec-aclocal-with-homebrew-installed-autoreconf-on-mac. You need to install automake: brew install automake
Dependency error for optipng-bin. You can refer to this optipng-bin/issues/117

Configure flow Environment#

yarn flow

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

Here, I will use 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 completing these steps, VSCode will provide suggestions.

Testing, Local Execution#

yarn test

Running 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 will use fixtures/packaging/webpack/dev.

cd fixtures/packaging/webpack/dev

yarn

yarn build

Here, you need to replace the input.js file because 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