转载

每日一博 | ReactJS 学习笔记——npm、JSX、webpack

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程序中创建一个连接大概是这个样子：

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

如果使用了JSX，上述调用就标称了下面这种熟悉且简练的标签： ``

js Hello!

``` 与HTML的相似之处赋予了JSX在React中强大的表现力。

1.1 JSX特色分析

熟悉与语义化任何熟悉XML语言的人都能够轻松地掌握JSX，同时由于React囊括了所有可能的DOM表现形式，因此JSX能够巧妙地用简明的方式来展现DOM结构，够熟悉吧！！
更加直观与抽象React Element的创建下面是一个Divider组件。我们注意到函数作用域内，使用JSX语法的版本与使用原生JavaScript相比，其标签的意图变得更加直观，可读性也更高。以下是原生JavaScript代码：
```
`js render: function() { return React.createElement('div', {className:"divider"}, "Label Text", React.createElement('hr')); }
```
```
以下是使用JSX的代码： ``
```
js render: function() { return

Label Text

; } ```

1.2 JSX动态值使用

JSX将两个花括号之前的内容{...}渲染为动态值，花括号指明了一个JavaScript上下文环境——你在花括号中放入的任何东西都会被进行求值，得到的结果被渲染为标签中的若干节点。对于简单值，比如文本或数字，可以直接引用对应的变量。可以像下面这样渲染一个动态的h2标签： ```js var test = 'Question';

{test}

` 对于更复杂的逻辑，你可以更倾向与将其转化为一个函数来进行求值。可以通过在花括号中调用这个函数来渲染期望的结果：

`js function dateToString(d) { return [ d.getFullYear(), d.getMonth()+1, d.getDate() ].join('-'); };

{dateToString(new Date())}

```

React通过将数组中的每个元素渲染为一个节点的方式对数组进行自动求值。 ```js var text = ['hello', 'world'];

{text}

```

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

`cpp npm install webpack -g

2.添加一个entry.js文件 ``

js document.write("It works.");

` 3.添加一个index.html文件

js <html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html> ``

4.执行打包

`cpp 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示例代码：

`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语法

```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

下，使用：

`cpp npm init

提示name，输入test1，其余所有参数默认。此时我们发现目录下生成了package.json文件夹，内容如下所示： ``

js { "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对一些文件进行依赖，依赖于哪些文件呢，这里列出来，拷贝就可以：

js 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看到： ```js { "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

文件，内容如下：

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

同时创建一个

test1/index.html

文件，内容如下： ``

```

5.3 打包程序

新建一个

test1/webpack.config.js

文件，内容如下所示：

`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'] } }] }, };

完成之后，调用如下命令： ``

js webpack --progress --colors

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

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