webpack+babel+react練習流程記錄

DDreach 發布于2019-08-19 18:25 / 1221人閱讀

摘要：簡介來構建用戶界面的庫，不是框架關注于層虛擬單向數據流這些概念如何使用下載文件也可以使用，需要用到的模塊介紹是編寫組件的一種語法規范，可以看為是的擴展，它支持將和混寫在一起，最后使用編譯為常規的，方便瀏覽器解析編寫第一個例子使用編寫組件

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
    
    
    webpack + babel + react 配置及使用

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

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

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

GPU云服務器云服務器 Babel babel cdn babel7 babel6

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79587.html

最小白的webpack+react環境搭建

摘要：接下來安裝和，執行命令安裝很順利，沒有遇到任何問題。再總結一下我們遇到的坑初始化時的項目名稱要合規，特別是不能出現中劃線下劃線。另外再增加，這樣刷新的速度會大大加快最終的文件目錄結構為各文件的最終內容本文也同步發表在我的公眾號“我的天空” 從零開始，用最少的配置、最少的代碼、最少的依賴來搭建一個最簡單的webpack+react環境。最近在玩webpack+rea...

番茄西紅柿 2019-04-23 13:28 評論0 收藏0
react基于webpack和Babel 6上的開發環境搭建

摘要：可能在項目正式上線的時候才需要發布配置單文件入口版本新建一個和開發環境不同的是，入口和出口。相應的在的源也要進行修改。加載模塊發布配置多文件模式庫最好就不要打包進來。因為一般庫都是不會改動的。所以這里就要進行庫的分離。 react-js開發環境時間：2016.3.19-12:29作者：三月懶驢基于：react版本：0.14基于：babel版本：6相關代碼：github 開始一個項目 ...

callmewhy 2019-08-19 18:01 評論0 收藏0
庫，組件，框架 - 收藏集 - 掘金

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

tommego 2019-08-20 16:33 評論0 收藏0
發布 react 組件到 npm 上

摘要：我發布了我的第一個組件，一個基于的標簽云組件。然后將這個編譯命令寫到里，如下那么以后要編譯下面的代碼，只需要執行現在我們已經有編譯好的代碼了，接下來就可以發布到供其他人使用了。我發布了我的第一個 npm 組件，一個基于 react 的 3d 標簽云組件。在這途中我也是遇到了很多的坑，花在完善整個發布流程的時間遠多于寫這個組件本身的時間，所以我記錄下我覺得一個正常的 react 組件的...

Yi_Zhi_Yu 2019-08-23 15:05 評論0 收藏0