欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React入門教程之Hello World以及環(huán)境搭建詳解

 更新時間:2017年07月11日 10:18:58   作者:liuhe688  
Facebook 為了開發(fā)一套更好更適合自己的JavaScript MVC 框架,所以產生了react。后來反響很好,所以于2013年5月開源。下面這篇文章主要給大家介紹了關于React入門教程之Hello World以及環(huán)境搭建的相關資料,需要的朋友可以參考借鑒。

前言

React 是一個用于構建用戶界面的 JavaScript 庫。react主要用于構建UI,很多人認為 React 是 MVC 中的 V(視圖)。關注React也已經(jīng)很久了,一直沒能系統(tǒng)地深入學習,最近準備好好研究一下,并且親自動手做一些實踐。

不管是學習一門語言也好,還是學習一個框架也好,都是從最初的hello world程序開始的,今天我們也來用react寫一個hello world出來,了解一下如何編寫及運行React。

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

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

首先我們創(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(
 <h1>Hello, world!</h1>,
 document.getElementById('example')
);

上面我們使用到了require語法加載react和react-dom庫的代碼中,另外代碼中還有React的JSX語法,所以我們需要對這個文件做一些操作,把源代碼轉換成目前瀏覽器識別的目標代碼。

轉換操作涉及到了一個工具:Browserify,官方首頁是這么介紹的:

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

言簡意賅,Browserify就是負責把依賴到的庫和當前文件打包到一起,比如上面我們依賴到了react和react-dom庫,那么在經(jīng)過Browserify處理之后,main.js和react以及react-dom會被打包到一個文件里面。要想打包,首先我們應該安裝Browserify包,只需一個簡單的命令即可:

npm install -g browserify

為了將main.js轉換成可用的目標文件,我們需要使用下面的命令安裝相關的依賴庫:

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

其中babelify包是Browserify的babel轉換器,而babel-preset-react是針對React的babel轉碼規(guī)則包。在安裝完這幾個依賴庫之后,目錄結構如下圖所示: 

 

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

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

執(zhí)行完這條命令后,當前目錄下會生成一個bundle.js,如圖所示: 

 

有了bundle.js文件,我們只需在應用中引入即可,現(xiàn)在我們在當前目錄創(chuàng)建一個index.html,內容如下:

<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來打包應用了,并且使用npm的命令來執(zhí)行:

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

以后再改動main.js時,只需執(zhí)行npm run bundle即可完成轉譯和打包。

以上介紹了如何編譯打包JSX代碼,如果在項目實際應用時,上面的操作可能滿足不了我們的需求,比如實時監(jiān)測文件變化自動構建等功能。下面我會使用gulp來搭建一個簡易的自動化構建系統(tǒng),用于將React源代碼轉譯打包和壓縮。
首先,我們創(chuàng)建一個react-dev的項目,結構如下: 

 

這個項目包含一個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"
 }

這些依賴包負責轉譯、打包、壓縮以及啟動Web服務。首先我們需要使用npm install將這些依賴包安裝在本地。

然后介紹gulpfile.js,我們在這個構建文件中定義了幾個簡單的任務:

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任務負責執(zhí)行一次構建任務,watch任務負責監(jiān)聽jsx目錄變化,如有改動則立即再次執(zhí)行構建任務,server任務負責啟動一個服務,在8080端口監(jiān)聽。

最后如果要運行里面的任務,我們需要先在全局安裝命令行工具:

npm install --global gulp-cli

然后,在項目當前目錄下,執(zhí)行一個任務:

gulp watch

開啟一個新的命令行,啟動Web服務:

gulp server

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

上面的項目已放到Github上,感興趣的同學可以去看一下,也可以克隆到本地親自試一試。

源碼下載

github地址:https://github.com/scottliu2011/react-dev

本地下載地址:http://xiazai.jb51.net/201707/yuanma/react-dev(jb51.net).rar

使用gulp構建前端工程大大簡化了開發(fā)流程,大家也可以在這個簡易項目基礎上針對實際項目做一些擴展,當然如果學習React過程中有了新的構建需求,我也會及時更新到Github上的。

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。

相關文章

  • React學習筆記之條件渲染(一)

    React學習筆記之條件渲染(一)

    條件渲染在React里就和js里的條件語句一樣。下面這篇文章主要給大家介紹了關于React學習記錄之條件渲染的相關資料,文中介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
    2017-07-07
  • React 封裝自定義組件的操作方法

    React 封裝自定義組件的操作方法

    React中自定義組件的重要性在于它們提供了代碼重用、降低耦合性、提升可維護性、更好的團隊協(xié)作、靈活性和易于測試和調試等好處,從而提高了開發(fā)效率和質量,這篇文章主要介紹了React 封裝自定義組件,需要的朋友可以參考下
    2023-12-12
  • react native 文字輪播的實現(xiàn)示例

    react native 文字輪播的實現(xiàn)示例

    這篇文章主要介紹了react native 文字輪播的實現(xiàn)示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • 原生+React實現(xiàn)懶加載(無限滾動)列表方式

    原生+React實現(xiàn)懶加載(無限滾動)列表方式

    這篇文章主要介紹了原生+React實現(xiàn)懶加載(無限滾動)列表方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • 一個基于react的圖片裁剪組件示例

    一個基于react的圖片裁剪組件示例

    本篇文章主要介紹了一個基于react的圖片裁剪組件示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • Unity?RectTransform詳解

    Unity?RectTransform詳解

    unity中的ui元素是有嚴格的父子關系的,子物體的位置是根據(jù)父物體的變化而變化的,而子物體和父物體聯(lián)系的橋梁就是Anchor,本文重點介紹Unity?RectTransform的相關知識,感興趣的朋友一起看看吧
    2024-01-01
  • React Native開發(fā)封裝Toast與加載Loading組件示例

    React Native開發(fā)封裝Toast與加載Loading組件示例

    這篇文章主要介紹了React Native開發(fā)封裝Toast與加載Loading組件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • react render的原理及觸發(fā)時機說明

    react render的原理及觸發(fā)時機說明

    這篇文章主要介紹了react render的原理及觸發(fā)時機說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • react實現(xiàn)全局組件確認彈窗

    react實現(xiàn)全局組件確認彈窗

    這篇文章主要為大家詳細介紹了react實現(xiàn)全局組件確認彈窗,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • react中的useEffect()的使用詳解

    react中的useEffect()的使用詳解

    useEffect()是react中的hook函數(shù),作用是用于創(chuàng)建由渲染本身引起的操作,介紹了依賴項數(shù)組不同的區(qū)別,對react useEffect()使用相關知識感興趣的朋友一起看看吧
    2024-05-05

最新評論