react best practice (3)-- learning source code

Posted on Edited on

Try to setup react soure code learning environment.

1. Step 1

1
2
3
4
5
git clone https://github.com/facebook/react.git
cd react
git branch -a
git checkout 17.0.2
yarn install

According the How to contribute, next run command below

1
2
3
4
5
6
7
8
9
yarn build react/index,react-dom/index --type=UMD

# open fixtures/packaging/babel-standalone/dev.html and it used the compiled react.js

cd build/node_modules/react
yarn link
cd build/node_modules/react-dom
yarn link

Using yarn create react-app to create a new project and remove dependency of react and react-dom in package.json

1
2
3
yarn create react-app react-source-learning --template:typescript
cd react-source-learning
yarn link react react-dom

2. Step 2

Write JSX in maunally.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import ReactDOM from 'react-dom';

//jsx
const element = <h1 className='title' style={{color:'red'}}> hello</h1>

//babel=>js function. React.createElement()=>vnode

const element2 = React.createElement("h1", {
    className: "title",
    style: {
      color: 'red'
    }
  }, " hello");

console.log(element);

ReactDOM.render(
    element2,
    document.getElementById('root')
);

We can go to Babel to check the element mentioned above. element is equal to element2.

The process is:
1, JSX will be transferd to React.createElement method by Babel
2, React.createElement is actually returned a virtual node.
3, React.Render will render the virtual node to realistic dom

So next to implement a createElement in react.js.

And then to create a new react-dom.js