前面都是用Create React App預設的寫法來做示範，要進入組件前先改一下寫法

將原本App.JS 裡面的語法

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
            你好 !!!! React 
        </p>
       
      </header>
    </div>
  );
}

export default App;

改成以下

import React, { Component } from 'react'
import './App.css';
import App2 from './App2';


export default class App extends Component {
    render() {
        return (
          <div className="App">
          <header className="App-header">
            <App2 />
          </header>
        </div>
        )
    }
}

你會發現裡面少了下面那行

export default App;

而原本App() 卻結合了export default的寫法，這個寫法是es7裡面的寫法，是目前比較好的寫法

export default class App extends Component {}

而上面多了

import React, { Component } from 'react'
import App2 from './App2';

改完後再src資料夾裡面再創一個JS檔案取名App2.js，現在就來自己寫第一個組件
App2.js

import React, { Component } from 'react'
import logo from './logo.svg';

export default class App2 extends Component {
    render() {
        return (
            <div>
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    你好 !!!! React 
                </p>
            </div>
        )
    }
}

這樣寫畫面還是跟之前一樣，不過也達成了區塊主件，之後如果需要分別寫header,main,footer，都可以用這樣分開來寫HTML CSS都可以各自一包，維護上會更好。