webpack和react实战

在我原来的文章webpack学习之旅中，我介绍了下关于webpack的用法，我想大家应该通过这篇文章大概知道webpack是怎么使用的了。那么这篇文章将为通过一个小的例子带领大家如何在项目中使用webpack。

开始之前

在开始之前，大家必须知道webpack的使用方法,以及react框架的使用方法,在下文中,不会花费较多的篇幅去进行讲解它们的细致的用法。没有接触过它们的同学，可以看这两篇文章webpack学习之旅和React_Learn,也可以参考阮一峰老师的教程。

开启实战之旅吧～

首先我先说下我们要做啥，我们这次要做一个简单版的留言板功能。需要用到的技术有 webpack和react。

struct.png

其中components文件夹放的是react的组件，其他文件夹顾名思义我想大家肯定知道是用来干啥的了。

第二步,安装一些我们需要用到的包依赖，在该项目中我们要用到jsx loader 还有css loader还有react和react-dom,除了这些我们还要用到其他的依赖，下文会提到.
```
 npm install jsx-loader css-loader style-loader --save-dev
 npm install react react-dom --save
```
第三步，分析留言板的组成

我们都知道react最重要的是思想是组件化,所以我们现在要做的是把一个留言板拆成一个个的组件。一个留言板,至少要分成两小块:1.评论显示区,2.评论区。将这两个小的组件组装起来称为一个大组件,一个留言板便做好了。那么接下来，我们来构建这些组件。

第四步，构成组件
大家先在components文件里创建以下文件messageBoard.js messageForm messageList三个文件，分别代表留言板，评论区，评论显示区。

评论显示区组件代码

  //  messageList.js
      var React = require('react');

      var MessageList = React.createClass({
          render: function() {
              var messages = this.props.data.map(function(message, index) {
                  return (
                      
                          {message.name} said:
                              {message.message}
                      
                  )
              });
      
              return (
                  
                      
                          {messages}
                      
                  
              )
          }
      
      })
      
      module.exports = MessageList;

评论区组件代码

  //messageForm.js
  var React = require('react');
  
  var MessageForm = React.createClass({
      getInitialState: function() {
          return {
              name: '',
              message: ''
          };
      },
      handleNameChange: function(e) {
          this.setState({
              name: e.target.value
          })
      },
      handleMessageChange: function(e) {
          this.setState({
              message: e.target.value
          })
      },
      handleSubmit: function(e) {
          e.preventDefault();
          var name = this.state.name.trim();
          var message = this.state.message.trim();
          if (!name || !message) {
              return;
          }
          this.props.onMessageSubmit({
              name: name,
              message: message
          });
          this.setState({
              name: '',
              message: ''
          });
      },
      componentDidMount: function() {
  
      },
      render: function() {
          return (
              
                      
                          
                          
                          
                      
                  
          )
      }
  });
  
  module.exports = MessageForm;

留言板组件
因为留言板组件就是由上面的两个小组件所构成的，因为我们没有搭建服务器路由系统,所以我在代码中伪造了些ajax数据请求,在代码中会通过注释解释

  var React = require('react');
  var MessageList = require('../components/messageList.js');
  var MessageForm = require('../components/messageForm.js');
  
  var data = [{
      name: '小华',
      message: '你好'
  }]; //模拟在数据库中的留言
  
  var MessageBoard = React.createClass({
      getInitialState: function() {
          return {
              data: []
      };
  },
  componentDidMount: function() {
      //模范一个ajax请求数据回客户端的过程,在真实的应用场景中，此处放ajax请求
      setTimeout(function() {
          this.setState({
              data: data
          })
      }, 2000)
  },
  handleMessageSubmit: function(message) {
      //模拟将数据保存到数据库的请求
      data.push(message);
      //模拟重新从数据库拉取数据的过程,改变state的值
      this.setState({
          data: data
      });
  },
  render: function() {
      return (
          
                  {this.props.title}
                  
                  
              
      )
  }
  })
  
  module.exports = MessageBoard;

第五步，写webpack的入口文件和html文件
在html文件夹中创建一个index.html

      
      
      
          
          webpack with react

在js文件夹中创建一个entry.js

      var React = require('react');
      var ReactDOM = require('react-dom');
      var MessageBoard = require('../components/MessageBoard.js');
      
      ReactDOM.render(,
          document.getElementById('container')
      )

第六步, 写webpack配置文件

      //webpack.config.js
      var path = require('path');

      module.exports = {
          entry: './js/entry.js',
          output: {
              path: path.join(__dirname, 'js/dist'),
              filename: 'bundle.js'
          },
          module: {
              loaders: [{
                  test: /\.js|jsx$/,
                  loader: 'jsx?harmony'
              }]
          }
      }

第七步，运行webpack

在终端输入webpack,会产生：

webpack.png

这就意味着我们成功了，接下来，用浏览器打开index.html

index.png

会是这样的效果，但是看到一排的input标签元素是不是很难受？那接下来我们简单的调解下css样式吧。

第八步，编写css重新利用webpack打包

在css文件夹下，创建一个style.css文件

  //style.css
  input{
      display: block;
      margin: 10px;
  }

在webpack.config.js中增加css加载器

      //webpack.config.js
      ...
      module: {
      loaders: [{
          test: /\.js|jsx$/,
          loader: 'jsx?harmony'
      }, {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
      }]
  }

在entry.js中增加

      require('../css/style.css');

重新在终端中输入webpack

webpack_1.png

浏览器打开index.html

index_1.png

本来到这里的时候我们就已经结束了，但是大家有没有想过，当你每次改变了css或 js文件都要重新webpack，十分的麻烦，而webpack有个最强大的功能就是热替换，也就是实时更新页面,所以接下来我们就来试试这个功能吧！

第九步实现热替换(HMR)功能

为了实现热替换功能，我们首先需要搭建一个服务器才行，在webpack里面有一个开发工具就是可以自动开启一个服务器，所以首先我们先安装依赖
```
  npm install webpack-dev-server --save-dev
```
然后改变webpack.config.js
```
      //webpack.config.js
      ...
      entry: [
      'webpack/hot/dev-server',
      'webpack-dev-server/client?http://localhost:8080/html',
      './js/entry.js'
      ]
      ... 
```
然后我们就可以开始使用webpack开启一个服务器了，为了开启这个服务，你必须在终端输入很长一段shell
```
  webpack-dev-server --devtool eval --progress --colors --hot --content-base
```
大概讲下它们代表的含义
- webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
- --devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
- --progress - 显示合并代码进度
- --colors - Yay，命令行中显示颜色！
- --content-base - 指向设置的输出目录,后面可以写你想指向的输出目录不写默认为空目录
为了偷懒，我们在package.json文件里面，增加一些内容
```
    "scripts": {
      "build": "webpack",
      "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base"
    }
```
还要安装webpack的包依赖和react-hot 加载器
```
  npm install webpack --save
  npm install react-hot-loader --save-dev
```
再改变下webpack.config.js里面的设置
```
      //webpack.config.js
      module: {
      loaders: [{
          test: /\.js|jsx$/,
          loader: 'react-hot!jsx-loader?harmony'
      }, {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
      }]
  }
```
这样我们可以直接在终端输入npm run dev 然后效果和开始直接输入一大串shell一样

接下来，我们直接在浏览器下访问localhost:8080

index_2.png

再点击html就可以看到我们的页面了.

最后

看到这里，我想大家应该知道webpack和react如何匹配使用了，当然这只是一个引子，希望这篇博文对大家有所帮助,写到这里不得不提的是gulp这个前端自动化工具十分的好用,而且gulp-webpack这个插件可以完美的运用在gulp管理的项目中～

附上博客地址附上代码地址
最后，希望这篇博客对大家有所帮助（如果是，请尽情star哦），欢迎提出您的宝贵建议～

webpack和react实战

webpack和react实战

开始之前

开启实战之旅吧～

{this.props.title}

最后

你可能感兴趣的:(webpack和react实战)