react的元件有兩種寫法：

import React from 'react';
class News extends React.Component {
  constructor(props) {
    super(props) // 用於父子元件傳值
  }
  render () {
    return (
      <div>
        <ul>
          <li>
            新聞元件
          </li>
        </ul>
      </div>
    )
  }
}
export default News
 

Es6中的super可以用在類的繼承中，super關鍵字，它指代父類的例項（即父類的this物件）。子類必須在constructor方法中呼叫super方法，否則新建例項時會報錯。這是因為子類沒有自己的this物件，而是繼承父類的this物件，然後對其進行加工。如果不呼叫super方法，子類就得不到this物件。

    class Person {
          constructor (name) {
                this.name = name;
          }
    }

    class Student extends Person {
          constructor (name, age) {
                super(); // 用在建構函式中，必須在使用this之前呼叫
                this.age = age;
          }
    }

為什麼官方的列子裡面寫個super(props)：

只有一個理由需要傳遞props作為super()的引數，那就是你需要在建構函式內使用this.props

那官方提供學習的例子中都是寫成super(props)，所以說寫成super(props)是完全沒問題的，也建議就直接這樣寫。

另一種是：

import React, { Component } from 'react';
class Home extends Component {
  constructor() {
    super();
    // react中定義資料
    this.state = {
      name: 'react學習之旅',
      age: 30,
      userInfo: {
        username: 'react初學者'
      }

    }
  }
  render () {
    // return <div>你好react</div>
    return (
      <div>
        <h2>react裡面所有節點都要被根節點包含起來</h2>
        <p>{this.state.name}</p>
        <p>{this.state.age}</p>
        <p>{this.state.userInfo.username}</p>
      </div>
    )
  }
}
export default Home;

之後在app.js中引入元件

import React, { Component } from 'react';
import logo from './assets/images/logo.svg';
// import './assets/css/App.css';

// 引入Home元件
import Home from './components/Home'
import News from './components/News'
// render 模版 jsx語法
class App extends Component {
  render () {
    return (
      <div className="App">
        <Home></Home>
        <News></News>
      </div>
    );
  }
}

export default App;

yarn start 執行專案，即可載入我們的react元件