成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

aisuhua / 3449人閱讀

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

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



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


npm install gulp -g


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


npm init


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


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


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


npm install react react-dom --save


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


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


這個(gè)是babel編譯器需要的插件用來編譯es6和react的jsx的語法
5、創(chuàng)建一個(gè)叫做gulpfile.js的文件 這個(gè)是gulp的執(zhí)行文件 以下代碼是一個(gè)簡單的構(gòu)建react項(xiàng)目的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 任務(wù) 用于創(chuàng)建本地服務(wù)器 
gulp.task("connect",function(){
    connect.server({
        root:"./",
        port:"3000",
        livereload:true,
        host:"localhost"
    })
});
//編譯任務(wù) 
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"))
        //編譯文件目標(biāo)目錄
        .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)建一個(gè)名為domsrc的目錄 在這個(gè)目錄下在創(chuàng)建一個(gè)app目錄 里面創(chuàng)建一個(gè)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://m.hztianpu.com/yun/79499.html

               

                      
               
              

              

                
相關(guān)文章

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

從零開始，用最少的配置、最少的代碼、最少的依賴來搭建一個(gè)最簡單的webpack+react環(huán)境。
最近在玩webpack+rea...
    
                                                   
                          
    
                                
    
                                    番茄西紅柿
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    手挽手帶你學(xué)React：一檔 React環(huán)境搭建，語法規(guī)則，基礎(chǔ)使用
    
                                                     
    摘要：當(dāng)屬性是一個(gè)回調(diào)函數(shù)時(shí)，函數(shù)接收底層元素或類實(shí)例取決于元素的類型作為參數(shù)。

手挽手帶你學(xué)React入門第一期,帶你熟悉React的語法規(guī)則,消除對JSX的恐懼感,由于現(xiàn)在開發(fā)中都是使用ES6語法開發(fā)React，所以這次也使用ES6的模式進(jìn)行教學(xué)，如果大家對ES6不熟悉的話,先去看看class相關(guān)內(nèi)容吧，這里我也慢慢帶大家一步一步學(xué)會React。
視頻教程
視頻教程可移步我的個(gè)人博客：h...
    
                                                   
                          
    
                                
    
                                    BicycleWarrior
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    拒絕Redux文檔“毒害” 一個(gè)項(xiàng)目告訴你Redux最新真正哲學(xué)
    
                                                     
    摘要：之前分享過幾篇關(guān)于技術(shù)棧的原創(chuàng)文章解析前端架構(gòu)學(xué)習(xí)復(fù)雜場景數(shù)據(jù)設(shè)計(jì)干貨總結(jié)打造單頁應(yīng)用一個(gè)項(xiàng)目理解最前沿技術(shù)棧真諦一個(gè)工程實(shí)例今天進(jìn)一步剖析一個(gè)實(shí)際案例移動網(wǎng)頁版。目前面臨的問題在于提高產(chǎn)品的各方面性能體驗(yàn)。

之前分享過幾篇關(guān)于React技術(shù)棧的原創(chuàng)文章：

解析Twitter前端架構(gòu) 學(xué)習(xí)復(fù)雜場景數(shù)據(jù)設(shè)計(jì)
React Conf 2017 干貨總結(jié)1: React + ES next ...
    
                                                   
                          
    
                                
    
                                    YuboonaZhang
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    Webpack系列——手把手教你使用Webpack搭建簡易的React開發(fā)環(huán)境
    
                                                     
    摘要：在這篇文章中我們開始利用我們之前所學(xué)搭建一個(gè)簡易的開發(fā)環(huán)境，用以鞏固我們之前學(xué)習(xí)的知識。

文章首發(fā)于我的github及個(gè)人博客，github請看https://github.com/huruji/blo...，轉(zhuǎn)載請注明出處。
在這篇文章中我們開始利用我們之前所學(xué)搭建一個(gè)簡易的React開發(fā)環(huán)境，用以鞏固我們之前學(xué)習(xí)的Webpack知識。首先我們需要明確這次開發(fā)環(huán)境需要達(dá)到的效果：1、...
    
                                                   
                          
    
                                
    
                                    cucumber
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    一名【合格】前端工程師的自檢清單
    
                                                     
    摘要：在他的重學(xué)前端課程中提到到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。大部分前端工程師的知識，其實(shí)都是來自于實(shí)踐和工作中零散的學(xué)習(xí)。一基礎(chǔ)前端工程師吃飯的家伙，深度廣度一樣都不能差。

開篇
前端開發(fā)是一個(gè)非常特殊的行業(yè)，它的歷史實(shí)際上不是很長，但是知識之繁雜，技術(shù)迭代速度之快是其他技術(shù)所不能比擬的。
winter在他的《重學(xué)前端》課程中提到：
到現(xiàn)在為止，前端工程師已經(jīng)成為研...
    
                                                   
                          
    
                                
    
                                    羅志環(huán)
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<