React如何搭建HelloWorld環(huán)境-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)React如何搭建Hello World環(huán)境的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)易縣,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):028-86922220

前言

React 是一個(gè)用于構(gòu)建用戶(hù)界面的 JavaScript 庫(kù)。react主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。關(guān)注React也已經(jīng)很久了，一直沒(méi)能系統(tǒng)地深入學(xué)習(xí)，最近準(zhǔn)備好好研究一下，并且親自動(dòng)手做一些實(shí)踐。

不管是學(xué)習(xí)一門(mén)語(yǔ)言也好，還是學(xué)習(xí)一個(gè)框架也好，都是從最初的hello world程序開(kāi)始的，今天我們也來(lái)用react寫(xiě)一個(gè)hello world出來(lái)，了解一下如何編寫(xiě)及運(yùn)行React。

入門(mén)教程及環(huán)境搭建

在官方文檔中，有一種方式是基于npm的，我比較喜歡這種方式，這也是官方比較推薦的，下面我們就一步一步創(chuàng)建一個(gè)React的簡(jiǎn)單應(yīng)用。

首先我們創(chuàng)建一個(gè)react-test目錄，進(jìn)入該目錄后運(yùn)行“npm install –yes”生成一個(gè)默認(rèn)的package.json文件，然后創(chuàng)建一個(gè)main.js文件，用于放置React的源代碼，如下：

// main.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
 <h2>Hello, world!</h2>,
 document.getElementById('example')
);

上面我們使用到了require語(yǔ)法加載react和react-dom庫(kù)的代碼中，另外代碼中還有React的JSX語(yǔ)法，所以我們需要對(duì)這個(gè)文件做一些操作，把源代碼轉(zhuǎn)換成目前瀏覽器識(shí)別的目標(biāo)代碼。

轉(zhuǎn)換操作涉及到了一個(gè)工具：Browserify，官方首頁(yè)是這么介紹的：

Browserify lets you require(‘modules') in the browser by bundling up all of your dependencies.

言簡(jiǎn)意賅，Browserify就是負(fù)責(zé)把依賴(lài)到的庫(kù)和當(dāng)前文件打包到一起，比如上面我們依賴(lài)到了react和react-dom庫(kù)，那么在經(jīng)過(guò)Browserify處理之后，main.js和react以及react-dom會(huì)被打包到一個(gè)文件里面。要想打包，首先我們應(yīng)該安裝Browserify包，只需一個(gè)簡(jiǎn)單的命令即可：

npm install -g browserify

為了將main.js轉(zhuǎn)換成可用的目標(biāo)文件，我們需要使用下面的命令安裝相關(guān)的依賴(lài)庫(kù)：

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

其中babelify包是Browserify的babel轉(zhuǎn)換器，而babel-preset-react是針對(duì)React的babel轉(zhuǎn)碼規(guī)則包。在安裝完這幾個(gè)依賴(lài)庫(kù)之后，目錄結(jié)構(gòu)如下圖所示： 

React如何搭建Hello World環(huán)境 

我們就可以使用Browserify對(duì)main.js處理及打包了，在當(dāng)前目錄中執(zhí)行下面的命令即可：

browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

執(zhí)行完這條命令后，當(dāng)前目錄下會(huì)生成一個(gè)bundle.js，如圖所示： 

React如何搭建Hello World環(huán)境 

有了bundle.js文件，我們只需在應(yīng)用中引入即可，現(xiàn)在我們?cè)诋?dāng)前目錄創(chuàng)建一個(gè)index.html，內(nèi)容如下：

<html>
 <body>
  <div id="example"></div>
  <script type="text/javascript" src="bundle.js"></script>
 </body>
</html>

在瀏覽器中直接打開(kāi)這個(gè)文件即可看到我們的hello world程序了，可以從開(kāi)發(fā)工具中看的到，React的確起作用了： 

React如何搭建Hello World環(huán)境 

到目前為止，我們已經(jīng)實(shí)現(xiàn)了React的hello world程序，不過(guò)使用browserify命令時(shí)后面跟那么多參數(shù)，十分的不便，我們考慮將其移至package.json中的scripts中：

"scripts": {
 "bundle": "browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js"
}

配置完成之后，我們就可以安裝并使用本地的browserify來(lái)打包應(yīng)用了，并且使用npm的命令來(lái)執(zhí)行：

npm uninstall -g browserify
npm install browserify --save-dev
npm run bundle

以后再改動(dòng)main.js時(shí)，只需執(zhí)行npm run bundle即可完成轉(zhuǎn)譯和打包。

以上介紹了如何編譯打包JSX代碼，如果在項(xiàng)目實(shí)際應(yīng)用時(shí)，上面的操作可能滿(mǎn)足不了我們的需求，比如實(shí)時(shí)監(jiān)測(cè)文件變化自動(dòng)構(gòu)建等功能。下面我會(huì)使用gulp來(lái)搭建一個(gè)簡(jiǎn)易的自動(dòng)化構(gòu)建系統(tǒng)，用于將React源代碼轉(zhuǎn)譯打包和壓縮。
首先，我們創(chuàng)建一個(gè)react-dev的項(xiàng)目，結(jié)構(gòu)如下： 

React如何搭建Hello World環(huán)境 

這個(gè)項(xiàng)目包含一個(gè)app目錄，里面又包含jsx目錄和index.html，然后在jsx目錄里我們放置了React的源代碼main.jsx文件。
大家也可以看到gulpfile.js和package.json，我們逐一介紹。

首先是package.json，里面列舉了我們項(xiàng)目所需的依賴(lài)包：

"devDependencies": {
 "babel-preset-react": "^6.5.0",
 "gulp": "^3.9.1",
 "gulp-babel": "^6.1.2",
 "gulp-browserify": "^0.5.1",
 "gulp-connect": "^3.2.2",
 "gulp-rename": "^1.2.2",
 "gulp-uglify": "^1.5.3",
 "react": "^0.14.8",
 "react-dom": "^0.14.8"
 }

這些依賴(lài)包負(fù)責(zé)轉(zhuǎn)譯、打包、壓縮以及啟動(dòng)Web服務(wù)。首先我們需要使用npm install將這些依賴(lài)包安裝在本地。

然后介紹gulpfile.js，我們?cè)谶@個(gè)構(gòu)建文件中定義了幾個(gè)簡(jiǎn)單的任務(wù)：

var gulp = require('gulp');
var babel = require('gulp-babel');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var connect = require('gulp-connect');

//this task is responsible for compiling, bundling, renaming, compressing, and generating the released JS file.
gulp.task('build', function() {
 return gulp.src('app/jsx/*')
   .pipe(babel({
    presets: ['react']
   }))
   .pipe(browserify())
   .pipe(rename('main.min.js'))
   .pipe(uglify())
   .pipe(gulp.dest('app/js'))
});

//this task will watch any change in app/jsx folder and then re-build it.
gulp.task('watch', function() {
 gulp.watch([
 'app/jsx/*'
 ], function() {
 //any changed detected, call build task
 gulp.run('build');
 });
});

//this task will run a server listening at port 8080
gulp.task('server', function() {
 connect.server({
 root: 'app',
 port: 8080,
 livereload: true
 });
});

build任務(wù)負(fù)責(zé)執(zhí)行一次構(gòu)建任務(wù)，watch任務(wù)負(fù)責(zé)監(jiān)聽(tīng)jsx目錄變化，如有改動(dòng)則立即再次執(zhí)行構(gòu)建任務(wù)，server任務(wù)負(fù)責(zé)啟動(dòng)一個(gè)服務(wù)，在8080端口監(jiān)聽(tīng)。

最后如果要運(yùn)行里面的任務(wù)，我們需要先在全局安裝命令行工具：

npm install --global gulp-cli

然后，在項(xiàng)目當(dāng)前目錄下，執(zhí)行一個(gè)任務(wù)：

gulp watch

開(kāi)啟一個(gè)新的命令行，啟動(dòng)Web服務(wù)：

gulp server

之后在瀏覽器中輸入localhost:8080就可以看到我們的index.html內(nèi)容了。

感謝各位的閱讀！關(guān)于“React如何搭建Hello World環(huán)境”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：React如何搭建HelloWorld環(huán)境-創(chuàng)新互聯(lián)
分享地址：http://muchs.cn/article36/pdjsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站改版、電子商務(wù)、App設(shè)計(jì)、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

營(yíng)銷(xiāo)型網(wǎng)站建設(shè)