React学习笔记(1)

开始

使用了webpack +reactjs+ant design 
一开始尝试使用了material ui,比较坑，没有分页，表格要自己拼装。后来看react ui的日志发现了正在开发中的ant design就决定先用这个吧。除了UI的css需要自己做调优，其他组件比较全。

搭建

文件package.json

 
 

  
  

   
   {
  
  
  
  

   
     "name": "lxg",
  
  
  
  

   
     "version": "1.0.0",
  
  
  
  

   
     "main": "webpack.config.js",
  
  
  
  

   
     "peerDependencies": {
  
  
  
  

   
       "react": "^15.0.0",
  
  
  
  

   
       "react-dom": "^15.0.0",
  
  
  
  

   
       "react-tap-event-plugin": "^1.0.0"
  
  
  
  

   
     },
  
  
  
  

   
     "dependencies": {
  
  
  
  

   
       //ant design的核心包
  
  
  
  

   
       "antd": "^1.6.1",
  
  
  
  

   
       "classnames": "^2.2.5",
  
  
  
  

   
       //webpack的各种loader（应该放到devDependencies里面）
  
  
  
  

   
       "css-loader": "^0.23.1",
  
  
  
  

   
       "file-loader": "^0.8.5",
  
  
  
  

   
       "less-loader": "^2.2.3",
  
  
  
  

   
       "style-loader": "^0.13.1",
  
  
  
  

   
       "text-loader": "^0.0.1",
  
  
  
  

   
       "url-loader": "^0.5.7"
  
  
  
  

   
        //react路由的一个工具
  
  
  
  

   
       "history": "^2.1.0",
  
  
  
  

   
       "jquery": "^2.2.3",
  
  
  
  

   
       "less": "^2.6.1",
  
  
  
  

   
       //material-ui的核心包，没有用
  
  
  
  

   
       "material-ui": "^0.15.1",
  
  
  
  

   
       "object-assign": "^4.1.0",
  
  
  
  

   
       "pubsub-js": "^1.5.3",
  
  
  
  

   
       //react双向绑定的，也没用
  
  
  
  

   
       "react-mixin": "^3.0.5",
  
  
  
  

   
       "refetch": "^0.2.1",
  
  
  
  

   
       //ajax请求的
  
  
  
  

   
       "reqwest": "^2.0.5",
  
  
  
  

   
    
  
  
  
  

   
     },
  
  
  
  

   
     "scripts": {
  
  
  
  

   
       "test": "echo \"Error: no test specified\" && exit 1"  },
  
  
  
  

   
     "babel": {
  
  
  
  

   
       "presets": [
  
  
  
  

   
         "es2015",
  
  
  
  

   
         "react",
  
  
  
  

   
         "stage-1"
  
  
  
  

   
     ],
  
  
  
  

   
       "plugins": []
  
  
  
  

   
     },
  
  
  
  

   
     "devDependencies": {
  
  
  
  

   
     //babel解决ECMAScript6语法的
  
  
  
  

   
       "babel-core": "^6.3.26",
  
  
  
  

   
       "babel-loader": "^6.2.4",
  
  
  
  

   
       //babel的模式，es2015，stage-0，stage-1，stage-2，stage-3，react
  
  
  
  

   
       "babel-preset-es2015": "^6.3.13",
  
  
  
  

   
       "babel-preset-react": "^6.3.13",
  
  
  
  

   
       "babel-preset-stage-1": "^6.3.13",
  
  
  
  

   
       //这个插件我没用
  
  
  
  

   
       "html-webpack-plugin": "^2.7.2",
  
  
  
  

   
       "transfer-webpack-plugin": "^0.1.4",
  
  
  
  

   
       "extract-text-webpack-plugin": "^1.0.1",
  
  
  
  

   
       "webpack": "^1.13.0"
  
  
  
  

   
     },
  
  
  
  

   
     "author": "",
  
  
  
  

   
     "license": "ISC",
  
  
  
  

   
     "description": ""
  
  
  
  

   
   }
  
  
 
 

文件webpack.config.js

 
 

  
  

   
   var path = require('path');
  
  
  
  

   
   var webpack = require('webpack');
  
  
  
  

   
   var containerPath = path.resolve('.');
  
  
  
  

   
   var node_modules = path.resolve(__dirname, 'node_modules');
  
  
  
  

   
   var pathToReact = path.resolve(node_modules, 'react/dist/react-with-addons.js');
  
  
  
  

   
   var pathToReactDOM = path.resolve(node_modules, 'react-dom/dist/react-dom.min.js');
  
  
  
  

   
   module.exports = {
  
  
  
  

   
      devtool: 'source-map',
  
  
  
  

   
      entry: {
  
  
  
  

   
         main: './apps/main.jsx',
  
  
  
  

   
        //把这种公共的都放到common里面，不用每回增量打包都打，这里没用，所以注释掉了
  
  
  
  

   
      // 'common':['./node_modules/react/dist/react-with-addons.min.js','./node_modules/react-dom/dist/react-dom.min.js']
  
  
  
  

   
    
  
  
  
  

   
     },
  
  
  
  

   
      output: {
  
  
  
  

   
         path: path.resolve(containerPath,'dist/'),
  
  
  
  

   
         filename: '[name].js'
  
  
  
  

   
     },
  
  
  
  

   
      plugins: [
  
  
  
  

   
      //这个插件把React和ReactDom放到全局变量里，不用每个文件都require了
  
  
  
  

   
         new webpack.ProvidePlugin({
  
  
  
  

   
                     React: "react",
  
  
  
  

   
                     ReactDOM: "react-dom"
  
  
  
  

   
     })
  
  
  
  

   
      // ,
  
  
  
  

   
      //这个插件是把公共模块放在common文件中，以减少每回增量打包的时间
  
  
  
  

   
    // new webpack.optimize.CommonsChunkPlugin('common',  'common.js')  ],
  
  
  
  

   
    //这个就是引用外不扩展，这些包就别打包了，大量减少webpack时间，不过在用material-ui的时候抱错（什么多个react不行大概），只能用ProvidePlugin那种方式
  
  
  
  

   
      externals: 
  
  
  
  

   
           {
  
  
  
  

   
            'antd':true,
  
  
  
  

   
               'react': 'React',
  
  
  
  

   
               'react-dom': 'ReactDOM'
  
  
  
  

   
   //            'material-ui':'MaterialUI'
  
  
  
  

   
     }
  
  
  
  

   
       ,
  
  
  
  

   
      resolve: {
  
  
  
  

   
         extensions: ['', '.js', '.jsx', '.css'] },
  
  
  
  

   
      module: {
  
  
  
  

   
      //告诉webpack这些就别拆开读了，没生效 ，反正都弄成扩展了，没用，配合ProvidePlugin使用的
  
  
  
  

   
         //noParse: ['./node_modules/react/dist/react-with-addons.min.js','./node_modules/react-dom/dist/react-dom.min.js'],
  
  
  
  

   
         loaders: [{
  
  
  
  

   
            test: /\.jsx?$/,
  
  
  
  

   
            loader: 'babel-loader',
  
  
  
  

   
   //       exclude: /node_modules/,
  
  
  
  

   
     query: {
  
  
  
  

   
              //babel的模式，es2015，stage-0，stage-1，stage-2，stage-3，react
  
  
  
  

   
               presets: ['es2015', 'react','stage-1']
  
  
  
  

   
            }
  
  
  
  

   
         },
  
  
  
  

   
         { test: /\.css$/, loader: "style!css" },
  
  
  
  

   
         {
  
  
  
  

   
            test: /\.(less)$/,
  
  
  
  

   
            loader: 'style-loader!css-loader?localIdentName=[hash:base64:8]!less-loader'
  
  
  
  

   
     }, 
  
  
  
  

   
         {
  
  
  
  

   
            test: /\.(ttf|eot|woff|woff2|otf|svg)/,
  
  
  
  

   
   //       loader: 'file-loader?name=./font/[name].[ext]'
  
  
  
  

   
     loader:'url-loader'
  
  
  
  

   
     }, {
  
  
  
  

   
            test: /\.json$/,
  
  
  
  

   
            loader: 'file-loader?name=./json/[name].json'
  
  
  
  

   
     }, {
  
  
  
  

   
            test: /\.(png|jpg|jpeg|gif)$/,
  
  
  
  

   
            loader: 'url-loader?limit=10000&name=./images/[name].[ext]'
  
  
  
  

   
     }]
  
  
  
  

   
      }
  
  
  
  

   
    
  
  
  
  

   
   }