繼續上一節課的內容，打開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，在瀏覽器就看到我們剛剛寫的組件，已經渲染到頁面了：

react學習筆記（二）編寫第一個react組件