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

資訊專欄INFORMATION COLUMN

我的React開發(fā)之路1:React的環(huán)境搭建

aisuhua / 3379人閱讀

摘要：是大臉書出的一個前端開發(fā)框架。與其說是一個框架，我更加認為更是一種模式，從年月份開始接觸，我就認為這個框架以后一定會火。是一個單向數(shù)據(jù)流的框架，不同于和的雙向數(shù)據(jù)綁定的單向數(shù)據(jù)流可以數(shù)據(jù)模式更加單一，更利于前端的維護。

React是大臉書出的一個前端開發(fā)框架。與其說是一個框架，我更加認為React更是一種模式，從2015年10月份開始接觸React，我就認為這個框架以后一定會火。React是一個單向數(shù)據(jù)流的框架，不同于Vue和Angular的雙向數(shù)據(jù)綁定 React的單向數(shù)據(jù)流可以數(shù)據(jù)模式更加單一，更利于前端的維護。 好了，廢話不多說 如果想具體學習React，可以參考我以后的教程或者參考網(wǎng)上大量的資料 還有萬能的github
React環(huán)境的搭建
首先得明白React的開發(fā)是基于JSX去開發(fā)的，所以我們第一步做的就是編譯JSX 因為普通的瀏覽器并不懂的JSX 當然你也可以這樣:

個人十份不建議用以上的方式因為非常不利于代碼的維護和開發(fā)而且也有各種的兼容性問題 當然 你想測試jsx就可以是用 編譯JSX的方式非常多：webpack browserify+gulp+babelify 或者使用TypeScript用微軟的編譯器去編譯
首先本人比較習慣第二種方式 也是介紹第二種方式
第一步
安裝必要的工具 node.js gulp
安裝node.js 去官網(wǎng)安裝node的最新版 下載根據(jù)提示安裝即可
安裝gulp 在node安裝完之后 你需要用npm的命令去安裝gulp :

npm install gulp -g

安裝好gulp之后，就開始構(gòu)建項目，可以新建一個目錄名字，命令行指向該目錄，也就是cd到此目錄
輸入以下的命令：

npm init

根據(jù)提示做完以下的工作之后， 在目錄中就會有一個名字叫做package.json的文件，然后就需要一些安裝一些開發(fā)插件了
1、我們需要將gulp安裝到項目目錄里來；

npm install gulp --save//
//或者
npm install --save gulp

2、安裝browserify ，browserify-shim，babelify vinyl-source-stream babel-preset-es2015 babel-preset-react

npm install browserify browserify-shim babelify vinyl-source-stream babel-preset-es2015 babel-preset-react --save-dev

這一步主要是安裝一些編譯器和一些必要的插件 具體怎么用后面會詳細的說
3、安裝react 和react-dom

npm install react react-dom --save

既然是react的開發(fā) 就必須要有react
4、寫好babel的配置：
創(chuàng)建一個叫做.babelrc的文件 在里面輸入以下的代碼

{
  "presets": ["react","es2015"]
}

這個是babel編譯器需要的插件用來編譯es6和react的jsx的語法
5、創(chuàng)建一個叫做gulpfile.js的文件 這個是gulp的執(zhí)行文件 以下代碼是一個簡單的構(gòu)建react項目的gulpfile.js的代碼

//gulp需要的模塊
var gulp = require("gulp");
var connect = require("gulp-connect");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var babel = require("babelify");

//gulp 任務 用于創(chuàng)建本地服務器 
gulp.task("connect",function(){
    connect.server({
        root:"./",
        port:"3000",
        livereload:true,
        host:"localhost"
    })
});
//編譯任務 
gulp.task("browserify",function(){
     //entris:入口文件的js  
    return browserify({entries: "./domsrc/app/Main.js", extensions: [".jsx"]})
         //用babel轉(zhuǎn)換
        .transform(babel)
        //需要browserify-shim轉(zhuǎn)換
        .transform(require("browserify-shim"))
        //bundle合并
        .bundle()
        .pipe(source("bundle.js"))
        //編譯文件目標目錄
        .pipe(gulp.dest("./bin-debug"));
});

6、package.json的配置文件修改:

  "browserify-shim": {
    "react": "global:React",
    "react-dom": "global:ReactDOM"
  }

將這段代碼加入到package.json里面 就可以了 現(xiàn)在環(huán)境基本已經(jīng)搭建完成

測試
我們在工程目錄下創(chuàng)建一個名為domsrc的目錄 在這個目錄下在創(chuàng)建一個app目錄 里面創(chuàng)建一個Main.js的文件，
文件里的代碼參考如下

var React = require("react");
var ReactDOM = require("react-dom");
class Main {
    constructor(){
        ReactDOM.render(
Hello World
,document.getElementById("content"));
    }
}
new Main();

然后在該目錄下執(zhí)行以下命令行

gulp browserify

可以看到在bin-debug生成了bundle.js的文件

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

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

相關(guān)文章

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

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

    番茄西紅柿 評論0 收藏0

  • 手挽手帶你學React：一檔 React環(huán)境搭建，語法規(guī)則，基礎(chǔ)使用

    摘要：當屬性是一個回調(diào)函數(shù)時，函數(shù)接收底層元素或類實例取決于元素的類型作為參數(shù)。 手挽手帶你學React入門第一期,帶你熟悉React的語法規(guī)則,消除對JSX的恐懼感,由于現(xiàn)在開發(fā)中都是使用ES6語法開發(fā)React，所以這次也使用ES6的模式進行教學，如果大家對ES6不熟悉的話,先去看看class相關(guān)內(nèi)容吧，這里我也慢慢帶大家一步一步學會React。 視頻教程 視頻教程可移步我的個人博客：h...

    BicycleWarrior 評論0 收藏0

  • 拒絕Redux文檔“毒害” 一個項目告訴你Redux最新真正哲學

    摘要：之前分享過幾篇關(guān)于技術(shù)棧的原創(chuàng)文章解析前端架構(gòu)學習復雜場景數(shù)據(jù)設(shè)計干貨總結(jié)打造單頁應用一個項目理解最前沿技術(shù)棧真諦一個工程實例今天進一步剖析一個實際案例移動網(wǎng)頁版。目前面臨的問題在于提高產(chǎn)品的各方面性能體驗。 之前分享過幾篇關(guān)于React技術(shù)棧的原創(chuàng)文章： 解析Twitter前端架構(gòu) 學習復雜場景數(shù)據(jù)設(shè)計 React Conf 2017 干貨總結(jié)1: React + ES next ...

    YuboonaZhang 評論0 收藏0

  • Webpack系列——手把手教你使用Webpack搭建簡易的React開發(fā)環(huán)境

    摘要：在這篇文章中我們開始利用我們之前所學搭建一個簡易的開發(fā)環(huán)境，用以鞏固我們之前學習的知識。 文章首發(fā)于我的github及個人博客，github請看https://github.com/huruji/blo...，轉(zhuǎn)載請注明出處。 在這篇文章中我們開始利用我們之前所學搭建一個簡易的React開發(fā)環(huán)境，用以鞏固我們之前學習的Webpack知識。首先我們需要明確這次開發(fā)環(huán)境需要達到的效果：1、...

    cucumber 評論0 收藏0

  • 一名【合格】前端工程師的自檢清單

    摘要：在他的重學前端課程中提到到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。一基礎(chǔ)前端工程師吃飯的家伙，深度廣度一樣都不能差。 開篇 前端開發(fā)是一個非常特殊的行業(yè)，它的歷史實際上不是很長，但是知識之繁雜，技術(shù)迭代速度之快是其他技術(shù)所不能比擬的。 winter在他的《重學前端》課程中提到： 到現(xiàn)在為止，前端工程師已經(jīng)成為研...

    羅志環(huán) 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<