React入門教程之Hello World以及環(huán)境搭建詳解
前言
React 是一個用于構(gòu)建用戶界面的 JavaScript 庫。react主要用于構(gòu)建UI,很多人認(rèn)為 React 是 MVC 中的 V(視圖)。關(guān)注React也已經(jīng)很久了,一直沒能系統(tǒng)地深入學(xué)習(xí),最近準(zhǔn)備好好研究一下,并且親自動手做一些實踐。
不管是學(xué)習(xí)一門語言也好,還是學(xué)習(xí)一個框架也好,都是從最初的hello world程序開始的,今天我們也來用react寫一個hello world出來,了解一下如何編寫及運(yùn)行React。
入門教程及環(huán)境搭建
在官方文檔中,有一種方式是基于npm的,我比較喜歡這種方式,這也是官方比較推薦的,下面我們就一步一步創(chuàng)建一個React的簡單應(yīng)用。
首先我們創(chuàng)建一個react-test目錄,進(jìn)入該目錄后運(yùn)行“npm install –yes
”生成一個默認(rèn)的package.json文件,然后創(chuàng)建一個main.js文件,用于放置React的源代碼,如下:
// main.js var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, 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就是負(fù)責(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)容如下:
<html> <body> <div id="example"></div> <script type="text/javascript" src="bundle.js"></script> </body> </html>
在瀏覽器中直接打開這個文件即可看到我們的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" }
這些依賴包負(fù)責(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ù)負(fù)責(zé)執(zhí)行一次構(gòu)建任務(wù),watch任務(wù)負(fù)責(zé)監(jiān)聽jsx目錄變化,如有改動則立即再次執(zhí)行構(gòu)建任務(wù),server任務(wù)負(fù)責(zé)啟動一個服務(wù),在8080端口監(jiān)聽。
最后如果要運(yùn)行里面的任務(wù),我們需要先在全局安裝命令行工具:
npm install --global gulp-cli
然后,在項目當(dāng)前目錄下,執(zhí)行一個任務(wù):
gulp watch
開啟一個新的命令行,啟動Web服務(wù):
gulp server
之后在瀏覽器中輸入localhost:8080就可以看到我們的index.html內(nèi)容了。
上面的項目已放到Github上,感興趣的同學(xué)可以去看一下,也可以克隆到本地親自試一試。
源碼下載
github地址:https://github.com/scottliu2011/react-dev
本地下載地址:http://xiazai.jb51.net/201707/yuanma/react-dev(jb51.net).rar
使用gulp構(gòu)建前端工程大大簡化了開發(fā)流程,大家也可以在這個簡易項目基礎(chǔ)上針對實際項目做一些擴(kuò)展,當(dāng)然如果學(xué)習(xí)React過程中有了新的構(gòu)建需求,我也會及時更新到Github上的。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
React Native開發(fā)封裝Toast與加載Loading組件示例
這篇文章主要介紹了React Native開發(fā)封裝Toast與加載Loading組件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09react render的原理及觸發(fā)時機(jī)說明
這篇文章主要介紹了react render的原理及觸發(fā)時機(jī)說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02