[React source code series] 1 - Configuration and operation

The reason why this part of the configuration is added is because currently (2022.03.19) the official React project cannot be built... After some configurations have been modified, they conflict with rollup and the build fails.

In addition, there are still some preparations to be completed. The specific steps can Contributing > How to Contributebe explained in the official documentation. The official documentation address: https://reactjs.org/docs/how-to-contribute.html .

Configuration requirements

From the official documentation:

You have Node installed at v8.0.0+ and Yarn at v1.2.0+. ✔
You have JDK installed. ❓
You have gcc installed or are comfortable installing a compiler if needed. Some of our dependencies may require a compilation step. On OS X, the Xcode Command Line Tools will cover this. On Ubuntu, apt-get install build-essential will install the required packages. Similar commands should work on other Linux distros. Windows will require some additional steps, see the node-gyp installation instructions for details. ❌
You are familiar with Git. ❓

Node is definitely a must, I don't have GCC installed locally, at least to run React, the Windows platform is not required.

Java is not confirmed, I have installed Java (both 8 and 11, the later version is not confirmed), so this is no way to confirm.

Fork, build, and run React projects

I don't know when this problem will be fixed. At present, a team/member has reverted a commit submitted a few days ago, and then the project can be built correctly. The address of the fork is: https://github.com /jeongwoopark0514/react/tree/fixBuild .

After Fort finished project to local, switch branch to fixBuilduse yarnor npm installdownload all dependencies.

Use or to build the project yarn buildafter the dependencies are downloaded .npm run build

Only build React and ReactDOM can use this command: yarn build react/index,react-dom/index --type=UMD.

If you encounter the following error:

rollup error

Nine times out of ten, there is no official patch, and you have directly downloaded the React source code of FB.

The page after running successfully is probably as follows:

build success

...omit some...

last build

There are quite a lot of projects that have been built, anyway, I can't see the end at a glance...

~~I used yarn build react/index,react-dom/index --type=UMDto~~

Open project

A screenshot of the top-level structure is as follows:

folder structure

In fact, what is more important is the fixturesand packagestwo directories, fixtureswhich contain some running cases, and packagesthe real React source code is divided in the form of modules:

packages structure

The more familiar ones are react, react-dom, react-reconciler (the concept of reconciler has already been interviewed and is about to be smashed) and some used and unused dependencies.

fixturesThe next learning project is: fixtures/packaging/babel-standalone/dev.html, this is also the project recommended for trial operation in the React documentation. The official documentation mentions that it uses react.development.js, which will monitor the changes made.

dev.htmlThe contents of the file are as follows:

<html>
  <body>
    <script src="../../../build/node_modules/react/umd/react.development.js"></script>
    <script src="../../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
    <div id="container"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello World!</h1>,
        document.getElementById("container")
      );
    </script>
  </body>
</html>

So the rendered page is also very simple. After I recorded the profile, the page is as follows:

dev html profile

The orange part is the rendering engine of the browser at work, the green code is the execution of babel, and the pink part is the React related code.

Note runthis part:

run

function run(transformFn, script) {
    
    
  var scriptEl = document.createElement("script");
  scriptEl.text = transformCode(transformFn, script);
  headEl.appendChild(scriptEl);
}

runThis code starts executing append in react-dom:

append react dom

That is, the execution entry for all React code.

The current version has been advanced to v18, so the function call will be different from v17, and the following warning will appear in the console:

warning

This is a bit of a nuisance...so the next step should be...

Let's try the API of v18 directly?

After all, v18 has been pushed from alpha to beta. Although I don't know when the stable release will be released, it always feels like this year... After all, it's been two years.