How to run react source code repository in local environment

Fork Official Repository

facebook/react

Usually, open-source projects have a CONTRIBUTING.md file, which tells other developers how to contribute to the project, or you can find some information about running tests and publishing actions in the .github/workflows of the project.

Download and clone the repository

git clone git@github.com:Debbl/react.git

VSCode Environment

Use VSCode to open

code react

Plugins

Because react is written in flow language (similar to ts), you need to provide support for the relevant languages in VSCode. Download the flow language plugin flow-for-vscode in VSCode.

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

Settings

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

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

Explain the configuration here, the first two disable the default js ts checks, then enable the flow plugin, and use the flow running under node_modules, these are actually enabled by default, see flow-for-vscode#configuration for more details.

Local Environment

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

• The corresponding node version in .nvmrc, install the corresponding version
• The packageManager in package.json has the corresponding yarn version
• The java environment does not specify what version, 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

Use yarn.lock to install, here I recommend a good tool antfu-collective/ni, directly use nci to install, I also reference other people's projects and write a rust version Debbl/nci

yarn install --frozen-lockfile

Because I use the M1 chip, I encountered several problems during the installation process

• /bin/sh: autoreconf: command not found Use brew to install brew install autoconf
• If the previous step is installed using brew, you will encounter a problem error-cant-exec-aclocal-with-homebrew-installed-autoreconf-on-mac Need to install brew install automake
• optipng-bin dependency error, you can see this optipng-bin/issues/117

Configure flow environment

yarn flow

Running this command directly will require you to select the corresponding environment

Use dom-node environment

yarn flow dom-node

After completion, you will find that there is a .flowconfig file in the root directory

Check if flow is effective

After completion, VSCode will have a prompt

Test, Local Run

yarn test

Local Run Packaged React

You can refer to the development-workflow part of the documentation

cd build/oss-experimental/react
yarn link

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

Note that in the node environment, you need to link three repositories react react-dom scheduler

You can also directly use the environment in the fixtures directory, here I use 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

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

Use LiveServer to open fixtures/packaging/webpack/dev/index.html