前言
在深入实现react之前，我们先来实现一个最简单的react应用。
// 创建my-app
npx create-react-app my-app
// 切换目录
cd my-app
cd src
// 删除src目录上的所有文件
rm -rf *
// 在src目录上创建index.js文件
touch index.js
// src/index.js
const element = <h1>hello, world</h1>;
const container = document.getElementById('root');
ReactDOM.render(element, container);
分析
现在，我们通过yarn start运行该应用
yarn start
然后在浏览器中打开localhost:3000，如下所示
在上面我们传入的<h1>hello,world</h1>既不是字符串，也不是html。那么它是什么呢？它是JSX，是js的语法扩展。通过JSX，我们可以更加方便的使用react。但是，JSX是不能在浏览器中直接运行的。
所以，为什么hello，world可以在浏览器中成功渲染出来呢？
现在，我们打开浏览器的控制台，切换到Sources面板，如下所示：
可以看到，在左侧边栏有一个static/js文件夹，打开这个文件夹，可以看到bundle.js文件，如图
然后通过command + f打开搜索面板，搜索hello, world
通过调试，我们可以知道这里的react_WEBPACK_IMPORTED_MODULE_0__default()其实就是React，所以，实际上<h1>hello,world</h1>这段JSX代码被转换成了React.createElement(...)的样子
// 源码
const element = <h1>hello, world</h1>
// 编译后
const element = React.createElement('h1',{...}, 'hello world');
而整个编译过程实际都是由babel来完成的。所以在react源码中我们不需要实现jsx的编译工作。
那么这里的
React.createElement又是用来干嘛的呢？
从官网的解释可以知道，它是用来生成react元素的
现在，我们来看看react元素长什么样?
// src/index.js
console.log('element', element);
接着ReactDOM.render方法会将react元素渲染到屏幕上。
ReactDOM.render(element)
总结
所以渲染出hello world的整个过程，经过了如下3步：
