前言
前几天学习react,看了阮一峰的react入门博客,参考链接:
http://www.ruanyifeng.com/blog/2015/03/react。
在这篇博客中,所有的例子都是通过引入三个相关的js文件来实现react。下面看下第一个demo代码:
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
对于引入的这三个js文件,作者这样写到:
“上面代码一共用了三个库: react.js 、react-dom.js 和 Browser.js ,它们必须首先加载。其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,Browser.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。“
也就是说在上面的例子中,我们给浏览器的是一个JSX文件。浏览器需要将JSX转化成ES6,然后再将ES6转为ES5,最后执行ES5。而这些转化很消耗时间,所以做线上项目的时候,我们就需要在线下先将这些文件进行转化,然后给客户端浏览器直接返回转化好的ES5。这样,用户端的渲染速度就大大提升,从而提高用户体验。
下面就说一下如何搭建一个react环境,来实现上面所说的功能。
1、Node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
Node.js 的包管理器 npm,是全球最大的开源库生态系统。
我们需要使用npm进行包管理,所以需要先安装nodejs。安装参考官方文档:
http://nodejs.cn/download/。
可以使用如下命令来测试是否安装成功:
node -v
npm -v
2、使用npm进行项目初始化
在用nodejs进行创作前,首先应该初始化配置文件,这条命令主要为了自动生成package.json。
按提示,一步步来完成项目文件的配置,没有的可以不写,直接enter,这样初始
化时会创建默认的文件,最后创建完的目录如下所示:
每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。
package.json这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件。
输入这个命令后,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在npm中发布你的模块,这些问题的答案都不重要,回车默认即可。
具体更详细的关于package.json的文档,可以参考如下文档:
http://javascript.ruanyifeng.com/nodejs/packagejson.html
3、使用NPM配置react环境
执行以下命令,加载相关依赖:
npm install --save react react-dom babelify babel-preset-react babel-preset-es2015
4、webpack热加载配置
首先在跟目录下新建一个index.html的页面,新建一个index.js。
页面内容如下:
<div id="example">123</div>
<script type="text/javascript" src="./src/index.js"></script>
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>hello react</h1>,
document.getElementById("example")
);
此时如果直接引入index.js文件,浏览器是会报错的。因为它不知道如何解析JSX。下面就介绍下如何用webpack实现热加载。
首先在根目录下新建一个package.config.js,文件内容如下:
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: __dirname + '/src',
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/index.js",
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
}
}
]
},
output: {
path: __dirname + '/src/',
filename: "bundle.js"
}
};
之后安装webpack:
npm install -g webpack//全局安装webpack
npm install -g webpack-dev-server//全局安装webpack开发的服务器
npm install -save webpack-dev-server //在目录文件夹下安装
npm install -save webpack
npm install --save-dev babel-loader babel-core//安装babel-loader babel-core
执行完以上命令之后,package.json文件的内容如下:
{
"name": "hello-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "timor",
"license": "ISC",
"dependencies": {
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^7.3.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.5.1"
}
}
执行webpack,会生成一个bundle.js。然后在index.html中引入这个js。刷新页面,我们就可以看到刚刚所写的内容。
为了避免没次修改代码都要手动的打包一次,再来做点配置:
webpack --watch//监听变动并自动打包
此时,我们已经不需要没次都手动的去打包代码了,每次改动代码以后webpack都会自己重新打包,重新刷新页面就可以看到修改后的效果了。
那么,想不想让你的浏览器监测你都代码的修改,并自动刷新修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖。
npm install --save-dev webpack-dev-server
这时候,刚刚配置的webpack-server就派上用场了。
直接执行命令 webpack-dev-server --hot --inline
在浏览器输入http://localhost:8080/就可以了~
大功告成,最后附上项目目录: