React 第一章: React 入門。

---

1.1.React的基本認識

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

1.2.React的基本使用

1.2.1 相關js庫

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>

可以透過debugger 來看看，虛擬DOM跟原本的DOM元素屬性差別。可以看出誰輕誰重

1.3. React JSX

1.3.1 虛擬DOM

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

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(元素)

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

1.3.5 建立虛擬DOM的兩種方式

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