继续上一节课的内容，打开App.js:会看到如下代码：
import React, { Component } from 'react'; //在此文件中引用React，以及reat的组件类
import logo from './logo.svg'; //引用图标
import './App.css'; //引用样式
class App extends Component { //编写一个App组件，继承自react的基本组件Component
render() {
return ( //render里面返回了组件的View
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App; //导出组件App，这样外面引用组件的时候才能引用的到
根据上面代码的注释，我们可以在这里写一个自己的react组件。
我们把return里的示例代码删掉，换成自己写的。如下：
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App"> //className是类名，为了与html区分，在react里面类名用className表示
<p>Hello,很高兴在react的世界与你相遇！</p>
<p>后面的路无论简单还是困难，希望我们都能坚持走到最后！</p>
</div>
);
}
}
export default App;
注意：return的view必须放在一个总的标签内，否则会报错。例如： return ( <div className="App"></div><p></p> );会报错
react组件已经写好，我们先看一下，如何把组件渲染到dom中。
打开index.js
代码如下：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'; //导入我们写好的组件
import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(<App />, document.getElementById('root')); // 把react组件渲染到DOM中
registerServiceWorker();
ReactDOM.render(<App />, document.getElementById('root')); // 把react组件渲染到DOM中
root在public中的html文件里，如下：
保存刚刚写好的组件文件，然后在命令窗口运行 npm start，在浏览器就看到我们刚刚写的组件，已经渲染到页面了：