React組件化開發

 

環境搭建：

1.安裝node.js

2.安裝cnpm   

 # npm install -g cnpm --registry=https://registry.npm.taobao.org

3.全局安裝create-react-app:

  # cnpm install -g create-react-app 

4.建立工做目錄

  # create-react-app  react-todo-list

5.啓動（開發版本）服務：

  # cd react-todo-list

  # npm start　　

便可經過localhost:3000在瀏覽器下訪問了。

 

開發環境入口文件index.js：

項目入口文件

 

 

問答：什麼是組件化？

包含組件化封裝和組件化複用兩方面。

一.組件的封裝：
react組件封裝從頁面結構上，包含三部分：
1.視圖層V層 render
2.數據層state constructor
3.變化邏輯——事件（數據驅動視圖）

二.組件的複用：
經過傳入不一樣的屬性props，達到複用的目的。

 

問答：JSX本質是什麼？

JSX概念：這種看起來可能有些奇怪的標籤語法既不是字符串也不是 HTML。它被稱爲 JSX， 一種 JavaScript 的語法擴展。

JSX本質從三個方面講：
1.jsx語法（標籤，js表達式，判斷，循環，事件綁定）
(1)註釋：
{/* 註釋內容 */}
(2)判斷類型{}內能夠是變量，|| 或 &&判斷 ，三元表達式，map循環（跟return）等等。
(3)但是定義樣式存入
(4)與HTML語法不一樣的地方
    class寫成className
    tabindex寫成tabIndex
    font-size改爲fontSize
由於 JSX 的特性更接近 JavaScript 而不是 HTML , 因此 React DOM 使用 camelCase 小駝峯命名 來定義屬性的名稱，而不是使用 HTML 的屬性名稱。

2.jsx本質是語法糖，最終會轉化爲js(React.createElement)才能運行。
    JSX語法沒法被瀏覽器解析（vue中的v-for,v-if等也不行），JSX只是個js語法糖（更好用，更好理解），它在開發環境中編譯時，被解析爲js，因此頁面纔會引入React
    # import React from 'react'就是爲解析jsx成js的

React.createElement的兩種用法:

1.子元素是節點

2.子元素是數組

e.g 子元素是節點

 

e.g 子元素是數組(ul-li)

 

3.jsx已經造成了獨立的標準。
    JSX是React引入的，但不是React獨有的
    React已經將他做爲獨立標準開放，因此其餘項目也能夠用的。
    React.createElement()是能夠自定義修改的（_h()）
    說明：自己功能已經完備；和其餘標準兼容和擴展性沒問題。 

npm安裝babel後便可查看react解析JSX的代碼結構

JSX代碼以下：

 React下配置babel須要作三項項工做：

1.# cnpm  install --save-dev babel-plugin-transform-react-jsx

2. 根目錄下建立 .babelrc文件

3. 執行 # babel --plugins  transform-react-jsx  文件名

執行babel

結果以下：

實例一：

 

實例二：

 

 能夠將jsx名稱轉換成h函數