因為我發現官網與網路上有非常多前輩都有介紹 React.js 的環境安裝與 create 新專案的方式，所以我將第一篇文章主題直接進到了元件開發，期許一系列的挑戰過後，大家可以做出一個屬於自己的小專案。

一、基本的起手式

你一定要先有一個簡單的頁面(通常是index.html)，它可以什麼都沒有，因為我們將會使用 React 慢慢將頁面完整地組起來。下面的簡單例子，就會將 Hello, world 用 h1 標籤渲染到頁面上啦～

範例：

<div id="root"></div>

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

二、一開始要習慣的小事情

這邊稍微舉幾個例子

1. 使用 react 最外層一定要用一個 tag 包起來

很多人都會寫<>...</>，但我都習慣寫<div>...<div/>，其實都一樣。

範例： 你有一個名叫 Repeat 的元件

class Repeat extends React.Component {
  render() {
    return (
      <div>
        <p>Hello, World! </p>
      </div>
    );
  }
}

2. inline-style

寫法和一般 html 不同，會由兩個大括號包起來，並形成像是object key 和 value 的樣子。

範例：

  <div 
    style={{
       marginTop: '20px',
       fontSize: '20px',
    }}
   >
    <p style={{fontWeight: '700'}}>Hello</p>
  </div>

3. class name 怎麼用?

在 html 裡會寫 class-name="hello-item" ，可是在 React 裡要記得換成駝峰式的寫法，命名規則當然就看各自習慣囉～

範例：

  <div 
    className="hello-item"
   >
    <p style={{fontWeight: '700'}}>Hello</p>
  </div>

三、練習寫一個會一直用到的 component

在開發專案時，你一定會遇到需要渲染相同樣貌元件的狀況，這時候你一定要學會使用組合 component 這個簡單的運用，會讓你的開發更為事半功倍~最常見的就是像麵包屑或者按鈕等。

範例： 你有一個名叫 Repeat 的元件

class Repeat extends React.Component {
  render() {
    const { des } = this.props;
    
    return (
      <div 
        style={{
          marginTop: '20px',
        }}
       >
        <p style={{fontWeight: '700'}}>Hello, I said </p>
        <p style={{color: '#7BA23F'}}>{des} !</p>
      </div>
    );
  }
}

四、每個頁面都可以由很多 component 組成

前台網頁在開發上一定會有很多區塊，如果寫得太多太冗長、tag標籤不易解讀時，很容易造成程式碼維護不易的狀況，這時候也可以選擇將大區塊拉成一個一個的小 component ，最後再組成一個頁面。

範例： 單一頁面由多個 component 組成的範例

class App extends React.Component {
  render() {
    return (
      <div className="game">
          <PageTitle />
          <Content />
          <Repeat des="Ok" />
          <Repeat des="Fighting" />
          <Repeat des="Good" />
      </div>
    );
  }
}

五、今天的 React 小練習

結合今天分享的內容，可以看看連結中的簡單範例，我的 codepen連結

React 小練習

參考資源：React 官網