從零開始 2，react -快速上手

什麼是React

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

	用來構建UI的 JavaScript庫
	React 不是一個 MVC 框架，僅僅是視圖（V）層的庫

特點

1 使用 JSX語法 創建組件，實現組件化開發，爲函數式的 UI 編程方式打開了大門
2 性能高的讓人稱讚：通過 diff算法 和 虛擬DOM 實現視圖的高效更新
3 HTML僅僅是個開始

爲什麼要用React

1 使用組件化開發方式，符合現代Web開發的趨勢
2 技術成熟，社區完善，配件齊全，適用於大型Web項目（生態系統健全）
3 由Facebook專門的團隊維護，技術支持可靠
4 ReactNative - Learn once, write anywhere: Build mobile apps with React
5 使用方式簡單，性能非常高，支持服務端渲染
6 React非常火，從技術角度，可以滿足好奇心，提高技術水平；從職業角度，有利於求職和晉升，有利於參與潛力大的項目

React中的核心概念

1 虛擬DOM（Virtual DOM）
2 Diff算法（虛擬DOM的加速器，提升React性能的法寶）

虛擬DOM（Vitural DOM）

React將DOM抽象爲虛擬DOM，虛擬DOM其實就是用一個對象來描述DOM，通過對比前後兩個對象的差異，最終只把變化的部分重新渲染，提高渲染的效率

爲什麼用虛擬dom，當dom反生更改時需要遍歷 而原生dom可遍歷屬性多大231個 且大部分與渲染無關 更新頁面代價太大

React的基本使用

安裝：npm i -S react react-dom
react：react 是React庫的入口點
react-dom：提供了針對DOM的方法，比如：把創建的虛擬DOM，渲染到頁面上

// 1. 導入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 2. 創建 虛擬DOM
// 參數1：元素名稱  參數2：元素屬性對象(null表示無)  參數3：當前元素的子元素string||createElement() 的返回值
const divVD = React.createElement('div', {
  title: 'hello react'
}, 'Hello React！！！')

// 3. 渲染
// 參數1：虛擬dom對象  參數2：dom對象表示渲染到哪個元素內 參數3：回調函數
ReactDOM.render(divVD, document.getElementById('app'))

createElement()的問題

var dv = React.createElement(
  "div",
  { className: "shopping-list" },
  React.createElement(
    "h1",
    null,
    "Shopping List for "
  ),
  React.createElement(
    "ul",
    null,
    React.createElement(
      "li",
      null,
      "Instagram"
    ),
    React.createElement(
      "li",
      null,
      "WhatsApp"
    )
  )
)
// 渲染
ReactDOM.render(dv, document.getElementById('app'))

JSX 的基本使用

注意：JSX語法，最終會被編譯爲 createElement() 方法
推薦：使用 JSX 的方式創建組件
JSX - JavaScript XML
安裝：npm i -D babel-preset-react （依賴與：babel-core/babel-loader）

/* 1 在 .babelrc 開啓babel對 JSX 的轉換 */
{
  "presets": [
    "env", "react"
  ]
}

/* 2 webpack.config.js */
module: [
  rules: [
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
  ]
]

/* 3 在 js 文件中 使用 JSX */
const dv = (
  <div title="標題" className="cls container">Hello JSX!</div>
)

/* 4 渲染 JSX 到頁面中 */
ReactDOM.render(dv, document.getElementById('app'))

JSX的注意點

注意 1: 如果在 JSX 中給元素添加類, 需要使用 className 代替 class
    類似：label 的 for屬性，使用htmlFor代替
注意 2：在 JSX 中可以直接使用 JS代碼，直接在 JSX 中通過 {} 中間寫 JS代碼即可
注意 3：在 JSX 中只能使用表達式，但是不能出現 語句！！！
注意 4：在 JSX 中註釋語法：{/* 中間是註釋的內容 */}