安裝所須要依賴的其它第三方開源庫,項目依賴以下:javascript
"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,其它的幾個庫都是必須的;html
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;java
index.htmlnode
<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打包工具生成,而並不是手動添加;react
app.jswebpack
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,記錄了'兩種'渲染方法,其實是同一種渲染方法;web
能夠經過ReactDom.render,也能夠直接調用render方法,須要注意的是此兩種方法的區別:'ReactDom' 是直接導入的整個 'react-dom',而 'render' 則在使用 import 導入的時候,添加了 '{}' 進行修飾,{} 修飾的對象爲某一個具體的已知的方法,而沒有 {} 修飾的則爲導入的整個 'react-dom' 即 ReactDom,也就是說 render 是ReactDom對象的一個方法;babel
經過調試發現 ReactDom 對象結構以下:app
Object {
findDOMNode
render(nextElement, container, callback)
unmountComponentAtNode
unstable_batchedUpdates
...
}
正好印證了上面的斷言;dom
除了使用
render(<h1>Hello World</h1>, document.getElementById('helloworldDiv'));
這樣直接渲染一段組織好的html片段以外,還能夠以組件的形式來對html片段進行封裝;
React 容許將代碼封裝成組件(component),而後像插入普通 HTML 標籤同樣,在網頁中插入這個組件。有兩種定義組件類的方法:
class HelloWorld extends React.Component { render() { return (<div>Hello World</div>); } } render(<HelloWorld />, document.getElementById('testDiv'));
經過繼承 React.Component ,新建立一個組件類HelloWorld,在使用的時候,直接將該組件傳遞給render函數的nextElement參數;
var HelloWorld = React.createClass({ render: function() { return <h1>Hello World</h1>; } });
模板插入 <HelloWorld /> 時,會自動生成 HelloWorld 的一個實例。全部組件類都必須有本身的 render 方法,用於輸出組件。
注意,組件類的第一個字母必須大寫,不然會報錯,好比HelloWorld不能寫成helloWorld。另外,組件類render函數的返回只能包含一個頂層標籤,不然也會報錯。
建立組件除了上面兩種方式外,還能夠直接經過一個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導入!
生成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') } }), ....... }) ] //... }