今日目的

介紹何謂JSX語法，新增組件後引入組件，可以刷新畫面的樣子。

JSX語法

這個有趣的標籤語法不是一個字串也不是 HTML。

這個語法叫做 JSX，是一個 JavaScript 的語法擴充。推薦你在寫 React 的時候透過這個語法來描述使用者界面的外觀。

JSX很像把JS+HTML標籤混合一起寫，但是有又有些不像，我接下會使用JSX語法去撰寫，我們不強迫你使用JSX語法去撰寫你的程式碼，所以是否使用請自行斟酌。
接下來請把組件改成這樣

import React from 'react';
class App extends React.Component {
  
  render() {
    const element = <h1>你好,React</h1>; //宣告變數裡面放html標籤
    return(
      <div>
        {element} {/* 使用剛剛的變數 使用時請加 {} */}
      </div>
    );
  }
}

export default App;

如圖

新增Class組件

接下來要新增檔案，新增後再創Class當一個組件，請在src裡面新增"Sid.js"檔案

裡面新增的"Sid"組件請改成如下

import React from 'react';
class Sid extends React.Component {
  
  render() {
    return(
      <div>
       我是一個組件
      </div>
    );
  }
}
export default Sid;

完成之後，這樣就算新增一個組件了。

引入組件

請到App.js的檔案裡引入"Sid組件"，我們引入之後再App.js引用會像下面這樣。

import React from 'react';
import Sid from './Sid'; // ./指的是本地資料夾 ../是上一層資料夾
class App extends React.Component {
  
  render() {

    return(
      <div>
       <Sid/> {/* 引入字定義Sid組件 */}
      </div>
    );
  }
}
export default App;

成功引入字定一組件後，畫面如下。

參考資料:
https://reactjs.org/
自己