當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

React入门指引与实战

發(fā)布時間：2025/3/21 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 React入门指引与实战小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

React是Facebook公司推出的前端組件化解決方案，目的在于解決前端開發(fā)中存在的各個痛點。目前，前端框架與庫層出不窮，形成了異常繁榮的局面，那么Facebook為何還要重復造輪子呢？究其原因，Facebook認為現(xiàn)有的前端解決方案都不是很好（甚至Facebook認為MVC本身也是有問題的），無法解決自己在實際開發(fā)中面臨的種種問題，于是自己就開發(fā)出了React并將其開源；同時，基于React，Facebook又推出了React Native，旨在使用前端開發(fā)者熟悉的JavaScript等技術來開發(fā)原生App，實現(xiàn)一套代碼運行在iOS與Android等移動平臺上。一經(jīng)推出，React與React Native就得到了開發(fā)者的極大關注，短時間內(nèi)其在GitHub上就獲得了大量的關注，目前也是前端開發(fā)領域最火熱的技術之一。基于這一點，本文將會介紹React開發(fā)入門知識，通過一個實際可運行的案例帶領大家一步步掌握React開發(fā)的步驟，厘清React開發(fā)的各項知識點，同時對于開發(fā)過程中所用的工具有一定的認識和掌握。

開發(fā)IDE

同時，文中案例的開發(fā)是在JetBrains公司的WebStorm 2016.2版本（也是目前WebStorm的最新版）下進行的。WebStorm是一款非常強大的前端開發(fā)者一站式工具，內(nèi)置了前端開發(fā)者日常所用的大多數(shù)工具的支持，而且提供了強大的代碼提示、自動完成、代碼高亮等特性，是一個開箱機用的優(yōu)秀工具。對WebStorm感興趣的讀者可以參考我之前所寫的一篇文章。

前端框架分析

值得一提的是，目前的前端開發(fā)領域非常繁榮，各種工具、庫、理念層出不窮，再也不是前幾年jQuery一個庫打天下的境況了。隨著前端開發(fā)領域的持續(xù)發(fā)展，這一局面一定還會繼續(xù)下去，我個人認為目前前端的流行趨勢是這樣的：

React：由Facebook推出，通過單向數(shù)據(jù)綁定、虛擬DOM以及強大的生態(tài)圈（Flux、Redux等等），再配合WebPack等工具，掀起了前端的一陣旋風，也是各大公司前端所熱烈追逐的技術，目前呈現(xiàn)出非常強勁的發(fā)展勢頭，更新頻率也非常快速。
Angular：由Google推出，通過雙向數(shù)據(jù)綁定以及一整套完善的指令與庫實現(xiàn)了前端的一站式開發(fā)，目前也是SPA（Single Page Application，單頁面應用）的重要選擇之一。不久之后將會發(fā)布的Angular 2.0將會成為Angular的一個重要里程碑，新版本增加了諸多重要功能與特性，值得每一個前端開發(fā)者重點掌握。
jQuery：老牌的前端開發(fā)工具庫，目前依然得到了廣泛的應用。jQuery已經(jīng)流行很多年了，而且在可預計的未來還將一直流行下去。它簡化了前端開發(fā)者的日常工作，通過簡潔的函數(shù)封裝實現(xiàn)了DOM操作、CSS操作、Ajax調(diào)用、各種動畫效果，瀏覽器兼容性等諸多功能，是最受前端開發(fā)者青睞的工具之一。而且，jQuery還可以很好地與React及Angular進行集成，便于復用組織內(nèi)已有的基礎設施，增強效率。

? ? ??

本文將會重點關注于React，通過一個實際可運行的示例來一步步演示React的開發(fā)過程，同時還會給出關于工具、開發(fā)等的一些最佳實踐。

本文所選取的示例來自于React官網(wǎng)，不過進行了一定程度的增強和完善，更加便于React新手學習；同時，對于工具的使用也給出了一些建議。

開發(fā)工具

雖然本文介紹的是React前端開發(fā)，不過為了保持示例的完整性，文中同時給出了后端代碼，這樣學習者就可以直接在本機啟動服務器運行示例了。該示例雖然不大，但使用的工具還是不少的，希望大家能一步步跟著我的步伐操練起來。

本文所使用的主要工具與庫如下所示：

開發(fā)機器：MacBook Pro
開發(fā)工具：Web Storm 2016.2版本
Node
Express
nvm
npm
React
jQuery
JSON

值得一提的是，雖然可以通過任何文本編輯器來實現(xiàn)本文的示例，但我這里選取的是JetBrains公司的WebStorm作為開發(fā)工具，目的在于提升效率，讓開發(fā)者將注意力放在React本身，而不是工具的各項配置上。WebStorm提供了開箱機用的強大功能，是一款不可多得的前端開發(fā)伴侶。

項目簡介

本文將會帶領讀者使用React實現(xiàn)一個簡單的留言系統(tǒng)，使用者通過輸入自己的姓名與評論內(nèi)容來發(fā)布評論。評論發(fā)布完畢后可以顯示出評論列表；此外，程序還將通過輪詢的方式在不刷新頁面的情況下自動獲取其他評論者的評論內(nèi)容。這就是本應用的主題功能。由于本文主要突出React的使用介紹，因此對于樣式等方面幾乎沒有做任何優(yōu)化。該系統(tǒng)實際運行的樣子如下圖所示：

項目開發(fā)

首先需要安裝項目所用的工具，該項目的后端采用Node進行開發(fā)，因此需要先安裝Node。

直接安裝Node是非常簡單的事情，在Mac平臺上只需從Node官網(wǎng)（https://nodejs.org）下載Node的安裝包即可雙擊安裝，同時還會自動安裝npm（Node的包管理器）。目前Node的最新版本是6.3.1。不過這樣安裝Node存在一個嚴重的問題：Node現(xiàn)在的發(fā)展速度非常快，版本更迭也非常頻繁，可能安裝不就之后Node就發(fā)布了新的版本，這時如果要體驗Node的最新版特性就變得比較困難了。因為一方面要保留老的Node版本供系統(tǒng)開發(fā)所用，另一方面還想要嘗試Node的新特性。那該怎么辦呢？答案就是使用nvm（Node Version Manager）。

nvm是一個優(yōu)秀的Node版本管理器，可以使多個Node版本在同一臺電腦上共存并且互不影響，而且還能輕松實現(xiàn)各個版本的Node切換。此外，它還支持查詢本地安裝的各個Node版本，支持查詢遠程發(fā)布的所有Node版本與iojs（之前從Node分裂出來的一個版本，不過后來Node與iojs又合并了）版本，并且安裝也是非常便捷的。

安裝nvm：

[plain]?view plain?copy ?print?

curl?-o-?https://raw.githubusercontent.com/creationix/nvm/v0.31.3/install.sh?|?bash??

只需通過上述一行命令即可在Mac上安裝nvm。

安裝完畢后在Terminal中輸入命令：nvm help即可列出nvm支持的各項命令，比如說：

nvm --version：顯示nvm版本
nvm ls：列出本地安裝的所有Node版本
nvm ls-remote：列出遠程所有的Node與iojs版本
nvm current：顯示當前激活的Node版本
nvm install v0.10.32：安裝v0.10.32這個Node版本
nvm use 0.10：使用0.10這個Node版本
nvm alias default 0.10.32：將0.10.32這一版本作為默認使用的Node版本

以上只列出了nvm眾多功能的一些重要功能，感興趣的讀者可以自行安裝nvm并查看命令。對于我們這個示例來說，我們安裝最新版本的Node即可，命令如下所示：

[plain]?view plain?copy ?print?

nvm?install?v6.3.1??

上述命令同時還會自動安裝v6.3.1版本的Node所對應的npm，安裝完畢后輸入命令：

[plain]?view plain?copy ?print?

nvm?alias?default?v6.3.1??

上述命令用于將v6.3.1這一版本作為系統(tǒng)默認使用的Node版本。至此為止，Node與npm就安裝完畢了。

接下來，打開WebStorm，新建工程并命名為：react-tutorial，如下圖所示（這是完整的工程文件目錄結構）：

在工程中新建文件package.json（Node的包管理描述文件），輸入項目所需用到的依賴以及項目名字等基本信息，如下代碼所示：

[plain]?view plain?copy ?print?

{??

??"name":?"React_Tutorial",??

??"version":?"0.1.1",??

??"private":?true,??

??"main":?"server.js",??

??"dependencies":?{??

????"body-parser":?"^1.4.3",??

????"express":?"^4.4.5",??

????"uuid":?"^2.0.0"??

??}??

}??

我們這個項目使用到了Express框架、body-parser以及用于生成uuid的uuid庫。

然后在項目所在目錄下執(zhí)行命令：

[plain]?view plain?copy ?print?

npm?install??

這時，npm會根據(jù)package.json的文件內(nèi)容自動解析依賴并下載到項目目錄的node_modules下面，如下圖所示：

在項目目錄下新建目錄public，然后在public目錄下新建兩個子目錄：css與scripts，分別用于存放項目所用的CSS文件與JavaScript文件。

在項目根目錄下新建文件server.js，在server.js文件中編寫如下代碼：

[javascript]?view plain?copy ?print?

var?fs?=?require('fs');??

var?path?=?require('path');??

var?express?=?require('express');??

var?bodyParser?=?require('body-parser');??

var?uuid?=?require('uuid');??

var?app?=?express();??

var?COMMENTS_FILE?=?path.join(__dirname,?'comments.json');??

app.set('port',?(process.env.PORT?||?3000));??

app.use('/',?express.static(path.join(__dirname,?'public')));??

app.use(bodyParser.json());??

app.use(bodyParser.urlencoded({extended:?true}));??

app.use(function(req,?res,?next)?{??

????res.setHeader('Access-Control-Allow-Origin',?'*');??

????res.setHeader('Cache-Control',?'no-cache');??

????next();??

});??

app.get('/api/comments',?function(req,?res)?{??

??fs.readFile(COMMENTS_FILE,?function(err,?data)?{??

????if?(err)?{??

??????console.error(err);??

??????process.exit(1);??

????}??

????res.json(JSON.parse(data));??

??});??

});??

app.post('/api/comments',?function(req,?res)?{??

??fs.readFile(COMMENTS_FILE,?function(err,?data)?{??

????if?(err)?{??

??????console.error(err);??

??????process.exit(1);??

????}??

????var?comments?=?JSON.parse(data);??

????var?newComment?=?{??

??????id:?uuid.v4(),??

??????author:?req.body.author,??

??????text:?req.body.text,??

????};??

????comments.push(newComment);??

????fs.writeFile(COMMENTS_FILE,?JSON.stringify(comments,?null,?4),?function(err)?{??

??????if?(err)?{??

????????console.error(err);??

????????process.exit(1);??

??????}??

??????res.json(comments);??

????});??

??});??

});??

app.listen(app.get('port'),?function()?{??

??console.log('Server?started:?http://localhost:'?+?app.get('port')?+?'/');??

});??

該文件主要有兩個作用：

作為服務器啟動，啟動后監(jiān)聽端口3000
作為API服務者，向外提供接口/api/comments

該文件是一個典型的Nodejs服務器文件，使用到了目前Nodejs領域流行的Express框架（Koa是另外一個流行的的服務器框架，是由Express框架的原班人馬開發(fā)的，感興趣的讀者也可以了解一下）；此外，讀者可以看到，該文件還向外提供了一個接口/api/comments，同時提供了兩種調(diào)用方式，分別是get方式與post方式，這實際上是一個典型的RESTFul接口，針對評論這一資源提供兩種調(diào)用方式：get用于查詢評論，post則用于發(fā)表評論。同時，應用為了簡化，將新的評論保存到了comments.json文件中。

另外值得一提的是，對于每一個評論都會有一個唯一的主鍵，這里的主鍵生成方式采用了uuid模塊的方法，用于生成全局唯一的uuid標識符作為每一條新評論的主鍵。

通過如下命令來啟動node server：

[plain]?view plain?copy ?print?

node?server??

服務器啟動后即會監(jiān)聽3000端口的訪問。

確保服務器啟動沒有任何異常信息后，使用ctrl+c來關閉服務器。

在public目錄下的css目錄中新建一個CSS文件base.css，其內(nèi)容如下所示：

[plain]?view plain?copy ?print?

body?{??

??background:?#fff;??

??font-family:?"Helvetica?Neue",?Helvetica,?Arial,?sans-serif;??

??font-size:?15px;??

??line-height:?1.7;??

??margin:?0;??

??padding:?30px;??

}??

a?{??

??color:?#4183c4;??

??text-decoration:?none;??

}??

a:hover?{??

??text-decoration:?underline;??

}??

code?{??

??background-color:?#f8f8f8;??

??border:?1px?solid?#ddd;??

??border-radius:?3px;??

??font-family:?"Bitstream?Vera?Sans?Mono",?Consolas,?Courier,?monospace;??

??font-size:?12px;??

??margin:?0?2px;??

??padding:?0?5px;??

}??

h1,?h2,?h3,?h4?{??

??font-weight:?bold;??

??margin:?0?0?15px;??

??padding:?0;??

}??

h1?{??

??border-bottom:?1px?solid?#ddd;??

??font-size:?2.5em;??

}??

h2?{??

??border-bottom:?1px?solid?#eee;??

??font-size:?2em;??

}??

h3?{??

??font-size:?1.5em;??

}??

h4?{??

??border-bottom:?1px?solid?#eee;??

??font-size:?1.2em;??

}??

p,?ul?{??

??margin:?15px?0;??

}??

ul?{??

??padding-left:?30px;??

}??

該CSS文件的內(nèi)容都是一些基本的樣式信息，這里不再贅述。

???????????????????

下面進入到本文最為關鍵與核心的部分——React。

在public目錄中新建文件index.html，輸入如下內(nèi)容：

[html]?view plain?copy ?print?

<!DOCTYPE?html>??

<html>??

??<head>??

????<meta?charset="utf-8">??

????<title>React?Tutorial</title>??

??????

????<link?rel="stylesheet"?href="css/base.css"?/>??

????<script?src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.js"></script>??

????<script?src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-dom.js"></script>??

????<script?src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>??

????<script?src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>??

????<script?src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script>??

??</head>??

??<body>??

????<div?id="contentContainer"></div>??

????<script?type="text/babel"?src="scripts/test.js"></script>??

??</body>??

</html>??

從中可以看到，該文件基本上算是一個空的html文件，只是引入了一些外部js文件與css文件，這正是React編程的方式。

除了引入方才創(chuàng)建的base.css文件外，該文件在head部分還引入了5個js文件，下面分別介紹：

react.js：React的核心文件
react-dom.js：React針對瀏覽器DOM的文件，它實現(xiàn)了虛擬DOM與瀏覽器真實DOM之間的映射與轉(zhuǎn)換，并實現(xiàn)了diff dom算法
browser.js：實現(xiàn)React的JSX語法到原生JavaScript的轉(zhuǎn)換
jquery.min.js：jQuery的依賴文件，這里通過jQuery向服務器端發(fā)送Ajax請求
remarkable.min.js：實現(xiàn)評論的markdown功能，這樣就可以通過markdown語法發(fā)送評論了

這里值得重點關注的是前3個文件，react.js與react-dom.js是我們使用React所必須的兩個文件；另外，由于React建議使用JSX語法來編寫組件聲明，而JSX需要在瀏覽器端轉(zhuǎn)換為原生的JavaScript文件，因此需要一個轉(zhuǎn)換工具，而browser.js文件就是起到這個作用的；jQuery.min.js與remarkable.min.js則是針對于本項目所需的功能而引入的兩個文件。

下面來編寫本項目所需的最后一個文件。在public目錄的scripts目錄下新建文件test.js。

React是基于組件化開發(fā)的，因此在一開始我們需要先設計好頁面的組件以及組件之間的關系。下面是頁面運行時的截圖：

從圖中可以看到，該頁面實際上由幾個部分構成：

最外層是評論列表與提交評論的表單
里層是評論列表
評論列表里面是一條條的評論
最下面是提交評論的表單

綜上所述，該頁面的組件構成與包含關系應該如下圖所示：

接下來就需要定義各個組件了，test.js文件如下代碼清單所示：

[javascript]?view plain?copy ?print?

var?Comment?=?React.createClass({??

??rawMarkup:?function()?{??

????var?md?=?new?Remarkable();??

????var?rawMarkup?=?md.render(this.props.children.toString());??

????return?{?__html:?rawMarkup?};??

??},??

??render:?function()?{??

????return?(??

??????<div?className="comment">??

????????<h4?className="commentAuthor">??

??????????{this.props.author}?說:?<span?dangerouslySetInnerHTML={this.rawMarkup()}?/>??

????????</h4>??

??????</div>??

????);??

??}??

});??

var?CommentBox?=?React.createClass({??

??loadCommentsFromServer:?function()?{??

????$.ajax({??

??????url:?this.props.url,??

??????dataType:?'json',??

??????cache:?false,??

??????success:?function(data)?{??

????????this.setState({data:?data});??

??????}.bind(this),??

??????error:?function(xhr,?status,?err)?{??

????????console.error(this.props.url,?status,?err.toString());??

??????}.bind(this)??

????});??

??},??

??handleCommentSubmit:?function(comment)?{??

????var?comments?=?this.state.data;??

????var?newComments?=?comments.concat([comment]);??

????this.setState({data:?newComments});??

????$.ajax({??

??????url:?this.props.url,??

??????dataType:?'json',??

??????type:?'POST',??

??????data:?comment,??

??????success:?function(data)?{??

????????this.setState({data:?data});??

??????}.bind(this),??

??????error:?function(xhr,?status,?err)?{??

????????this.setState({data:?comments});??

????????console.error(this.props.url,?status,?err.toString());??

??????}.bind(this)??

????});??

??},??

??getInitialState:?function()?{??

????return?{data:?[]};??

??},??

??componentDidMount:?function()?{??

????this.loadCommentsFromServer();??

????setInterval(this.loadCommentsFromServer,?this.props.pollInterval);??

??},??

??render:?function()?{??

????return?(??

??????<div?className="commentBox">??

????????<h1>Comments</h1>??

????????<CommentList?data={this.state.data}?/>??

????????<CommentForm?onCommentSubmit={this.handleCommentSubmit}?/>??

??????</div>??

????);??

??}??

});??

var?CommentList?=?React.createClass({??

??render:?function()?{??

????var?commentNodes?=?this.props.data.map(function(comment)?{??

??????return?(??

????????<Comment?author={comment.author}?key={comment.id}>??

??????????{comment.text}??

????????</Comment>??

??????);??

????});??

????return?(??

??????<div?className="commentList">??

????????{commentNodes}??

??????</div>??

????);??

??}??

});??

var?CommentForm?=?React.createClass({??

??getInitialState:?function()?{??

????return?{author:?'',?text:?''};??

??},??

??handleAuthorChange:?function(e)?{??

????this.setState({author:?e.target.value});??

??},??

??handleTextChange:?function(e)?{??

????this.setState({text:?e.target.value});??

??},??

??handleSubmit:?function(e)?{??

????e.preventDefault();??

????var?author?=?this.state.author.trim();??

????var?text?=?this.state.text.trim();??

????if?(!text?||?!author)?{??

??????return;??

????}??

????this.props.onCommentSubmit({author:?author,?text:?text});??

????this.setState({author:?'',?text:?''});??

??},??

??render:?function()?{??

????return?(??

??????<form?className="commentForm"?onSubmit={this.handleSubmit}>??

????????<input??

??????????type="text"??

??????????placeholder="昵稱"??

??????????value={this.state.author}??

??????????onChange={this.handleAuthorChange}??

????????/>??

????????<input??

??????????type="text"??

??????????placeholder="評論內(nèi)容"??

??????????value={this.state.text}??

??????????onChange={this.handleTextChange}??

????????/>??

????????<input?type="submit"?value="提交評論"?/>??

??????</form>??

????);??

??}??

});??

ReactDOM.render(??

??<CommentBox?url="/api/comments"?pollInterval={3000}?/>,??

??document.getElementById('contentContainer')??

);??

從上面的代碼中我們可以看到，系統(tǒng)一共定義了4個組件，分別是Comment、CommentBox、CommentList與CommentForm，最下面則通過ReactDOM的render方法將CommentBox組件插入到外層容器contentContainer中。

在上述代碼中，我們與服務器之間的異步通信使用了jQuery，實際上也可以使用其他方式，React對于這一點并沒有任何限制。而組件之間的包含關系則是CommentList包含了Comment、CommentBox包含了CommentList與CommentForm。最后則通過ReactDOM的render方法將CommentBox插入到了外層容器中。

上述代碼中定義組件的方式使用了React.createClass方法，這是React提供的定義組件的一般方法，每一個組件都需要提供一個render方法，用于指定組件的渲染方式與包含關系，這里使用了React 的JSX語法。實際上，也可以通過原生的JavaScript來實現(xiàn)，不過React官方強烈推薦使用JSX語法，因為它簡潔、可讀性好，同時類似于XML語法，使用起來非常直觀方便，感興趣的讀者可以到React官網(wǎng)閱讀JSX語法指南，還是比較簡單的。

另外，在ReactDOM的render方法中，我們?yōu)镃ommentBox組件指定了屬性pollInterval，值為3000，這表示每隔3秒鐘會向服務器發(fā)起一個異步請求，用于獲取最新的評論列表。實際上，這里可以通過WebSocket來實現(xiàn)，效率更好，同時也省去了輪詢的煩惱，這一步可以由讀者自行實現(xiàn)。

數(shù)據(jù)的存儲我們使用comments.json文件，由于本教程主要講解React的使用，因此存儲這塊就沒有使用數(shù)據(jù)庫，實際情況下，這部分應該使用諸如MongoDB之類的數(shù)據(jù)庫來實現(xiàn)，也是比較容易的。如果使用MongoDB，那么可以使用Mongoose，這是個面向Nodejs的MongoDB ODM（Object-Document Mapping，對象文檔映射）框架，可以實現(xiàn)領域模型與數(shù)據(jù)庫文檔之間的映射，使用起來非常方便。

總結

本文主要起到React入門的作用，目的在于通過一個實際可運行的示例來演示React的基本用法，并未涉及到React的深層次知識，比如說Flux、Redux、WebPack與React整合等等。

學習是需要循序漸進的，只有入門了才能進一步深入下去，希望讀者在學習完本文后能夠開啟React的學習之旅，我也將在后面為大家?guī)鞷eact的深度內(nèi)容介紹。

總結

以上是生活随笔為你收集整理的React入门指引与实战的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： spring-session使用教程(一
下一篇： GIT使用指引