當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2025/7/14 javascript 29 豆豆

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

2019獨角獸企業重金招聘Python工程師標準>>>

#ReactJS學習筆記——npm、JSX、webpack

[toc]

React是一個JavaScript庫文件，使用它的目的在于能夠解決構建大的應用和數據的實時變更。該設計使用JSX允許你在構建標簽結構時充分利用JavaScript的強大能力，而不必在笨拙的模板語言上浪費時間。

1 jsx語法分析

什么是JSX即JavaScript XML——一種在React組件內部構件標簽的類XML語法。React在不使用JSX的情況下一樣可以工作，然而使用JSX可以提高組件的可讀性，因此推薦使用JSX。React使用JSX的好處有：

允許使用熟悉的語法來定義HTML元素樹。
提供更加語義化且易懂的標簽。
程序結構更加容易被直觀化。
抽象了React Element的創建過程。
可以隨時掌握HTML標簽以及生成這些標簽的代碼。
是原生的javaScript

舉個例子，在不使用JSX的React程序中創建一個連接大概是這個樣子：

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

如果使用了JSX，上述調用就標稱了下面這種熟悉且簡練的標簽：

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

與HTML的相似之處賦予了JSX在React中強大的表現力。

1.1 JSX特色分析

熟悉與語義化任何熟悉XML語言的人都能夠輕松地掌握JSX，同時由于React囊括了所有可能的DOM表現形式，因此JSX能夠巧妙地用簡明的方式來展現DOM結構，夠熟悉吧！！

更加直觀與抽象React Element的創建下面是一個Divider組件。我們注意到函數作用域內，使用JSX語法的版本與使用原生JavaScript相比，其標簽的意圖變得更加直觀，可讀性也更高。以下是原生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動態值使用

JSX將兩個花括號之前的內容{...}渲染為動態值，花括號指明了一個JavaScript上下文環境——你在花括號中放入的任何東西都會被進行求值，得到的結果被渲染為標簽中的若干節點。對于簡單值，比如文本或數字，可以直接引用對應的變量。可以像下面這樣渲染一個動態的h2標簽：

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

對于更復雜的邏輯，你可以更傾向與將其轉化為一個函數來進行求值。可以通過在花括號中調用這個函數來渲染期望的結果：

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

React通過將數組中的每個元素渲染為一個節點的方式對數組進行自動求值。

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 關于npm管理的在2014年2月發布的node 0.10.26中，npm也隨之升級。這次升級修復了大量的bug，但最明顯的改變是使用install --save時，將默認在package.json中添加小尖尖（^）而不是小波浪（~）作為依賴版本的前綴。

它們有什么區別呢？簡單來說：

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

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

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

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

##4 打包工具Webpack Webpack其實有點類似browserify，出自Facebook的Instagram團隊，但功能比browserify更為強大。其主要特性如下：

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

4.1WebPack打包第一個程序

1.安裝webpack

npm install webpack -g

2.添加一個entry.js文件

document.write("It works.");

3.添加一個index.html文件

4.執行打包

webpack ./entry.js bundle.js

會創建一個bundles.js文件，打開index.html文件，可以看到我們寫入文檔的“It works”；

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

如下是官網給出的一段webpack.config.js示例代碼：

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

可以直接執行：webpack --progress --colors --watch查看打包進度。

###4.2 webpack.config.js語法

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

##5 編寫第一個React JSX程序

###5.1 npm搭建能夠編譯React程序的環境

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

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

npm init

提示name，輸入test1，其余所有參數默認。此時我們發現目錄下生成了package.json文件夾，內容如下所示：

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

因為我們編寫react的jsx程序需要對html進行解析，所以需要package.json對一些文件進行依賴，依賴于哪些文件呢，這里列出來，拷貝就可以：

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

這里需要稍微等上一會，如果不能夠完成npm install，可以使用npm --registry https://registry.npm.taobao.org info underscore配置使用淘寶鏡像。完成npm install之后，發現目錄下多了一個node_module文件夾，此時環境已經搭建完畢。--save表示版本信息會保存到package.json中，可以打開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代碼新建一個test1/文件夾，進入test1文件夾下，新建一個test1/entry.js文件，內容如下：

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

同時創建一個test1/index.html文件，內容如下：

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

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

完成之后，調用如下命令：

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 打開index.html文件打開后發現瀏覽器中顯示著：

hello world

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

轉載于:https://my.oschina.net/feiyangxiaomi/blog/640038

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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