继续上一节课的内容，打开App.js:会看到如下代码：

import React, { Component } from 'react';   //在此文件中引用React，以及reat的组件类
import logo from './logo.svg';             //引用图标
import './App.css';                      //引用样式class App extends Component {           //编写一个App组件，继承自react的基本组件Componentrender() {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，在浏览器就看到我们刚刚写的组件，已经渲染到页面了：

转载于:https://www.cnblogs.com/greenteaone/p/9454338.html