當(dāng)前位置：首頁(yè) >

ReactJS学习笔记——npm、JSX、webpack

發(fā)布時(shí)間：2025/7/14 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 ReactJS学习笔记——npm、JSX、webpack 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

#ReactJS學(xué)習(xí)筆記——npm、JSX、webpack

[toc]

React是一個(gè)JavaScript庫(kù)文件，使用它的目的在于能夠解決構(gòu)建大的應(yīng)用和數(shù)據(jù)的實(shí)時(shí)變更。該設(shè)計(jì)使用JSX允許你在構(gòu)建標(biāo)簽結(jié)構(gòu)時(shí)充分利用JavaScript的強(qiáng)大能力，而不必在笨拙的模板語(yǔ)言上浪費(fèi)時(shí)間。

1 jsx語(yǔ)法分析

什么是JSX即JavaScript XML——一種在React組件內(nèi)部構(gòu)件標(biāo)簽的類XML語(yǔ)法。React在不使用JSX的情況下一樣可以工作，然而使用JSX可以提高組件的可讀性，因此推薦使用JSX。React使用JSX的好處有：

允許使用熟悉的語(yǔ)法來(lái)定義HTML元素樹。
提供更加語(yǔ)義化且易懂的標(biāo)簽。
程序結(jié)構(gòu)更加容易被直觀化。
抽象了React Element的創(chuàng)建過(guò)程。
可以隨時(shí)掌握HTML標(biāo)簽以及生成這些標(biāo)簽的代碼。
是原生的javaScript

舉個(gè)例子，在不使用JSX的React程序中創(chuàng)建一個(gè)連接大概是這個(gè)樣子：

React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')`

如果使用了JSX，上述調(diào)用就標(biāo)稱了下面這種熟悉且簡(jiǎn)練的標(biāo)簽：

<a href="https://facebook.github.io/react/">Hello!</a>

與HTML的相似之處賦予了JSX在React中強(qiáng)大的表現(xiàn)力。

1.1 JSX特色分析

熟悉與語(yǔ)義化任何熟悉XML語(yǔ)言的人都能夠輕松地掌握J(rèn)SX，同時(shí)由于React囊括了所有可能的DOM表現(xiàn)形式，因此JSX能夠巧妙地用簡(jiǎn)明的方式來(lái)展現(xiàn)DOM結(jié)構(gòu)，夠熟悉吧！！

更加直觀與抽象React Element的創(chuàng)建下面是一個(gè)Divider組件。我們注意到函數(shù)作用域內(nèi)，使用JSX語(yǔ)法的版本與使用原生JavaScript相比，其標(biāo)簽的意圖變得更加直觀，可讀性也更高。以下是原生JavaScript代碼：

render: function() {return React.createElement('div', {className:"divider"}, "Label Text", React.createElement('hr')); }

以下是使用JSX的代碼：

render: function() {return <div className="divider">Label Text<hr/></div>; }

1.2 JSX動(dòng)態(tài)值使用

JSX將兩個(gè)花括號(hào)之前的內(nèi)容{...}渲染為動(dòng)態(tài)值，花括號(hào)指明了一個(gè)JavaScript上下文環(huán)境——你在花括號(hào)中放入的任何東西都會(huì)被進(jìn)行求值，得到的結(jié)果被渲染為標(biāo)簽中的若干節(jié)點(diǎn)。對(duì)于簡(jiǎn)單值，比如文本或數(shù)字，可以直接引用對(duì)應(yīng)的變量。可以像下面這樣渲染一個(gè)動(dòng)態(tài)的h2標(biāo)簽：

var test = 'Question'; <h2>{test}</h2>

對(duì)于更復(fù)雜的邏輯，你可以更傾向與將其轉(zhuǎn)化為一個(gè)函數(shù)來(lái)進(jìn)行求值。可以通過(guò)在花括號(hào)中調(diào)用這個(gè)函數(shù)來(lái)渲染期望的結(jié)果：

function dateToString(d) {return [d.getFullYear(),d.getMonth()+1,d.getDate()].join('-'); };<h2>{dateToString(new Date())}</h2>

React通過(guò)將數(shù)組中的每個(gè)元素渲染為一個(gè)節(jié)點(diǎn)的方式對(duì)數(shù)組進(jìn)行自動(dòng)求值。

var text = ['hello', 'world']; <h2>{text}</h2>

##2 安裝nodejs

參考 http://www.runoob.com/nodejs/nodejs-install-setup.html http://www.runoob.com/nodejs/nodejs-http-server.html

##3 安裝npm

參考 http://www.runoob.com/nodejs/nodejs-npm.html

####3.1 關(guān)于npm管理的在2014年2月發(fā)布的node 0.10.26中，npm也隨之升級(jí)。這次升級(jí)修復(fù)了大量的bug，但最明顯的改變是使用install --save時(shí)，將默認(rèn)在package.json中添加小尖尖（^）而不是小波浪（~）作為依賴版本的前綴。

它們有什么區(qū)別呢？簡(jiǎn)單來(lái)說(shuō)：

~會(huì)匹配最新的子版本（中間那個(gè)數(shù)字），比如： ~1.2.3會(huì)匹配所有的1.2.x版本，但不匹配到1.3.0及以上
^會(huì)匹配最新的主版本（第一個(gè)數(shù)字），比如： ^1.2.3將會(huì)匹配所有的1.x.x版本，2.0.0就緩緩飄過(guò)了。

附上版本控制的其他范圍： version 必須嚴(yán)格匹配到 version 版本

>version 必須大于 version 的版本
>=version 大于等于 version 的版本
<version 小于
<=version 小于等于
~version “幾乎相同的版本（Approximately equivalent to version）” 參見(jiàn)semver(7)
^version “兼容的版本” 參見(jiàn) semver(7)
1.2.x 匹配1.2.0, 1.2.1, 之類., 但不匹配 1.3.0
http://...以URL地址作為依賴
* 匹配任意版本
"" (就是一個(gè)空白字符empty string) 同 *，任意版本
version1 - version2 同 >=version1 <=version2.
range1 || range2 range1 或者 range2 的任一版本.
git... 以GIT地址作為依賴
user/repo 以GitHub地址作為依賴
tag 匹配一個(gè)以 tag 標(biāo)記并發(fā)布的版本，參見(jiàn) npm-tag(1)
path/path/path 以本地地址作為依賴

參考 http://www.orangecube.net/articles/node-package-json-version-control.html

##4 打包工具Webpack Webpack其實(shí)有點(diǎn)類似browserify，出自Facebook的Instagram團(tuán)隊(duì)，但功能比browserify更為強(qiáng)大。其主要特性如下：

同時(shí)支持CommonJS和AMD模塊（對(duì)于新項(xiàng)目，推薦直接使用CommonJS）；
串聯(lián)式模塊加載器以及插件機(jī)制，讓其具有更好的靈活性和擴(kuò)展性，例如提供對(duì)CoffeeScript、ES6的支持；
可以基于配置或者智能分析打包成多個(gè)文件，實(shí)現(xiàn)公共模塊或者按需加載；
支持對(duì)CSS，圖片等資源進(jìn)行打包，從而無(wú)需借助Grunt或Gulp；
開(kāi)發(fā)時(shí)在內(nèi)存中完成打包，性能更快，完全可以支持開(kāi)發(fā)過(guò)程的實(shí)時(shí)打包需求；
對(duì)source map有很好的支持。

4.1WebPack打包第一個(gè)程序

1.安裝webpack

npm install webpack -g

2.添加一個(gè)entry.js文件

document.write("It works.");

3.添加一個(gè)index.html文件

4.執(zhí)行打包

webpack ./entry.js bundle.js

會(huì)創(chuàng)建一個(gè)bundles.js文件，打開(kāi)index.html文件，可以看到我們寫入文檔的“It works”；

如何使用webpack.config.js打包參考： http://webpack.github.io/docs/tutorials/getting-started/

如下是官網(wǎng)給出的一段webpack.config.js示例代碼：

module.exports = {entry: "./entry.js",output: {path: __dirname,filename: "bundle.js"},module: {loaders: [{ test: /\.css$/, loader: "style!css" }]} };

可以直接執(zhí)行：webpack --progress --colors --watch查看打包進(jìn)度。

###4.2 webpack.config.js語(yǔ)法

module.exports = {//程序的入口文件entry: "./entry.js",//輸出output: {// 所有打包好的資源的存放位置path: __dirname,// 使用url-loader的資源的前綴publicPath:"./build/",// 生成的打包文件 filename: "bundle.js"},module: {loaders: [// 多個(gè)加載器可以通過(guò)“！”{ test: /\.css$/, loader: "style!css" }]} };

##5 編寫第一個(gè)React JSX程序

###5.1 npm搭建能夠編譯React程序的環(huán)境

前提已經(jīng)安裝了nodejs和npm，安裝了nodejs和npm參考： http://www.runoob.com/nodejs/nodejs-install-setup.html

新建一個(gè)react文件夾，文件名字可以自己定義，文件位置也可自己定義，這里叫做react文件夾，進(jìn)入文件夾/react下，使用：

npm init

提示name，輸入test1，其余所有參數(shù)默認(rèn)。此時(shí)我們發(fā)現(xiàn)目錄下生成了package.json文件夾，內(nèi)容如下所示：

{"name": "test1","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC" }

因?yàn)槲覀兙帉憆eact的jsx程序需要對(duì)html進(jìn)行解析，所以需要package.json對(duì)一些文件進(jìn)行依賴，依賴于哪些文件呢，這里列出來(lái)，拷貝就可以：

npm install --save react react-dom babel-preset-react babel-core babel-loader

這里需要稍微等上一會(huì)，如果不能夠完成npm install，可以使用npm --registry https://registry.npm.taobao.org info underscore配置使用淘寶鏡像。完成npm install之后，發(fā)現(xiàn)目錄下多了一個(gè)node_module文件夾，此時(shí)環(huán)境已經(jīng)搭建完畢。--save表示版本信息會(huì)保存到package.json中，可以打開(kāi)package.json看到：

{"name": "test1","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"babel-core": "^6.7.2","babel-loader": "^6.2.4","babel-preset-react": "^6.5.0","react": "^0.14.7","react-dom": "^0.14.7"} }

###5.2 編寫react jsx代碼新建一個(gè)test1/文件夾，進(jìn)入test1文件夾下，新建一個(gè)test1/entry.js文件，內(nèi)容如下：

var React = require("react"); React.render(<h1>hello world</h1>,document.body);

同時(shí)創(chuàng)建一個(gè)test1/index.html文件，內(nèi)容如下：

###5.3 打包程序新建一個(gè)test1/webpack.config.js文件，內(nèi)容如下所示：

module.exports = {entry: "./entry.js",output: {path: __dirname,filename: "./build/bundle.js"},module: {loaders: [{test: /\.jsx?$/,exclude: /node_modules/,loader: 'babel',query:{presets:['react']}}]}, };

完成之后，調(diào)用如下命令：

webpack --progress --colors

輸出如下信息，完成打包工作：

Version: webpack 1.12.14 Time: 1356msAsset Size Chunks Chunk Names ./build/bundle.js 676 kB 0 [emitted] main+ 158 hidden modules

###5.4 打開(kāi)index.html文件打開(kāi)后發(fā)現(xiàn)瀏覽器中顯示著：

hello world

到此我們就完成了第一個(gè)jsx程序的編寫與打包工作。打包工作目的是為了把jsx代碼轉(zhuǎn)為javascript支持的格式。

轉(zhuǎn)載于:https://my.oschina.net/feiyangxiaomi/blog/640038

總結(jié)

以上是生活随笔為你收集整理的ReactJS学习笔记——npm、JSX、webpack的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

上一篇：电路与电子学-第一章直流电路分析方法小概
下一篇： NodeJS学习笔记: RESTful