成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack+babel+react練習(xí)流程記錄

DDreach / 1225人閱讀

摘要：簡(jiǎn)介來(lái)構(gòu)建用戶界面的庫(kù)，不是框架關(guān)注于層虛擬單向數(shù)據(jù)流這些概念如何使用下載文件也可以使用，需要用到的模塊介紹是編寫(xiě)組件的一種語(yǔ)法規(guī)范，可以看為是的擴(kuò)展，它支持將和混寫(xiě)在一起，最后使用編譯為常規(guī)的，方便瀏覽器解析編寫(xiě)第一個(gè)例子使用編寫(xiě)組件

react簡(jiǎn)介 
來(lái)構(gòu)建用戶界面的庫(kù)，不是框架
關(guān)注于view層
虛擬DOM 單向數(shù)據(jù)流 JSX這些概念
如何使用react 
下載文件
    react
    react-dom
    browser.min.js

也可以使用nodejs，需要用到的模塊
    webpack
    babel
    react
    react-dom
JSX介紹 
JSX是React編寫(xiě)組件的一種語(yǔ)法規(guī)范，可以看為是js的擴(kuò)展，它支持將HTML和JS混寫(xiě)在一起，
最后使用babel編譯為常規(guī)的js，方便瀏覽器解析
編寫(xiě)第一個(gè)例子 
使用 ReactDOM.render()
編寫(xiě)組件 
React.createClass()

給組件傳遞數(shù)據(jù)

props
props的值是不可變的
語(yǔ)法糖{...this.props}

組件間的嵌套

使用 props傳遞數(shù)據(jù)
可是數(shù)組存組件結(jié)構(gòu)
map方法的使用

事件event處理

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

改變組件的狀態(tài)

state
setState后組件狀態(tài)發(fā)生改變，DOM會(huì)重新渲染

組件間的通信

父子級(jí)可使用props傳遞函數(shù)的形式通信
不是父子級(jí)或多級(jí)嵌套通信 使用Pub/Sub模式通信
案例： 
react實(shí)現(xiàn)的留言板，提交留言可顯示在頁(yè)面的留言列表中

知識(shí)點(diǎn)：
    react的基本知識(shí)點(diǎn) 
            React.createClass 創(chuàng)建組件函數(shù)
            ReactDOM.render   渲染組件
            props             獲取傳遞的數(shù)據(jù)（不可變）
            state             組件狀態(tài)（可變，立馬渲染DOM）
            onClick           事件
            組件間的通信
            Pub/Sub模式        發(fā)布/訂閱模式
            componentDidMount 組件渲染后觸發(fā)的函數(shù)

webpack + babel + react 做到改變組件不刷新頁(yè)面就可以顯示結(jié)果
主要模塊的用法，如：
    webpack  webpack-dev-server  css-loader style-loader html-webpack-plugin插件的使用
    babel babel-preset-es2015 babel-preset-react
    react react-dom react-hot-loader
    
    
    webpack + babel + react 配置及使用
node安裝及npm包管理器的使用

npm init 創(chuàng)建package.json文件
npm install -g/--save-dev/--save 安裝模塊
npm update 更新模塊
npm uninstall 卸載模塊

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

特點(diǎn)：

 查找依賴，打包成一個(gè)文件
 支持CommonJs和AMD模塊
 把各種資源都看成模塊，用對(duì)應(yīng)的加載器處理
 豐富的和可擴(kuò)展的插件

官網(wǎng)http://webpack.github.io/
安裝

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

webpack.config.js文件配置項(xiàng)：

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

loader加載器：

 css-loader、style-loader : 處理css文件和樣式
 babel-loader：轉(zhuǎn)換es6語(yǔ)法為es5語(yǔ)法

插件：

  html-webpack-plugin：生成html文件

使用webpack-dev-server服務(wù)

babel介紹及使用 
使用babel作用：轉(zhuǎn)換es6語(yǔ)法為es5語(yǔ)法

官網(wǎng)：http://babeljs.io/
安裝：

 npm install  babel-cli -g
  安裝后使用babel命令
Es6語(yǔ)法使用： 
 let const申明變量
 箭頭函數(shù)Arrow Functions
 class import from extends
react介紹及使用 
 react用于構(gòu)建用戶界面的javascript庫(kù)

安裝：

 npm install react react-dom --save

用bebel編譯jsx語(yǔ)法，使用模塊：

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

使用react熱加載模塊，做到文件改動(dòng)頁(yè)面自動(dòng)刷新

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

綜合實(shí)例：todoList例子

    分析todolist整體實(shí)現(xiàn)思路
    利用MVC的思路整合代碼

    主要功能：
            
            回車添加內(nèi)容
            可以對(duì)內(nèi)容進(jìn)行toggle選中操作
            刪除選項(xiàng)
            用LocalStorage對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ)（刷新記錄）

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79587.html

相關(guān)文章

  • 最小白的webpack+react環(huán)境搭建

    摘要：接下來(lái)安裝和，執(zhí)行命令安裝很順利，沒(méi)有遇到任何問(wèn)題。再總結(jié)一下我們遇到的坑初始化時(shí)的項(xiàng)目名稱要合規(guī)，特別是不能出現(xiàn)中劃線下劃線。另外再增加，這樣刷新的速度會(huì)大大加快最終的文件目錄結(jié)構(gòu)為各文件的最終內(nèi)容本文也同步發(fā)表在我的公眾號(hào)“我的天空” 從零開(kāi)始，用最少的配置、最少的代碼、最少的依賴來(lái)搭建一個(gè)最簡(jiǎn)單的webpack+react環(huán)境。 最近在玩webpack+rea...

    番茄西紅柿 評(píng)論0 收藏0

  • react基于webpack和Babel 6上的開(kāi)發(fā)環(huán)境搭建

    摘要：可能在項(xiàng)目正式上線的時(shí)候才需要發(fā)布配置單文件入口版本新建一個(gè)和開(kāi)發(fā)環(huán)境不同的是，入口和出口。相應(yīng)的在的源也要進(jìn)行修改。加載模塊發(fā)布配置多文件模式庫(kù)最好就不要打包進(jìn)來(lái)。因?yàn)橐话銕?kù)都是不會(huì)改動(dòng)的。所以這里就要進(jìn)行庫(kù)的分離。 react-js開(kāi)發(fā)環(huán)境 時(shí)間：2016.3.19-12:29作者：三月懶驢基于：react版本：0.14基于：babel版本：6相關(guān)代碼：github 開(kāi)始一個(gè)項(xiàng)目 ...

    callmewhy 評(píng)論0 收藏0

  • 庫(kù)，組件，框架 - 收藏集 - 掘金

    摘要：哈哈，我理解，架構(gòu)就是骨架，如下圖所示譯年月個(gè)有趣的和庫(kù)前端掘金我們創(chuàng)辦的使命是讓你及時(shí)的了解開(kāi)發(fā)中最新最酷的趨勢(shì)。 翻譯 | 上手 Webpack ? 這篇就夠了！ - 掘金譯者：小 boy （滬江前端開(kāi)發(fā)工程師） 本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者及出處。 原文地址：https://www.smashingmagazine.... JavaSrip... 讀 Zepto 源碼之代碼結(jié)構(gòu) - ...

    tommego 評(píng)論0 收藏0

  • 發(fā)布 react 組件到 npm 上

    摘要：我發(fā)布了我的第一個(gè)組件，一個(gè)基于的標(biāo)簽云組件。然后將這個(gè)編譯命令寫(xiě)到里，如下那么以后要編譯下面的代碼，只需要執(zhí)行現(xiàn)在我們已經(jīng)有編譯好的代碼了，接下來(lái)就可以發(fā)布到供其他人使用了。 我發(fā)布了我的第一個(gè) npm 組件，一個(gè)基于 react 的 3d 標(biāo)簽云組件。在這途中我也是遇到了很多的坑，花在完善整個(gè)發(fā)布流程的時(shí)間遠(yuǎn)多于寫(xiě)這個(gè)組件本身的時(shí)間，所以我記錄下我覺(jué)得一個(gè)正常的 react 組件的...

    Yi_Zhi_Yu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<