跳至主要內容

React - 基礎

約 4 分鐘
#React

React - 基礎

從 0 開始學 React

前言

學習 React 中最重要的角色「Babel」，Babel 是 Javascript 的編譯器，有了 Babel 就能更方便順暢的使用 React

React - 基礎環境引入

  1. Babel
    • <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    1. 瀏覽器不認識 ES6，依靠 Babel 把 ES6 轉成 ES5
    2. 瀏覽器不認識 jsx，依靠 Babel 把 jsx 轉成 js
    3. 可以更流暢的編碼
  2. React 核心庫
    • <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  3. React 擴展庫（讓 React 幫你操作 DOM）
    • <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

React 起手式

  1. 首先建立一個 HTML

    <!-- 先準備一個容器 -->
<div id="container"></div>
 
<!-- 引入 React 核心庫 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!-- 引入 React DOM，用來讓 React 操作 DOM -->
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 引入 Babel，用來將 jsx 轉成 js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
 
<!-- 這裡一定要寫 type="text/babel" -->
<script type="text/babel">
 
</script>

  2. 並在 script 內編寫虛擬 DOM

    // 1. 首先創建虛擬 DOM
const VDOM = {
    <h1 id="test">Hello world</h1>
}
// 2. 渲染虛擬 DOM 到頁面
ReactDOM.render( VDOM, document.getElementById('container') )

  3. 畫面呈現 Hello world

React - jsx 語法規則 與 必須知道的地方

  1. 這時候 HTML 添加樣式

    <style>
.bg-hexschool {
    background: #69F0AE;
}
</style>

  2. script 內將內容用變數的方式展現

    // 1. 宣告變數
const myId = 'test'
const myData = 'Hello world'
 
// 2. 建創虛擬 DOM
const VDOM = (
// 虛擬 DOM 只能有一個根標籤
  <div>
    {/* jsx 語法範例如下 */}
    {/* class 要改成 className */}
    {/* style 要用 {{ key=value }} 包起來，並採用駝峰命名法 */}
    <h1
      id={myId}
      className="bg-hexschool"
      style={{ fontSize: '20px' }}
    >
      {/* JS 表達式都要用 {} 包起來，包含註解 */}
      { myData }
    </h1>
    <p>虛擬 DOM 只能用一個標籤包起來</p>
    {/* 標籤需要閉合，例如最後面加 "/" */}
    <input type="text" />
  </div>
// <p>這個沒有被包起來，會報錯</p>
)
// 3. 渲染虛擬 DOM 到頁面
ReactDOM.render(VDOM, document.getElementById('container'))

  3. 畫面呈現 jsx 運用

總結 jsx 語法規則

  1. 定義虛擬 DOM 時，不要寫引號。
  2. 標籤中混入 JS 表達式要用 {} 包起來。
  3. 樣式的類名指定不要用 class，要用 className。
  4. 內聯樣式，要用 style={{ key=value }}的形式去寫。
    1. key 如果像是 font-size，要改成駝峰命名 fontSize。
    2. value 需要用引號包起來。
  5. 虛擬 DOM 必須只有一個根標籤
  6. 標籤必須閉合
  7. 標籤首字母
    1. 如果小寫開頭，則將把標籤轉為 HTML 中同名元素，如果 HTML 中無該標籤同名元素，則報錯。
    2. 如果大寫開頭，React 就去渲染對應的組件，如果組件沒有定義，則報錯

參考資料

相關文章

分享此文章
Johnson Mao

Johnson Mao

熱衷於分享技術、AI 與開發心得的軟體工程師。

GitHub

留言