webpack+babel+react練習流程記錄

react簡介

來構建用戶界面的庫，不是框架
關注於view層
虛擬DOM 單向數據流 JSX這些概念

如何使用react

下載文件
    react
    react-dom
    browser.min.js

也能夠使用nodejs，須要用到的模塊
    webpack
    babel
    react
    react-dom

JSX介紹

JSX是React編寫組件的一種語法規範，能夠看爲是js的擴展，它支持將HTML和JS混寫在一塊兒，
最後使用babel編譯爲常規的js，方便瀏覽器解析

編寫第一個例子

使用 ReactDOM.render()

編寫組件

React.createClass()

給組件傳遞數據

props
props的值是不可變的
語法糖{...this.props}

組件間的嵌套

使用 props傳遞數據
但是數組存組件結構
map方法的使用

事件event處理

在元素上添加事件處理 
    onCLick    onMouseOver  onMouseOut
class => className
style的設置

改變組件的狀態

state
setState後組件狀態發生改變，DOM會從新渲染

組件間的通訊

父子級可以使用props傳遞函數的形式通訊
不是父子級或多級嵌套通訊 使用Pub/Sub模式通訊

案例：

react實現的留言板，提交留言可顯示在頁面的留言列表中

知識點：
    react的基本知識點 
            React.createClass 建立組件函數
            ReactDOM.render   渲染組件
            props             獲取傳遞的數據（不可變）
            state             組件狀態（可變，立馬渲染DOM）
            onClick           事件
            組件間的通訊
            Pub/Sub模式        發佈/訂閱模式
            componentDidMount 組件渲染後觸發的函數

webpack + babel + react 作到改變組件不刷新頁面就能夠顯示結果
主要模塊的用法，如：
    webpack  webpack-dev-server  css-loader style-loader html-webpack-plugin插件的使用
    babel babel-preset-es2015 babel-preset-react
    react react-dom react-hot-loader</font>
    
    
    webpack + babel + react 配置及使用

node安裝及npm包管理器的使用

npm init 建立package.json文件
npm install <module-name> -g/--save-dev/--save 安裝模塊
npm update <module-name > 更新模塊
npm uninstall <module-name > 卸載模塊

webpack一款模塊加載器兼打包工具

特色：

查找依賴，打包成一個文件
 支持CommonJs和AMD模塊
 把各類資源都當作模塊，用對應的加載器處理
 豐富的和可擴展的插件

官網http://webpack.github.io/
安裝

npm install webpack -g
 安裝後使用webpack命令

webpack.config.js文件配置項：

entry：配置入口文件
 output：配置輸出文件路徑及文件名
 module：模塊配置
      loaders：加載器配置
 devServer：配置服務
 plugins：配置插件

loader加載器：

css-loader、style-loader : 處理css文件和樣式
 babel-loader：轉換es6語法爲es5語法

插件：

html-webpack-plugin：生成html文件

使用webpack-dev-server服務

babel介紹及使用

使用babel做用：轉換es6語法爲es5語法

官網：http://babeljs.io/
安裝：

npm install  babel-cli -g
  安裝後使用babel命令

Es6語法使用：

let const申明變量
 箭頭函數Arrow Functions
 class import from extends

react介紹及使用

react用於構建用戶界面的javascript庫

安裝：

npm install react react-dom --save

用bebel編譯jsx語法，使用模塊：

npm install --save-dev babel-preset-react

使用react熱加載模塊，作到文件改動頁面自動刷新

安裝：
      npm install --save-dev react-hot-loader

綜合實例：todoList例子

分析todolist總體實現思路
    利用MVC的思路整合代碼

    主要功能：
            
            回車添加內容
            能夠對內容進行toggle選中操做
            刪除選項
            用LocalStorage對數據進行存儲（刷新記錄）

github地址：https://github.com/eve0803/webpack-babel-react-test