# React 第一章: React 入門。
---
## 1.1.React的基本認識

:::warning
這邊只是測試語法來使用，並不是真實在開發中使用
在真實的專案或項目當中，應該是先進行編譯，再進行運行
:::

## 1.2.React的基本使用

### 1.2.1 相關js庫
:::info
1. react.js:React: 的核心庫
2. react-dom.js: 提供操作DOM的react擴展庫
3. babel.min.js:解析JSX 語法代碼轉為純JS語法代碼的庫
:::

### 1.2.2 引入
在頁面中引入js

<div id="test"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

### 1.2.3 編碼

<script type="text/babel"> <!-- 必須聲明babel,告訴babel.js解析裡面的jsx的代碼 -->

  // 創建虛擬DOM元素
  const vDom = <h1>Hello React</h1> // 千萬不要加引號
  // 渲染DOM到頁面真實DOM容器中
  ReactDOM.render(vDom, document.getElementById('test'))

</script>

:::spoiler
可以透過debugger 來看看，虛擬DOM跟原本的DOM元素屬性差別。可以看出誰輕誰重
:::
## 1.3. React JSX

### 1.3.1 虛擬DOM
:::info
1) React提供了一些API來創建一種 `特別` 的一般js對象
a. var element = React.createElement('h1', {id:'myTitle'},'hello')
b. 上面創建的就是一個簡單的虛擬DOM對象
2) 虛擬DOM對象最終都會被React轉換為真實的DOM
3) 我們編碼時基本只需要操作react的虛擬DOM相關數據, react會轉換為真實DOM變化而更新界面
:::

### 1.3.2 JSX
:::info
1) 全稱: JavaScript XML (html是有限的標籤名，xml可以自己定義標籤名-組件標籤)
2) react定義的一種類似於XML的JS擴展語法: XML+JS (本質還是JS、但瀏覽器要想識別，得透過babel轉換成JS)
3) 作用: 用來創建react虛擬DOM(元素)對象
a. var ele = <'h1>Hello JSX!</h1'> ==這邊的h1因為hackMD會吃到HTML效果所以在前後標籤內多了單引號，實作時請拿掉==
b. 注意1: 它不是字符串, 也不是HTML/XML標籤
c. 注意2: 它最終產生的就是一個JS對象
4) 標籤名任意: HTML標籤或其它標籤
5) 標籤屬性任意: HTML標籤屬性或其它
6) 基本語法規則
a. 遇到 <開頭的代碼, 以標籤的語法解析: html同名標籤轉換為html同名元素, 其它標籤需要特別解析
b. 遇到以 { 開頭的代碼，以JS語法解析: 標籤中的js代碼必須用{ }包含
7) babel.js的作用
a. 瀏覽器不能直接解析JSX代碼, 需要babel轉譯為純JS的代碼才能運行
b. 只要用了JSX，都要加上type="text/babel", 聲明需要babel來處理
:::

### 1.3.3 編碼

<div id="test1"></div>
<div id="test2"></div>
<!-- 引入js*3 因為篇幅省略-->
<script type="text/javascript">

const msg = 'I like you'
const myId = 'Jung'
// 1.創建虛擬DOM
// var element = React.createElement('h1', {id: 'myTitle'}, 'hello')
const vDom1 = React.createElement('h2', {id: myId.toLowerCase()}, msg.toLocaleUpperCase())
// const test1Div = document.getElementById('test1')
// debugger 可以看看和虛擬DOM-vDom1跟真實DOM-test1Div的差別
// 2.渲染虛擬DOM
ReactDOM.render(vDom1, document.getElementById('test1'))

</script>

<script type="text/babel">

// 1.創建虛擬DOM
const vDom2 = <h2 id={myId.toLocaleUpperCase()}>{msg.toLowerCase()}</h2>
// 2.渲染虛擬DOM
ReactDOM.render(vDom2, document.getElementById('test2'))

</script>

### 1.3.4渲染虛擬DOM(元素)
:::info
1) 語法: ReactDOM.render(virtualDOM, containerDOM)
2) 作用: 將虛擬DOM元素渲染到頁面中的真實容器DOM中顯示
3) 參數說明
a. 參數一: 純js或jsx創建的虛擬dom對象
b. 參數二: 用來包含虛擬DOM元素的真實dom元素對象(一般是一個div)
:::

### 1.3.5 建立虛擬DOM的兩種方式
:::info
1) 純JS(一般不用)
React.createElement('h1', {id:'myTitle'}, title)
2) JSX:
<'h1 id='myTitle'>{title}</h1'> ==請省略h1標籤內單引號==
:::

### 1.3.6 JSX練習
需求: 動態展示列表數據
- 前端JS框架列表
- JQuery
- zeptoo
- angular
- react
- vue

<h2>前端框架列表</h2>
<div id="example1"></div>
<!-- 引入3個js 因篇幅省略 -->
<script type="text/babel">

/*
    功能: 動態展示列表數據
    問題: 如何將一個數據的陣列轉換為一個標籤的陣列?
    使用陣列的map()
*/
const names = ['jQuery', 'zepto', 'angular', 'react', 'vue']

// 1.創建虛擬DOM
/* 
    <ul>
        <li>{name}</li>
    </ul>
*/
const ul = (
    <ul>
        {
            names.map((name, index) => <li key={index}>{name}</li>)
        }
    </ul>
    )

// 2.渲染虛擬DOM
ReactDOM.render(ul, document.getElementById('example1'))

</script>

## 1.4.模塊與組件和模塊化與組件化的理解
- 模塊: 形容js文件 具有特地功能的js文件，內部有數據(變量)以及數據的操作(函數)。將私有函數向外暴露，如果只有一個函數，就暴露函數，如果是兩個就是暴露對象(obj)。
- 模塊化: 用來形容項目或者項目編碼方式，看編碼是否是模塊化的方式。在寫項目的時候是一個模塊一個模塊編寫的，那就是了。
- 組件: 假設介面功能複雜，拆分成多個組件編寫，譬如拆成三個組件header，body，footer。一個介面的局部功能模塊。一個介面有好多功能介面組成(組成局部介面的所有資源的集合，都是屬於組件的組合部分ex:html,css,js,img.....)。
- 組件化: 在做項目的時候是用組件編寫的，組合起來實現，及組件化的項目。
### 1.4.1.模塊
1) 理解: 向外提供特定功能的js程序, 一般就是一個js文件
2) 為什麼: js代碼更多更複雜
3) 作用: 復用js, 簡化js的編寫, 提高js運行效率
### 1.4.2. 組件
1) 理解: 用來實現特定(局部)功能效果的代碼集合(html/css/js)
2) 為什麼: 一個界面的功能更複雜
3) 作用: 復用編碼, 簡化項目編碼, 提高運行效率
### 1.4.3. 模塊化
1) 當應用的js都以模塊來編寫的, 這個應用就是一個模塊化的應用
### 1.4.4. 組件化
1) 當應用是以多組件的方式實現, 這個應用就是一個組件化的應用

練習:

###### tags: `React`