React (1) 環境建立

發表於 更新於 分類於
React 環境建立

建立環境

建立 index.html ，並引入 react 的 cdn

1
2
3
4
5
6
<!-- react 函式庫 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- react dom -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- babel 用來編譯 JSX 語法 -->
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.25.3/babel.js"></script>

用 console.log(React, ReactDOM) ，確認資源有載入成功

加入根元素

在 html 中加入 react 元件要掛載的根元素

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

建立 React 元件

建立 React 元件後，渲染到畫面上

1
2
3
4
5
6
7
8
// 建立 React 元件
  function App() {
    return <h1>React 我來了</h1>
  }
// 渲染元件到根元件上
  const el = document.querySelector('#root');
  const root = ReactDOM.createRoot(el);
  root.render(<App />);

渲染方法也可以縮減為

1
2
3
ReactDOM
 .createRoot(document.querySelector('#root'))
 .render(<App />);

元件資料抽離

可以將元件內的資料抽離，用 js 管理，抽離出的資料可在模板上用 {} 帶入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/babel">

function App() {
  const data = {
    imageUrl:'https://plus.unsplash.com/premium_photo-1677545183884-421157b2da02?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    title: '卡斯柏',
    content: "改過的文字",
    link: 'https://getbootstrap.com/docs/5.2/components/card/',
  }

  return <div className="card">
    <img src={data.imageUrl} className="card-img-top" alt="..." />
    <div className="card-body">
      <h5 className="card-title">{ data.title }</h5>
      <p className="card-text">{ data.content }</p>
      <a href={data.link} className="btn btn-primary">Go somewhere</a>
    </div>
  </div>
}

const el = document.getElementById('root');
const root = ReactDOM.createRoot(el);
root.render(<App />);
</script>

表達式與 jsx

jsx 中僅能帶入表達式，無法帶入陳述式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
return <div className="card w-50">
  <img src={data.imageUrl} className="card-img-top" alt="..." />
  <div className="card-body">
    <h5 className="card-title">{ data.name }</h5>
    <p className="card-text">{ data.description }</p>
    <a href={data.link} target="_blank" className="btn btn-primary">Go somewhere</a>
    <br />
    { 1 }  // ok
    { 0 || 1 } // ok
    { data.name ? data.name : '杰倫' } // ok
    { (function () { return 2 * 2 })() } // ok
    { if (data.name) {} } // 帶入陳述式無效
  </div>
</div>