我想說的是：
基礎 Hello World 建立和組件說明

冷知識：
於1972年，貝爾實驗室成員布萊恩·柯林漢撰寫的內部技術檔案
《A Tutorial Introduction to the Language B》
首次提到了 Hello World 這字串
當時，他使用B語言撰寫了第一個使用參數的Hello World相關程式 —— 維基百科

首先把先前新建的專案內 src 資料夾清空
從頭開始寫 Hello World，並從中認識組件的使用方法

步驟開始

在 src 資料夾內建立新的 index.js
並填入

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />,document.getElementById('root'))

首先引入了兩個 React 的必要文件
而 App 則是稍後會建立的組件，組件名稱必須是大寫字母開頭
因為我們使用了 webpack 所以 js, jsx 類型檔案的副檔名可以省略不寫

而在引入 App 組件後
使用 React 的方法把組件渲染到了 public/index.html 裡 id="root" 的區塊

再來就是寫 App 這個組件，十分簡單的顯示 Hello Lemon in 第 11 屆 It邦幫忙鐵人賽

import React, {Component} from 'react'

class App extends Component{
    render(){
        return (
            <>
                Hello Lemon in 第 11 屆 It邦幫忙鐵人賽
            </>
        )
    }
}
export default App

這邊使用的語法跟 HTML 有點像卻又有點不同，這叫做 JSX 會在後面的文章說做介紹
空的 <></> 其實只是為了避免我們在 root 這個 div 底下又多一層 div 所以才這樣用

比較特殊的應該是第一行 import React, {Component} from 'react'
這是ES6的語法 - 解構賦值
如果不使用解構賦值，則寫成以下這樣

import React from 'react'
const Component = React.Component

當我們這兩個檔案都完成後，可以在 terminal 使用 npm start
來看一下我們剛剛的練習結果