這篇文章給大家分享的是有關(guān)React如何搭建Hello World環(huán)境的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
前言
React 是一個用于構(gòu)建用戶界面的 JavaScript 庫。react主要用于構(gòu)建UI，很多人認為 React 是 MVC 中的 V（視圖）。關(guān)注React也已經(jīng)很久了，一直沒能系統(tǒng)地深入學(xué)習(xí)，最近準(zhǔn)備好好研究一下，并且親自動手做一些實踐。
不管是學(xué)習(xí)一門語言也好，還是學(xué)習(xí)一個框架也好，都是從最初的hello world程序開始的，今天我們也來用react寫一個hello world出來，了解一下如何編寫及運行React。
入門教程及環(huán)境搭建
在官方文檔中，有一種方式是基于npm的，我比較喜歡這種方式，這也是官方比較推薦的，下面我們就一步一步創(chuàng)建一個React的簡單應(yīng)用。
首先我們創(chuàng)建一個react-test目錄，進入該目錄后運行“npm install –yes”生成一個默認的package.json文件，然后創(chuàng)建一個main.js文件，用于放置React的源代碼，如下：
重慶分公司
重慶分公司
// main.js
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
Hello, world!
,
document.getElementById('example')
);上面我們使用到了require語法加載react和react-dom庫的代碼中，另外代碼中還有React的JSX語法，所以我們需要對這個文件做一些操作，把源代碼轉(zhuǎn)換成目前瀏覽器識別的目標(biāo)代碼。
轉(zhuǎn)換操作涉及到了一個工具：Browserify，官方首頁是這么介紹的：
Browserify lets you require(‘modules') in the browser by bundling up all of your dependencies.
言簡意賅，Browserify就是負責(zé)把依賴到的庫和當(dāng)前文件打包到一起，比如上面我們依賴到了react和react-dom庫，那么在經(jīng)過Browserify處理之后，main.js和react以及react-dom會被打包到一個文件里面。要想打包，首先我們應(yīng)該安裝Browserify包，只需一個簡單的命令即可：
npm install -g browserify
為了將main.js轉(zhuǎn)換成可用的目標(biāo)文件，我們需要使用下面的命令安裝相關(guān)的依賴庫：
npm install --save-dev react react-dom babelify babel-preset-react
其中babelify包是Browserify的babel轉(zhuǎn)換器，而babel-preset-react是針對React的babel轉(zhuǎn)碼規(guī)則包。在安裝完這幾個依賴庫之后，目錄結(jié)構(gòu)如下圖所示：
我們就可以使用Browserify對main.js處理及打包了，在當(dāng)前目錄中執(zhí)行下面的命令即可：
browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
執(zhí)行完這條命令后，當(dāng)前目錄下會生成一個bundle.js，如圖所示：
有了bundle.js文件，我們只需在應(yīng)用中引入即可，現(xiàn)在我們在當(dāng)前目錄創(chuàng)建一個index.html，內(nèi)容如下：
在瀏覽器中直接打開這個文件即可看到我們的hello world程序了，可以從開發(fā)工具中看的到，React的確起作用了：
到目前為止，我們已經(jīng)實現(xiàn)了React的hello world程序，不過使用browserify命令時后面跟那么多參數(shù)，十分的不便，我們考慮將其移至package.json中的scripts中：
"scripts": {
"bundle": "browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js"
}配置完成之后，我們就可以安裝并使用本地的browserify來打包應(yīng)用了，并且使用npm的命令來執(zhí)行：
npm uninstall -g browserify npm install browserify --save-dev npm run bundle
以后再改動main.js時，只需執(zhí)行npm run bundle即可完成轉(zhuǎn)譯和打包。
以上介紹了如何編譯打包JSX代碼，如果在項目實際應(yīng)用時，上面的操作可能滿足不了我們的需求，比如實時監(jiān)測文件變化自動構(gòu)建等功能。下面我會使用gulp來搭建一個簡易的自動化構(gòu)建系統(tǒng)，用于將React源代碼轉(zhuǎn)譯打包和壓縮。
首先，我們創(chuàng)建一個react-dev的項目，結(jié)構(gòu)如下：
這個項目包含一個app目錄，里面又包含jsx目錄和index.html，然后在jsx目錄里我們放置了React的源代碼main.jsx文件。
大家也可以看到gulpfile.js和package.json，我們逐一介紹。
首先是package.json，里面列舉了我們項目所需的依賴包：
"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"
}這些依賴包負責(zé)轉(zhuǎn)譯、打包、壓縮以及啟動Web服務(wù)。首先我們需要使用npm install將這些依賴包安裝在本地。
然后介紹gulpfile.js，我們在這個構(gòu)建文件中定義了幾個簡單的任務(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ù)負責(zé)執(zhí)行一次構(gòu)建任務(wù)，watch任務(wù)負責(zé)監(jiān)聽jsx目錄變化，如有改動則立即再次執(zhí)行構(gòu)建任務(wù)，server任務(wù)負責(zé)啟動一個服務(wù)，在8080端口監(jiān)聽。
最后如果要運行里面的任務(wù)，我們需要先在全局安裝命令行工具：
npm install --global gulp-cli
然后，在項目當(dāng)前目錄下，執(zhí)行一個任務(wù)：
gulp watch
開啟一個新的命令行，啟動Web服務(wù)：
gulp server
之后在瀏覽器中輸入localhost:8080就可以看到我們的index.html內(nèi)容了。
感謝各位的閱讀！關(guān)于“React如何搭建Hello World環(huán)境”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
