Webpack + React 开发 01 HelloWorld
1.项目依赖
安装所需要依赖的其它第三方开源库，项目依赖如下：
"dependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"react": "^15.4.2",
"react-dom": "^15.4.2"
}
由于要使用到 import ，所以需要使用安装babel-preset-es2015，其它的几个库都是必须的；
2.配置webpack.config.js
module.exports = {
entry: __dirname + '/app.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
主要就是配置相应的loader，在此只需要 es2015 和 react；
3.创建资源文件
index.html
<html>
<head>HelloWorld</head>
<body>
<div id="helloworldDiv"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
该网页里面只有一个 id 为 helloworldDiv 的 div，和引用的一个外部 script 文件，该 script 文件由webpack打包工具生成，而并非手动添加；
app.js
import React from 'react';
import {render} from 'react-dom';
import ReactDom from 'react-dom';
// ReactDom.render(<h1>Hello World</h1>, document.getElementById('helloworldDiv'));
render(<h1>Hello World</h1>, document.getElementById('helloworldDiv'));
在app.js，记录了'两种'渲染方法，实际上是同一种渲染方法；
可以通过ReactDom.render，也可以直接调用render方法，需要注意的是此两种方法的区别：'ReactDom' 是直接导入的整个 'react-dom'，而 'render' 则在使用 import 导入的时候，添加了 '{}' 进行修饰，{} 修饰的对象为某一个具体的已知的方法，而没有 {} 修饰的则为导入的整个 'react-dom' 即 ReactDom，也就是说 render 是ReactDom对象的一个方法；
通过调试发现 ReactDom 对象结构如下：
Object {
findDOMNode
render(nextElement, container, callback)
unmountComponentAtNode
unstable_batchedUpdates
...
}
正好印证了上面的断言；
4.Component
除了使用
render(<h1>Hello World</h1>, document.getElementById('helloworldDiv'));
这样直接渲染一段组织好的html片断之外，还可以以组件的形式来对html片断进行封装；
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。有两种定义组件类的方法：
4.1 React.Component
class HelloWorld extends React.Component {
render() {
return (<div>Hello World</div>);
}
}
render(<HelloWorld />, document.getElementById('testDiv'));
通过继承 React.Component ，新创建一个组件类HelloWorld，在使用的时候，直接将该组件传递给render函数的nextElement参数；
4.2 React.createClass
var HelloWorld = React.createClass({
render: function() {
return <h1>Hello World</h1>;
}
});
模板插入 <HelloWorld /> 时，会自动生成 HelloWorld 的一个实例。所有组件类都必须有自己的 render 方法，用于输出组件。
注意，组件类的第一个字母必须大写，否则会报错，比如HelloWorld不能写成helloWorld。另外，组件类render函数的返回只能包含一个顶层标签，否则也会报错。
4.3 无状态组件
创建组件除了上面两种方式外，还可以直接通过一个function来创建。
var React = require("react");
var MyButton = function(props) {
return <div>
<button onClick={props.onClick}>New Item</button>
</div>;
};
module.exports = MyButton;
// 无状态组件定义方式
需要使用 require("react") 将 react导入！
5. production
生成bundle.js后提示： It looks like you're using a minified copy of the development build of React？...
修正方法：webpack 配置添加 webpack.DefinePlugin 插件，更改NODE_ENV
module.exports = {
//...
plugins:[
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
}),
.......
})
]
//...
}
最新文章
- soui使用wke时，设置js回调注意事项
- GJM：用C#实现网络爬虫（二） [转载]
- NUC_TeamTEST_C && POJ2299（只有归并）
- C语言 文件操作1--二进制文件与文本文件
- RSA算法小记
- struts2中form提交到action中的中文参数乱码问题解决办法(包括取中文路径)
- Android Fragment之间传值
- vim 缩写abbreviation
- Multipatch对象
- koahub.js 0.09 发布，新增钩子机制
- uploadify 在chrome上崩溃的解决办法
- VIM常见用法总结
- JavaScript if 条件语句
- Jenkins入门-环境搭建(1)
- Freemarker list 的简单使用
- 大数据处理算法--Bloom Filter布隆过滤
- 正则捕获url的?号传值
- 使用yum下载rpm包
- LG1955 [NOI2015]程序自动分析
- filter 图片滤镜的各种设置