react的原理和运行流程是：

1,空的html文件 执行 index.js

<div id=”root”></div>

2, index.js 引入 import 组件 通过 ReactDOM.render 把组件，渲染到 id=root 的根元素节点上。

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App’;
ReactDOM.render(<App />,document.getElementById(‘root’));

3, 组件 App.js 在组件中

import React, { Component } from ‘react’,
class App extends Component {
render(){
<div>
Hello world!
</div>
}
}
export default App;

组件是什么呢？
就是页面上的一部分。

再创建一个组件。
Test.js

import React, { Component } from ‘react’,
class Test extends Component {
render(){
<div>
Dell lee!
</div>
}
}
export default Test;

在index.js 中引入组件
index.js

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App’;
import Test from ‘./Test’;

ReactDOM.render(<div><App /><Test /></div>,document.getElementById(‘root’));

空的html文件 执行 index.js

<div id=”root”></div> 两个内容就都显示出来了。

显示的内容：

Hello world!
Dell lee!