Webpack + React 開發 01 HelloWorld

1.項目依賴

安裝所須要依賴的其它第三方開源庫,項目依賴以下: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

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;java

3.建立資源文件

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

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')
      }
    }),
    .......
    })
  ]
  //...
}
相關文章
相關標籤/搜索