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') } }), ....... }) ] //... }