# React 入門 - 學習筆記
###### tags: `React` `JavaScript`
## 建立本地開發環境
### 方法一: CDN 連結

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

>以上的版本只適用於開發環境，並不適合用於線上環境。你可以在以下找到已壓縮和最佳化的 React 線上版本：

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

#### 如何撰寫

<!-- 步驟一 加入 React、Babel -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- 步驟二 加入 root 元素 -->
<div id="root"></div>
<script type="text/babel">

// 步驟三 建立 React 元件，定義元件首個字母要大寫
function App(){
    return <h1>Hello World!</h1>
}

// 步驟四 渲染元件到根元件上 
const el = document.getElementById('root');
const root = ReactDOM.createRoot(el);
    
root.render(<App />);    
    
</script>    

### 方法二: 使用 Create React App
Create React App 是一個適合學習 React 的環境，而且也是使用 React 建立一個全新的 single-page 應用程式的最佳方法。

>1. 確認你有安裝一個較新的版本的 Node.js。(>=14.0.0)
>2. 確認你有安裝一個較新的版本的 npm。(>=5.6)

打開 cmd 切換到想放專案的位置，輸入以下程式碼，就能建立一個新專案。

npx create-react-app my-app

:::warning
1. npx 不是拼寫錯誤，它是一個 npm 5.2+ 附帶的 package 執行器。
2. my-app 可以更換成自己的專案名稱。
:::

當你準備好發佈到線上環境，執行 ```npm run build``` 會在 build 文件夾裡建立一個你的應用程式的最佳化版本。

## 執行專案
在你的專案資料夾執行```npm start```瀏覽器會自動開啟 ```http://localhost:3000``` 的預設 port。

### 專案架構
* **node_modules :** 專案所需的模組套件都會存放在此資料夾中，存放了npm下載的外部模組套件, 這些套件的版本等資訊都記錄在資料夾中 package.json 裡面。

* **public :** 放置 index.html 、 網頁設定...等靜態檔案。

* **src :** 專案中的主要檔案都會放在這個資料夾中。
* **package.json :** 紀錄了專案名稱、版本資訊、 外部套件等相關訊息。

## JSX 介紹
### 快速嘗試 JSX
在你的專案中，嘗試 JSX 最快的方法就是將這個 Babel 的 ```<script>``` 標籤加入你的網頁上：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

現在你就可以在任何 ```<script>``` 標籤裡使用 JSX，方法就是為它們加上 type="text/babel" 如下:

<script type="text/babel"><script/>

### 在 JSX 中嵌入 expression表達式

const name = 'Bruce';
const element = <h1>Hello, {name}</h1>;

你可以在 JSX 的大括號中寫入任何合法的JavaScript 表達式。

:::info
>**表達式與陳述式**
>陳述式: `var a = 1;` 、 `if...else` 、 `function fn(){}`
>表達式: `a = 2;` 、 `true && true` 、 `const fn = function(){}`
>表達式一定會回傳結果。
:::
:::warning
JSX 最外層只能有一個根元素，有多層元素時建議用使用()。style 必須使用物件形式。

fuction App(){
    return (
        <>
            <h1 style={{color: 'blue'}}>Hello</h1>
            <p>World</p>
        </>    
    )
}

:::
### JSX 是如何運作的
Babel 將 JSX 編譯為呼叫 React.createElement() 的程式。

const element = (
  <h1 className="greeting">
    Hello, World!
  </h1>
); 

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, World!'
);
// 標籤、HTML 屬性、內容

:::warning
由於 JSX 比較接近 JavaScript 而不是 HTML，React DOM 使用 camelCase(駝峰式命名) 來命名屬性而不是使用慣有的 HTML 屬性名稱。
:::
### JSX 與 HTML 的標籤屬性
* **className**

<div><button type="button" className="btn btn-primary">Primary</button></div>

* **checked**

<div><input type="checkbox" defaultChecked /></div>

* **value**

<div><input type="text" defaultValue="預設值!" /></div>

* **label for**

<div>
    <label htmlFor="email">輸入 Email</label>
    <input type="email" id="email" />
</div>

* **selected**

<div>
    <select name="" id="" defaultValue="2"/>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>

* **textarea**

<div>
    <textarea name="" id="" cols="30" rows="5" defaultValue="預設文字" />
</div>