---

title: react 第一次实战项目知识点记录

基础知识点项目地址：https://github.com/yangxinjian/reactPractice.git
完整项目地址（主要是这个）
https://github.com/yangxinjian/reactAntBike.git

环境配置

安装node.js（官网下载即可）

node -v (查看是否安装node完成)

安装yarn新一代的包管理工具facebook开发，你也可以选择cnpm

• yarn的速度会比npm快
• 安装版本统一，更安全
• 更简洁的输出
• 更好的语义化

sudo cnpm install yarn -g
yarn -v（查看是否安装yarn完成）

使用git在马云上进行托管，并在本地clone下来项目

git clone 你项目的地址
cd 你的项目

配置gitignore（git命令忽视）

vim .gitignore
i(编辑命令)
.DS_Store (Mac自带)
node_modules (node包)
dist (打包的压缩文件)
*.log（错误信息等）

初始化项目

yarn init  / cnpm init

提交项目

git add . （保存到暂存区）
git commit -m '备注信息' （把暂存区内容保存到分支）
git pull (拉取其他分支代码)
git push (将更新内容提交进入远程分支)

安装webpack打包工具(配置规则查看webpack章节)

yarn add webpack --dev / cnpm install webpack --dev
在根目录下创建一个webpack.config.js文件

1. 需要处理的文件类型
  
    html => html-webpack=plugin
    js es6 => babel + babel-preset-react
    css => css-loader + sass-loader
    img => url-loader + file-loader

2. 常用模块

    html-webpack-plugin => html单独打包成文件
    extract-text-webpack-plugin => 样式打包成单独文件
    CommonsChunkPlugin => 提出通用模块

3. webpack-dev-server

      (1) 为webpack项目提供web服务  
      (2) 更改代码自动刷新，路径转发
      (3) yarn add webpack-dev-server --dev
      (4) 解决多版本共存

1.配置webpack，在创建好的webpack.config.js中配置

• 添加模块输出口

      const path = require('path')
      module.exports = {
          entry: './src/app.js',
          output: {
              path: path.resolve(__dirname, 'dist'), // __dirname代表根目录
              filename: '你想输出的文件名字.js'
          }
      }
  

• 添加html插件

      yarn add html-webpack-plugin --dev // 生成html5文件插件
      
      在webpack.config.js中设置
  
       const path = require('path')
       const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
       module.exports = {
          entry: './src/app.js',
          output: {
              path: path.resolve(__dirname, 'dist'), 
              filename: '你想输出的文件名字.js'
          },
          plugins: [ // 使用插件
              new HtmlWebpackPlugin({
                    template: '.src/index.html' // 引用模板自定义html文件，使打包出来的html与此文件一致
              })
          ]
      }
  

• 添加babel插件 （将es6语言转换成es5）

       yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev // 安装
     
       在webpack.config.js配置
       const path = require('path')
       const HtmlWebpackPlugin = require('html-webpack-plugin')
  
       module.exports = {
          entry: './src/app.js',
           output: {
               path: path.resolve(__dirname, 'dist'),
               filename: 'app.js'
           },
           module: {
               rules: [
                   {
                       test: /\.js$/,
                       exclude: /(node_modules)/,// 将不需要装换的文件夹排除
                       use: {
                           loader: 'babel-loader',
                           options: {
                               presets: ['env']
                           }
                       }
                   }
               ]
           },
            plugins: [
               new HtmlWebpackPlugin({
                   template: '.src/index.html'// 引用自定义html文件
               }) // 生成html5文件
           ]
       }
  

• 安装react的插件
  yarn add babel-preset-react --dev / cnpm install babel-preset-react --dev

        yarn add html-webpack-plugin --dev // 生成html5文件插件
    
    在webpack.config.js中设置
  
     const path = require('path')
     const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
     module.exports = {
        entry: './src/app.js',
        output: {
            path: path.resolve(__dirname, 'dist'), 
            filename: '你想输出的文件名字.js'
        },
        plugins: [ // 使用插件
            new HtmlWebpackPlugin({
                  template: '.src/index.html' // 引用模板自定义html文件，使打包出来的html与此文件一致
            })
        ]
    }
  

• 添加babel插件 （将es6语言转换成es5）

       yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev // 安装
     
       在webpack.config.js配置
       const path = require('path')
       const HtmlWebpackPlugin = require('html-webpack-plugin')
  
       module.exports = {
          entry: './src/app.js',
           output: {
               path: path.resolve(__dirname, 'dist'),
               filename: 'app.js'
           },
           module: {
               rules: [
                   {
                       test: /\.js$/,
                       exclude: /(node_modules)/,// 将不需要装换的文件夹排除
                       use: {
                           loader: 'babel-loader',
                           options: {
                               presets: ['env', 'react'] // 只需要在这里引用react
                           }
                       }
                   }
               ]
           },
            plugins: [
               new HtmlWebpackPlugin({
                   template: '.src/index.html'// 引用自定义html文件
               }) // 生成html5文件
           ]
       }
  

• 安装样式的插件

  > 安装css
  yarn add style-loader@0.19.1 css-loader@0.28.8 --dev
  
  在项目src中新建一个index.css页面，并在app.jsx中引入页面
  import React from 'react'
  import ReactDOM from 'react-dom'
  import './index.css'
  
  安装webpack打包css成独立文件的插件
  yarn add extract-text-webpack-plugin@3.0.2 --dev
  
  在webpack.config.js中更改对css的配置配置
  
  引入 
  const ExtractTextPlugin = require('extract-text-webpack-plugin')
  
   {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({ // 这里改变
              fallback: 'style-loader',
              use: 'css-loader'
          })
    }
  由于这是一个插件，需要在plugin中配置
  
  > 安装sass
  
  yarn add sass-loader --dev
  yarn add node-sass --dev
  
  在webpack.config.js中rules css配置下添加
   {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: ['css-loader', 'sass-loader']
          })
    }
  

• 对图片的处理

  yarn add url-loader --sev
  
  在webpack.config.js中配置
  {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'url-loader',
                    options:{
                        limit: 8192 // 文件大于8k被当做文件
                    } 
                }
            ]
   }
  

• 对字体图标的处理

  yarn add font-awesome
  
  {
            test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
            use: [
                {
                    loader: 'url-loader',
                    options:{
                        limit: 8192 // 文件大于8k被当做文件
                    } 
                }
            ]
   }
  

• 对公共模块的处理

在plugin中处理

   const path = require('path')
   const webpack = require('webpack')  //为了引用webpack自带方法
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const ExtractTextPlugin = require('extract-text-webpack-plugin')

   module.exports = {
       entry: './src/app.jsx',
       output: {
           path: path.resolve(__dirname, 'dist'),
           filename: 'js/app.js'
       },
       module: {
           rules: [
               {
                   test: /\.jsx$/,
                   exclude: /(node_modules)/, // 将不需要装换的文件夹排除
                   use: {
                       loader: 'babel-loader',
                       options: {
                           presets: ['env', 'react'] // 自动根据环境打包
                       }
                   }
              },
               {
                   test: /\.css$/,
                   use: ExtractTextPlugin.extract({
                       fallback: 'style-loader',
                       use: ['css-loader']
                   })
               },
               {
                   test: /\.scss$/,
                   use: ExtractTextPlugin.extract({
                       fallback: 'style-loader',
                       use: ['css-loader', 'sass-loader']
                   })
               },
               {
                   test: /\.(png|jpg|gif|jpeg)$/,
                   use: [
                       {
                           loader: 'url-loader',
                           options:{
                               limit: 8192, // 文件大于8k被当做文件
                               name: 'resource/[name].[ext]'
                           } 
                       }
                   ]
               },
               {
                   test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                   use: [
                       {
                           loader: 'url-loader',
                           options:{
                               limit: 8192, // 文件大于8k被当做文件
                               name: 'resource/[name].[ext]'
                           } 
                       }
                   ]
               }
           ]
       },
       plugins: [
           new HtmlWebpackPlugin({
               template: './src/index.html'// 引用自定义html文件
           }), // 生成html5文件
           new ExtractTextPlugin('css/[name].css'), // 将样式单独打包出来生成新的css页面
           // 提出公共模块,webpack自带
           new webpack.optimize.CommonsChunkPlugin({
               name: 'common',// 手动指定的通用木块
               filename: 'js/base.js'
           })
       ]
   }

• webpack 自动刷新处理webpack-dev-server

    yarn add webpack-dev-server
  
    在config下与plugin同级加上
    devServer: {
    }
    为了防止打包后的图片在根目录下找不到
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/',  //在这里添加路径
        filename: 'js/app.js'
    },
  
    编译打包就用webpack-dev-server就可以了
  

使用react环境搭建项目

      yarn add react react-dom

      在app.js中引用react结构，并将app.js的后缀更改为jsx，webpack.config.js中的js配置也要变成jsx,入口文件的js也要更改为jsx

      import React from 'react'
      import ReactDOM from 'react-dom'

package.json的配置

      "scripts": {
        "dev": "node_modules/.bin/webpack-dev-server",
        "dist": "node_modules/.bin/webpack -p"
      },

这样就可以使用yarn dev启动项目
yarn dist 打包项目

react正式开始咯（上诉方法均为自己手打搭建一个react项目，了解每一步，接下来是react提供的项目创建方法）

react => 视图层框架 组件化 JSX表达式 虚拟DOM

• Facebook 开源的一个JavaScript库
• React结合生态库构成一个MVC框架（vue也是mvc）
• 特点：Declarative(声明式编码:只需要声明在哪里做什么，无需关心如何实现)；Component-Based(组件化编码)；高效-高效的DOM Diff算法，最小化页面重绘
• 单向数据流

生态介绍

vue生态：vue + vue-router + vuex + axios + babel + webpack
react生态: react + react-router + redux + axios + babel + webpack

项目的创建(另一种方式，但是本人喜欢上面的手动配置，看得懂)

  yarn add / cnpm  install global/-g create-react-app (全局安装)
  在工作区创建项目

  create-react-app 你的项目名称

  cd 你的项目名称

  cnpm / yarn start 启动

JSX语法

• 添加html

  let jsx = <div>this is a jsx programmer</div>
  
  ReactDOM.render(
        jsx, // 将jsx组件放到渲染的dom下
        document.getElementById('app)
  )
  

• 添加样式

  行内样式
  let style = {
      color: 'red'
  }
  let jsx = <div style={style}></div>
  
  引入class样式
  在index.scss中设置
  body {
      .jsx {
            font-size: 16px;
       }
  }
  let jsx = <div className="jsx"></div> // react中使用className引用样式名称
  

• 添加逻辑
  （1）使用变量

      let name = "pig"
      let jsx = <div>I am a {pig}</div>
      ReactDom.render(
            jsx,
            document.getElementById('app')
      )
  

  （2）条件判断

       let truth = true
       let jsx = (//加括号的目的是为了换行的时候，编辑器不会给我们自动填补分号
            <div>
                  { // 条件判断需要加上{}
                        truth ? <p>I am a pig</p> : <p>I am not a pig</p>
                  }
            </div>
       )
  

  （3）jsx中插入注释

        {/*我是一个注释*/} 
  

  （4）数组的使用

        let names = ['pig', 'dog', 'chicken']
        let jsx = (
            {
                names.map((name,index) => <p key={index}>I am {name}</p>)
            }
        )
  

• 添加组件
  （1）基础

        function Component () {
              return <h1>I am a pig</h1>
        }
        ReactDom.render(
              <Component />, // 如果是变量直接饮用，如果是组件需要加上标签
              document.getElementById('app')
        )
  

  （2）es6组件写法

        class ES6Component extends React.Component{
              render () {
                    return <h1>I am a pig in es6</h1>
              }
        }
        ReactDom.render(
            <div>  // 两个组件共存需要包裹在一个div中
                <Component />
                <ES6Component>
            </div>,
            document.getElementById('app')
        )
  

  （3）组件初始化变量

        class Component extends React.Component {
              constructor (props) {
                    super(props);
                    this.state = {
                          name: 'pig'
                    }
              }
              render () {
                   return <h1>I am a {this.state.pig}</h1>
              }
        }
  

  （4）更改组件初始化变量

        class Component extends React.Component {
              constructor (props) { // props在子组件中只能被使用不能被改变
                    super(props);
                    this.state = {
                          name: 'pig'
                    }
              }
              render () {
                  setTimeOut(() => {
                         this.setState({
                            name: 'Pi g Pig'
                         })
                  }, 2000)
                   return <h1>I am a {this.state.pig}</h1>
              }
        }
  

  （5）父组件传值

        class Component extends React.Component {
              constructor (props) {
                    super(props)
              }
              render () {
                   return <h1>I am a {this.props.name}</h1>
              }
        }
        ReactDom.render(
              <Component name="pig" />,
               docuement.getElementById('app')
        )
  

  （6）组件添加点击事件（方法一）

        class Component extends React.Component {
              constructor (props) {
                    super(props)；
                    this.state = {
                        age: 18
                    }
                    this.addAge = this.addAge.bind(this)
              }
              addAge () {
                  this.setState({
                      age : this.state.age + 1
                  })
              }
              render () {
                   return (
                        <div>
                              <h1>I am  {this.state.age} years old </h1>
                              <button onclick={this.addAge}><button />
                        </div>
                  ）
              }
        }
        ReactDom.render(
              <Component />,
               docuement.getElementById('app')
        )
  

（7）组件添加点击事件（方法二）

        class Component extends React.Component {
              constructor (props) {
                    super(props)；
                    this.state = {
                        age: 18
                    }
              }
              addAge () {
                  this.setState({
                      age : this.state.age + 1
                  })
              }
              render () {
                   return (
                        <div>
                              <h1>I am  {this.state.age} years old </h1>
                              <button onclick={(e) => {this.addAge(e)}}><button />
                        </div>
                  ）
              }
        }
        ReactDom.render(
              <Component />,
               docuement.getElementById('app')
        )

（8）组件添加输入框更改事件

        class Component extends React.Component {
              constructor (props) {
                    super(props)；
                    this.state = {
                        age: 18
                    }
              }
              changeValue (e) {
                  this.setState({
                      age : e.target.value
                  })
              }
              render () {
                   return (
                        <div>
                              <h1>I am  {this.state.age} years old </h1>
                              <input type="text" onChange={(e) => {this.changeValue(e)}} />
                        </div>
                  ）
              }
        }
        ReactDom.render(
              <Component />,
               docuement.getElementById('app')
        )

（9）容器性组件嵌套组件

        class Component extends React.Component {
              constructor (props) {
                    super(props)；
                    this.state = {
                        age: 18
                    }
              }
              changeValue (e) {
                  this.setState({
                      age : e.target.value
                  })
              }
              render () {
                   return (
                        <div>
                              <h1>I am  {this.state.age} years old </h1>
                              <input type="text" onChange={(e) => {this.changeValue(e)}} />
                        </div>
                  ）
              }
        }
        class Title extends React.Component{
              constuctor (props) {
                  super(props)
              }
              render (props) {
                  return <h1>{this.props.title}</h1>
              }
        }
        class App extends React.Component{
              render () {
                  return (
                      <div>
                          <Title title="app" />
                          <Component />  // 在这里引用小组件component
                      </div>
                  )
              }
        }
        ReactDom.render(
              <App />, // 这里换成App
               docuement.getElementById('app')
        )

（10）组件嵌套组件

        class Component extends React.Component {
              constructor (props) {
                    super(props)；
                    this.state = {
                        age: 18
                    }
              }
              changeValue (e) {
                  this.setState({
                      age : e.target.value
                  })
              }
              render () {
                   return (
                        <div>
                              <h1>I am  {this.state.age} years old </h1>
                              <input type="text" onChange={(e) => {this.changeValue(e)}} />
                        </div>
                  ）
              }
        }
        class App extends React.Component{
              render () {
                  return (
                      <div>
                          <h1>app</h1>
                          <Component />  // 在这里引用小组件component
                      </div>
                  )
              }
        }
        ReactDom.render(
              <App />, // 这里换成App
               docuement.getElementById('app')
        )

（11）容器性组件嵌套组件，传值可以为任何html形式

        class Component extends React.Component {
              constructor (props) {
                    super(props)；
                    this.state = {
                        age: 18
                    }
              }
              changeValue (e) {
                  this.setState({
                      age : e.target.value
                  })
              }
              render () {
                   return (
                        <div>
                              <h1>I am  {this.state.age} years old </h1>
                              <input type="text" onChange={(e) => {this.changeValue(e)}} />
                        </div>
                  ）
              }
        }
        class Title extends React.Component{
              constuctor (props) {
                  super(props)
              }
              render (props) {
                  return <h1>{this.props.children}</h1> // 这里变成获取子children
              }
        }
        class App extends React.Component{
              render () {
                  return (
                      <div>
                          <Title>
                                <span>我是spanspan</span>
                                <a href="">link</a>
                          </Title> //更改为html形式
                          <Component /> 
                      </div>
                  )
              }
        }
        ReactDom.render(
              <App />, // 这里换成App
               docuement.getElementById('app')
        )

（12）子组件给父组件传值

    class Father extends React.Component {
       constructor (props) {
           super(props);
           this.state = {
               bgColor: 'red'
           }
       }
       changeMyBgColors (color) {
           this.setState({
               bgColor: color
           })
       }
       render () {
           return (
               <div style={{background: this.state.bgColor}}>
                   <h1>我是爸爸</h1>
                   <Child bgColor={this.state.bgColor} changeColor={(color) => {this.changeMyBgColors(color)}}/>
               </div>
           )
       }
   }
   class Child extends React.Component {
       constructor (props) {
           super(props)
       }
       changeMyBgColor () {
           this.props.changeColor('blue')
       }
       render () {
           return (
               <div>
                   <h2>我是baby</h2>
                   <button onClick={(e) => {this.changeMyBgColor(e)}}>我想改变我爸爸的背景颜色</button>
               </div>
           )
       }
   }
   ReactDOM.render(
       <Father />,
       document.getElementById('app')
   )

（13）兄弟之间的组件通信（子1传父，父在传子2）

        class Child1 extends React.Component{
           constructor (props) {
               super(props)
               this.state = {
                   color1: 'red'
               }
           }
           changeMyBrotherColor (props) {
               this.props.change2Color(this.state.color1)
           }
           render () {
               return (
                   <div>
                       <h2>我是孩子1</h2>
                       <button onClick={(e) => {this.changeMyBrotherColor(e)}}>我要改变我弟弟的颜色咯</button>
                   </div>
               )
           }
       }
       class Child2 extends React.Component{
           constructor (props) {
               super(props)
           }
           render () {
               return (
                   <div>
                       <h2 style={{color: this.props.color22}}>我是孩子2</h2>
                   </div>
               )
           }
       }
       class Father extends React.Component{
           constructor (props) {
               super(props)
               this.state = {
                   color2: 'yellow'
               }
           }
           changColor (colorsss) {
               this.setState({
                   color2: colorsss
               })
           }
           render () {
               return (
                   <div>
                       <h1>这是我的孩子们</h1>
                       <Child1 change2Color={(color) => {this.changColor(color)}}/>
                       <Child2 color22={this.state.color2}/>
                   </div>
               )
           }
       }
       ReactDOM.render(
           <Father />,
           document.getElementById('app')
       )

react生命周期

getDefaultProps // 初始化props属性，props来自其他组件
getInitialState // 初始化组件的状态
componentWillMount // 组件加载之前
render // 渲染
componentDidMount // 组件dom插入之后
componentWillReceiveProps // 接受父组件的传递
shouldComponentUpdate // 组件的更新处罚
componentWillUpdate // 组件要更新前
componentDidUpdate // 组件更新后
componentWillUnmount // 组件的销毁

• Mounting : 挂载阶段

• Updating: 运行时阶段

• Unmounting: 卸载阶段

• Error Handling: 错误处理

  import React from 'react'
  import ReactDOM from 'react-dom'
  
  import './index.scss'
  
  class Child extends React.Component{
      // 构造函数
     constructor (props) {
          super(props)
          this.state = {
              data: 'oldzhuzhu'
          }
          console.log('这里是初始化数据constructor')
      }
      componentWillMount () {
          // 组件渲染前
          console.log('componentWillMount')
      }
      componentDidMount () {
          // 组件渲染结束
          console.log('componentDidMount')
      }
      componentWillReceiveProps () {
          // 将要接受父组件传来的props触发
          console.log('componentWillReceiveProps')
      }
      shouldComponentUpdate () {
          // 子组件是不是应该更新
          console.log('shouldComponentUpdate')
          return true
          // 如果是false，后面的update就不会跟着更新
      }
      componentWillUpdate () {
          // 组件将要更新
          console.log('componentWillUpdate')
      }
      componentDidUpdate () {
          // 组件更新完成
          console.log('componentDidUpdate')
      }
      componentWillUnmount () {
          // 组件将要销毁调用
          console.log('componentWillUnmount')
      }
      // 点击事件
      handleClick () {
          console.log('这里是更新数组')
          this.setState({
              data: 'zhuzhuzhu'
          })
      }
      // 渲染
      render () {
          console.log('render')
          return (
              <div>
                  {this.state.data}
                  接收到的props: {this.props.data}
                  <button onClick={() => {this.handleClick()}}>更新组件</button>
              </div>
        
          )
      }
  }
  
  class Father extends React.Component{
      constructor (props) {
          super(props)
          this.state = {
              data: 'old props'
          }
      }
      changeData () {
          this.setState({
              data: 'new props',
              show: true
          })
      }
      byeChild () {
          this.setState({
              show: false
          })
      }
      render () {
          return (
              <div>
                  {
                      this.state.show ? <Child data={this.state.data}/> : null
                  }
                  <button onClick={() => {this.changeData()}}>改变子组件的props</button>
                  <button onClick={() => {this.byeChild()}}></button>
              </div>
          )
      }
  }
  
  ReactDOM.render(
      <Father />,
      document.getElementById('app')
  )
  

按顺序输出值：

constructor  // 构造函数初始化
componentWillMount  // 组件渲染前
render  // 组价渲染
componentDidMount  // 选件渲染完成
componentWillReceiveProps  // 子组件接收到父组件传来的props
shouldComponentUpdate  // 是否组件进行更新，true更新，false接下来的周期不触发
componentWillUpdate  // 组件更新前
render  //  更新
componentDidUpdate  // 组件更新结束
componentWillUnmount  // 组件被摧毁之前

react-router

1.router几种方式

• 页面路由

    window.location.href = '地址' // www.baidu.com
    history.back()  //回退
  

• hash 路由

  window.location = '#hash'
  window.onhashchange = function () {
      console.log('current hash' + window.location.hash)
  }
  

• h5路由

  history.pushState('name', 'title', '/path')  // 推进一个状态
  history.replaceState('name', 'title', '/path') // 更换一个状态
  window.onpopstate = function () {
      console.log(window.location.href)
      console.log(window.location.pathname)
      console.log(window.location.hash)
      console.log(window.location.search)
  }
  

2. react-router几种方式

• hash

    import React from 'react'
    import ReactDOM from 'react-dom'
    import {HashRouter as Router,Route,Link} from 'react-router-dom'  // 这里是Hash
  
    import './index.scss'
  
    class A extends React.Component {
        constructor (props) {
            super(props)
        }
        render () {
            return (
                <div>Component A</div>
            )
        }
    }
    class B extends React.Component {
        constructor (props) {
            super(props)
        }
        render () {
            return (
                <div>Component B</div>
            )
        }
    }
    class Wrapper extends React.Component {
        constructor (props) {
            super(props)
        }
        render () {
            return (
                <div>
                    <Link to="/a" >组件A</Link>
                    <br />
                    <Link to="/b" >组件B </Link>
                    {this.props.children}
                </div>
            )
        }
    }
    ReactDOM.render(
        <Router>
             <Wrapper>
                <Route path="/a" component={A}/>
                <Route path="/b" component={B}/>
            </Wrapper>
        </Router>
       ,
        document.getElementById('app')
    )
  

• browser

  如果改成
  import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
  路径地址都会变成 http://localhost:8080/a，
  此时请求的是后端代码，在复制这个链接在其他页面打开时，会报成404，因为后台并没有生成这个地址
  

3.router传参，组件接受不同组件传参

• 引入switch
  import {HashRouter as Router,Route,Link,Switch} from 'react-router-dom'

  class A extends React.Component {
      constructor (props) {
          super(props)
      }
      render () {
          return (
              <div>
                  Component   A  
                  <Switch>
                      <Route 
                          exact // 必须完全符合path
                          path={`${this.props.match.path}`}
                          render={(route) => {
                              return <div>当前组件是不带参数的A</div>
                          }}
                      />
                     <Route >
                          path={`${this.props.match.path}/sub`}
                          render={(route) => {
                              return <div>当前组件是sub</div>
                          }}
                      />
                      <Route 
                      path={`${this.props.match.path}/:id`} // 通过路由地址解析
                      render={(route) => {
                          return <div>当前组件是带参数的A，参数是 : {route.match.params.id}</div>
                      }}/>
                  </Switch>
              </div>
          )
      }
  }
  class B extends React.Component {
      constructor (props) {
          super(props)
      }
      render () {
          return (
              <div>Component B</div>
          )
      }
  }
  class Wrapper extends React.Component {
      constructor (props) {
          super(props)
      }
      render () {
          return (
              <div>
                  <Link to="/a" >组件A</Link>
                  <br />
                  <Link to="/a/123" >带参数的组件A</Link> 
                  <br />
                  <Link to="/a/sub" >/a/sub子路径</Link>
                  <br />
                  <Link to="/b" >组件B </Link>
                  {this.props.children}
              </div>
          )
      }
  }
  
  ReactDOM.render(
      <Router>
           <Wrapper>
              <Route path="/a" component={A}/>
              <Route path="/b" component={B}/>
          </Wrapper>
      </Router>
     ,
      document.getElementById('app')
  )

开始正式共享单车项目知识点（react全家桶+ant ui 组件+公共机制封装）

地址：https://github.com/yangxinjian/reactAntBike.git

• react基础知识，生命周期（见上部分的基础知识点）
• router4.0
• redux集成开发
• ant最实用基础组件
• ant栅格系统
• Etable组件封装
• BaseForm组件封装
• 表格内嵌单选，复选封装
• axios请求插件封装
• api封装
• 错误拦截
• 权限，菜单封装等
• 地图，图表的使用

安装脚手架（上述有步骤，可选择自己搭建，也可以使用官方脚手架）

sudo cnpm install -g create-react-app

初始化项目

create-react-app bikesystem (你项目的名称：注意不用大写字母)

安装react-router

yarn add react-router

启动项目

yarn start

项目所需要的插件

• 安装react-router，axios
• 安装AntD
• 暴露webpack配置文件
• 安装less-loader
• 修改less-loader

sudo yarn add react-router-dom axios less-loader
sudo yarn add less
sudo yarn antd   (支付宝做的ui组件)

引用antd样式

  import {Button} from 'antd'  // 引用某一个组件
  <Button>使用组件</Button>
  import 'antd/dist/antd.css'

• 想要按需加载对应组件css，需要安装babel，安装后就无需引用上面的css

 sudo yarn add babel-plugin-import
 sudo yarn add less@^2.7.3
  在package.json 的babel下加入
  "plugins": [
  [
    "import",
    {
      "libraryName": "antd",
      "style": "css"
    }
  ]
]

暴露webpack文件，得到config文件夹

sudo yarn eject

更改config/webpack.config.js ，使项目能识别less文件，配置后重启生效

• 在 // style files regexes下 添加

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

• 在 cssRegex引用后面下 添加less配置对象

{
          test: lessRegex,
          exclude: lessModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,  // 这里不要与其他配置的数字一样
              sourceMap: isEnvProduction && shouldUseSourceMap,
            },
            'less-loader'
          ),
          sideEffects: true,
        },
        {
          test: lessModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,  // 这里不要与其他配置的数字一样
              sourceMap: isEnvProduction && shouldUseSourceMap,
              modules: true,
              getLocalIdent: getCSSModuleLocalIdent,
            },
            'less-loader'
          ),
        },

项目架构

• 在src中新建组件文件夹，取名component,分别根据项目搭建出header头部文件夹，footer底部文件夹，NavLeft左菜单文件夹，以及在src下新建admin.js

  
  Jietu20190401-163524.jpg
  

  在admin.js中配置主结构，用row，col，并引入三个外部组件，注意！！！三个外部组件的内容不能为空，否则会报错

        import React from 'react'
       import { Row, Col} from 'antd';
       import Header from './components/header';
       import Footer from './components/footer';
  
       export default class Admin extends React.Component{
           render () {
               return (
                   <Row>
                       <Col span="3">
                           left
                       </Col>
                       <Col span="21">
                           <Header>
                               header
                           </Header>
                           <Row>
                               contet
                           </Row>
                           <Footer>
                               footer
                           </Footer>
                       </Col>
                  </Row>
               )
           }
       }
  

• 作为主要的菜单结构，单独封装出一个js，写在了config下的menuConfig.js中，请大家自行git clone 我的项目地址，本项目是开源的项目

• public里文件是将要被打包部署到服务器上。一般是图片等元素信息

项目中使用的功能方法

1. 请求外部的百度地图下的天气API

• 先在百度地图开放平台，创建应用，选择浏览器，生成自己的AK码

• 在代码中安装jsonp

   sudo yarn add jsonp --save
  

• 封装jsonp方法

    import JsonP from 'jsonp'
    export default class Axios {
        // 链式调用
        static jsonp (options) {
            return new Promise((resolve, reject) => {
                JsonP(options.url,{
                    param: 'callback'
                },function(err, response){
                    if (response.status == 'success') { // 成功回调
                        resolve(response);
                    } else {
                        reject(response.messsage); //  失败回调
                    }
                })
            })
        }
    }
  

• 在组件中调用

  import axios from '../../axios'
  state={}
  componentWillMount () {
      this.getWeatherAPIData() // 调用方法
  }
  // 获取天气api，encodeURIComponent编码对中文的处理
  getWeatherAPIData () {
          let city = '北京'
          axios.jsonp({
              url: 'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'  // api地址 ， ak是你自己申请的应用ak
          }).then((res) => {
              if(res.status == 'success'){
                  let data = res.results[0].weather_data[0];  // 取当前的天气
                  this.setState({
                      dayPictureUrl:data.dayPictureUrl,
                      weather:data.weather
                  })
              }
          })
      }
          // 在render中渲染
         <span className="weather-img">
             <img src={this.state.dayPictureUrl} alt="" />
          </span>
           <span className="weather-detail">
                {this.state.weather}
           </span>
  

2.react-router4.0（不需要路由配置，一切皆组件，浏览器端）

• 核心用法：

  1. HashRouter和BrowserRouter

      hash: http://localhost:3000/#/admin
      browser: http://localhost:3000/admin
     

  2.Route:path,exact,component,render --- 参考项目中的pages下的router-demo下的router2文件夹的内容

         <Router>
            <Home> // home 是主界面，包含的都是他的子组件路由
                <Route path="/" component={Main} exact></Route>
                <Route path="/about" component={About}></Route>
                <Route path="/topics" component={Topics}></Route>
            </Home>
        </Router>
  
        主界面加载子组件的地方，添加{this.props.children}
  

  3.NavLink,Link ------ 通过this.props.match接受路由带的内容--- 参考项目中的pages下的router-demo下的router1文件夹的内容

        <HashRouter>
            {/* 需要根节点 */}
            <div>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/topics">Topics</Link>
                    </li>
                </ul>
                {/* /about会检索到/和/about，所以防止加载两次，加上exact精确匹配 */}
                <Route path="/" component={Main}></Route>
                <Route path="/about" component={About}></Route>
                <Route path="/topics" component={Topics}></Route>
            </div>
        </HashRouter>
  

  4.Switch

        <Switch>
                    {/* switch只会加载一次，按顺序 */}
                    <Route path="/" component={Main}></Route>
                    <Route path="/about" component={About}></Route>
                    <Route path="/topics" component={Topics}></Route>
                </Switch>
  

  5.Redict

        <Redirect to="/admin/home" />
  

  6. withRouter 直接跳转路由

      import {withRouter} from 'react-router-dom'   引入

      使用
      this.props.history.push({
              pathname: '/admin'
      })

      渲染，在export default 中增添
      withRouter(Form.create()(OrganizeManage))

---

3.项目中运用router实现菜单导航路由

1. 根路由的编写

• 在src目录下建立router.js文件 , 并在全局index.js中更换Router

• 在router.js中引用app.js作为主框架

   import React from 'react'
   import {HashRouter, Route, Switch} from 'react-router-dom'
   import App from './App'
   import Login from './pages/login'
   import Admin from './admin'
   export default class IRouter extends React.Component{
       render () {
           return (
               <HashRouter>
                   <App>
                       <Route path="/login" component={Login}/> (一级路由--登录界面)
                       <Route path="/admin" component={Admin}/> （一级路由--登录进来的页面）
                   </App>
               </HashRouter>
           )
       }
   }
  

• 在app中引用子路由

  import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  class App extends Component {
    render() {
      return (
        <div>
          {this.props.children}
        </div>
      );
    }
  }
  export default App;
  

• 在一级路由下嵌套二级路由，更改的admin界面下的路由配置

      <Route path="/admin" render={() => 
                    // 二级路由
                    <Admin>
                        <Route path="/admin/ui/button" component={Button}/>
                    </Admin>
                }/>
  
    在admin.js中更改
    <Row className="content" >
                   {this.props.children}  // 这里引用
                </Row>
  

• 菜单路由link配置

   引用路由 在NavLeft页面下
  import {NavLink} from 'react-router-dom'
  在menu-item中包裹路由
  <Menu.Item title={item.title} key={item.key}>
                <NavLink to={item.key}>{item.title}</NavLink>  // 这里跳转地址
            </Menu.Item>
  

• 配置路由加载错误的情况下的展示页面

先建立文件夹nomatch包裹404展示文件,再在路由里面引用

   <Switch>
               <Route path="/admin/ui/buttons" component={Buttons}/>
                <Route component={NoMatch}></Route>
   </Switch>

Ant design UI组件的基本使用

• 在项目地址下的ui文件夹有基本的使用展示，你可以选择clone我的项目下到本地进行查看，接下来的笔记介绍几种初学者会遇到的使用

1. form组件实现登录

• 创建用户名和密码以及登录摁钮

      需要引用FormItem
      const FormItem = Form.item
      <Form>
              <FromItem>
                      <Input prefix={<Icon type="user" />} placeholder="请输入用户名"/>
              </FormItem>
              <FromItem>
                      <Input prefix={<Icon type="lock" />} placeholder="请输入密码"/>
              </FormItem>
              <FromItem>
                      <Button type="primary">登录</Button>
              </FormItem>
      </Form>
  

• 添加输入验证
  第一步：在render中创建getFieldDecorator对象

    const { getFieldDecorator } = this.props.form;
  

  第二步：给标签内嵌入js语法实现验证

                  <FormItem>
                        {
                            getFieldDecorator('userName',{ // username是定义的用户名变量，不同输入框的命名要是分别的
                                initialValue:'',
                                rules:[
                                    {
                                        required:true,
                                        message:'用户名不能为空'
                                    },
                                    {
                                        min:5,max:10,
                                        message:'长度不在范围内'
                                    },
                                    {
                                        pattern:new RegExp('^\\w+$','g'),  // 正则表达式都可以
                                        message:'用户名必须为字母或者数字'
                                    }
                                ]
                            })(
                                <Input prefix={<Icon type="user"/>} placeholder="请输入用户名" />
                            )
                        }
                    </FormItem>
  

  第三步：通过Form创建表单

    class FormLogin extends React.Component 将前面的export default 去掉
    
    export default Form.create()(FormLogin); 在结尾中加入
  

• 添加摁钮点击校验
  第一步： 给摁钮绑定事件

      <Button type="primary" onClick={this.handleSubmit}>登录</Button>
  

  第二步：编写事件

  handleSubmit = ()=>{
    let userInfo = this.props.form.getFieldsValue();
    this.props.form.validateFields((err,values)=>{
        if(!err){ // 如果没有错的情况下
            message.success(`${userInfo.userName} 恭喜你，您通过本次表单组件学习，当前密码为：${userInfo.userPwd}`)
        }
    })
  }
  

2. datePicker日期控件的引用

想要设置默认值，需要引用moment插件

     sudo yarn add moment --save

        import moment from 'moment
            <FormItem label="生日" >
                        {
                            getFieldDecorator('birth', {
                                initialValue: moment('2018-08-08') , // 获取moment
                                rules: [
                                    {
                                        required: true
                                    }
                                ]
                            })(
                                <DatePicker
                                    showTime
                                    format="YYYY-MM-DD"
                                />
                            )
                        }
                    </FormItem>

3.栅格左右大小分配格式提取

    const formItemLayout = { // 栅格样式 复用
        labelCol: {
            xs: 24,
            sm: 4
        },
        wrapperCol: {
            xs: 24,
            sm: 8
        }
    }

   <FormItem {... formItemLayout}> 使用es6结构赋值
   </FormItem>

4.上传文件

    <Upload
              listType="picture-card"
              howUploadList={false}
              // axtion是服务器的地址
             action="//jsonplaceholder.typicode.com/posts/"
             nChange={this.handleChange}
     >
          {this.state.userImg?<img src={this.state.userImg} />:<Icon type="plus"></Icon>}
    </Upload>
 handleChange = (info) => { // 上传图像
    if (info.file.status === 'uploading') {
        this.setState({ loading: true });
        return;
    }
    if (info.file.status === 'done') {
        // 正常是调用服务器的上传地址
    }
}

5. easy mock，语法参考mock.js

是一款可以适用于前端编写线上接口，以便测试调用，自动创建项目，编写接口，放入数据

' result|10': [ { // 生成十条数据
    "code": 0,
    "message": '失败',
    "result|10": [{
      'id|+1': 0, // 递增+1
      'userName': '@cname', // 随机的名字
      'sex|1-2': 1, // 随机在1-2中选择
      'telephone': '888888',
      'state|1-5': 1,// 随机在1-5中选择
      'interest|1-8': 1,// 随机在1-8中选择
      'birth': '1995-06-30',
      'address': '地球',
 }]

6. axios使用与封装

• 最简单的引用

    // 动态获取mock数据,根据上步创建的接口获取
  import axios from 'axios
  request = () => {
    let baseUrl = 'https://www.easy-mock.com/mock/5caffee40ee3ff114ba3e62b/yxjapi' 
    axios.get(`${baseUrl}/table/list`).then((res) =>{
        if (res.data.code == '0') {
            this.setState({
                dataSource2: res.data.result
            })
        }
    })
  }
  

• 封装axios请求

  static ajax(options){
    const baseURL = 'https://www.easy-mock.com/mock/5caffee40ee3ff114ba3e62b/yxjapi'  // 接口地址
    return new Promise((resolve,reject) => {
        axios({
            url: options.url,
            method: 'get',
            baseURL: baseURL,
            timeout: 7000,
            params: (options.data.params && options.data) || ''
        }).then((response) => {
            if (response.status == '200') {// http请求自带status
                let res = response.data
                if (res.code == '0') { // 项目服务器后台接口业务层面的判断
                    resolve(res)
                }else {
                    Modal.info({
                        title: '提示',
                        content: res.data.messsage
                    })
                }
            }else {
                reject(response.data)
            }
        })
    })
  }
  

• 使用

  axios.ajax({
        url: '/table/list',
        data: {
            params: {
                page: 1
            }
        }
    }).then((res) => {
        if (res.code == '0') {
            this.setState({
                dataSource2: res.result
            })
        }
    })
  

7. 表格分页的封装

    // 分页的封装
pagination (data, callback) {
    let page = {
        onChange: (current) => {
            callback(current)
        },
        current: data.result.page,
        pageSize: data.result.page_size,
        total: data.result.total,
        showTotal: () => {
           return `共${data.result.total}条` 
        },
        showQuickJumper: true
    }
    return page
}

• 使用

  request = () => {
    axios.ajax({
        url: '/table/list',
        data: {
            params: {
                page: 1
            },
            isShowLoading: true
        }
    }).then((res) => {
        if (res.code == '0') {
            this.setState({
                dataSource2: res.result.list,
                selectedRowKeys: [], // 删除后的重置
                selectedRows: null, // 删除后的重置
                pagination: util.pagination(res, (current)=>{ // 根据点击的页玛进行数据变化处理
                    // to-do
                    _this.params.page = current
                    _this.request()
                    message.success(`当前页${current}`)
                })
            }) 
        }
    })
  <Table 
                    bordered
                    dataSource={this.state.dataSource2}
                    columns={columns}
                    pagination={this.state.pagination}
                />
  

8 . 组件使用外部class的form表单，获取表单对象

绑定wrappedComponentRef方法输出表达对象给dataform自定义，通过

  let drgInfo = this.dataForm.props.form.getFieldsValue() 获取数据

   <OpenFormDatas wrappedComponentRef={(datas) => {this.dataForm = datas}} />

9. 地图功能的实现（基于项目中的骑车路线）

• 创建ak，加载百度地图sdk
• 地图初始化，添加地图控件
• 绘制路线（通过坐标点）
• 绘制服务区地图

(1) 创建ak，加载百度地图sdk

第一步：打开map.baidu.com，找到地图开放平台，点击进入
第二步：点击开发文档，点击web开发下的JavaScript API
第三步：在产品简介中，点击申请秘钥ak，创建应用，选择浏览器 端，白名单中设置*号，点击创建即可获取ak值
第四步：在public文件夹下的index.html的head部分中引用以下代码

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的ak秘钥"></script>

(2）初始化地图

第一步：创建一个渲染地图的容器，取一个id值

    <div id="orderDetailMap" className="order-map"></div>

第二步：为获取地图对象添加方法，并且添加控件，同时在接口数据返回后调用方法

     renderMap = (result)=>{
            this.map = new window.BMap.Map('orderDetailMap');
            // 添加地图控件
            this.map.centerAndZoom('北京',11); // 设置地图的中心点
            this.addMapControl();
      }
      // 添加地图控件
         addMapControl = ()=>{
             let map = this.map;
             map.addControl(new window.BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT}));
             map.addControl(new window.BMap.NavigationControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));
         }

(3）绘制路线

      // 绘制用户的行驶路线
drawBikeRoute = (positionList)=>{
    let map = this.map;
    let startPoint = '';
    let endPoint = '';
    // lon 经度 lat 纬度
    if (positionList.length>0){ // 判断行驶轨迹是否存在
        let first = positionList[0]; 
        let last = positionList[positionList.length-1];
        startPoint = new window.BMap.Point(first.lon,first.lat);// 获取地图点
        
        // 创建开始坐标点的图标
        let startIcon = new window.BMap.Icon('/assets/start_point.png',
        new window.BMap.Size(36,42),{// 整个图标
            imageSize:new window.BMap.Size(36,42), // 图片的大小
            anchor: new window.BMap.Size(18, 42)
        })
        
        // marker是为了将icon图标嵌入到地图里面，并且要设置坐标点实现点
        let startMarker = new window.BMap.Marker(startPoint, { icon: startIcon});
        this.map.addOverlay(startMarker);

        // 创建结束坐标点的图标
        endPoint = new window.BMap.Point(last.lon, last.lat);
        let endIcon = new window.BMap.Icon('/assets/end_point.png', new window.BMap.Size(36, 42), {
            imageSize: new window.BMap.Size(36, 42),
            anchor: new window.BMap.Size(18, 42)
        })
        
        // marker是为了将icon图标嵌入到地图里面，并且要设置坐标点实现点
        let endMarker = new window.BMap.Marker(endPoint, { icon: endIcon });
        this.map.addOverlay(endMarker);

        // 连接路线图
        let trackPoint = [];
        for(let i=0;i<positionList.length;i++){
            let point = positionList[i];
            trackPoint.push(new window.BMap.Point(point.lon, point.lat));
        }

        // 设置线的样式
        let polyline = new window.BMap.Polyline(trackPoint,{
            strokeColor:'#1869AD',
            strokeWeight:3,
            strokeOpacity:1
        })
        this.map.addOverlay(polyline);
        this.map.centerAndZoom(endPoint, 11);
    }
    
}

(4) 绘制服务区地图

       // 绘制服务区
drwaServiceArea = (positionList)=>{
    // 连接路线图
    let trackPoint = [];
    for (let i = 0; i < positionList.length; i++) {
        let point = positionList[i];
        trackPoint.push(new window.BMap.Point(point.lon, point.lat));
    }
    // 绘制服务区
    let polygon = new window.BMap.Polygon(trackPoint, {
        strokeColor: '#CE0000',
        strokeWeight: 4,
        strokeOpacity: 1,
        fillColor: '#ff8605',
        fillOpacity:0.4
    })
    this.map.addOverlay(polygon);
}

10. echart的使用

• 安装

  sudo yarn add echarts-for-react --save
  sudo yarn add echarts --save
  

• 引用

  import ReactEcharts from 'echarts-for-react';
  import echarts from 'echarts/lib/echarts'
  可以按需引用echart中某一个组件
  // 引入饼图和折线图
  import 'echarts/lib/chart/pie'
  

• 使用

  getOption() {
    let option = {
        title: {
            text: '用户骑行订单',
            x : 'center'
        },
        legend : {
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        tooltip: {
            trigger : 'item',
            formatter : "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                name : '订单量',
                type : 'pie',
                radius : '55%',
                center : [
                    '50%', '60%'
                ],
                data:[
                    {
                        value:1000,
                        name:'周一'
                    }
                ],
                itemStyle : {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    return option;
}
 // render中渲染
  <ReactEcharts
           option={this.getOption()} 
           style={{ height: 500 }}/>

11. 富文本编辑器的使用 ------ react-draft-wysiwyg

• 安装富文本组件以及将组件内容装换成html格式的draftjs

     sudo yarn add react-draft-wysiwyg draftjs-to-html --save  
  

• 使用 参考项目代码把。。。文字过长了，不让发了，我都提交了