Configuration react less antd

Configuration react less antd

A, react scaffolding installation

1. Global Installation

npm install -g create-react-app

1. Creating react app

create-react-app 项目名称

Second, the installation yarn

npm install -g yarn

Use yarn:

• yarn init
• yarn add
• yarn remove
• yarn install

react life cycle

getDefaultProps 
getInitialState 
componentWillMount 
render
componentDidMount
componentReceiveProps 
shouldComponentUpdate
componentWilUpdate
componentDidUpdate
componentWilUnmount

Third, install the required plug-ins

• Installation React-Router, Axios, less-loader

yarn add react-router-dom axios less less-loader

• Configuring less

  • Exposure webpack

  • yarn eject

  • Webpack.config.dev.js and webpack.config.prod.js modify files in the config directory

  • 

  • Quick positioning : Find use an array of these two documents, adding an array added to the inside,

  • //上面的css改为
    test: /\.(css|less)$/,
    
    //use数组后面添加
    {
        loader: require.resolve('less-loader'),
        //antd主题设置
        options: {
            modules:false,
            modifyVars:{
            "@primary-color":"#f9c700"
            }
         }
    }

    In use the array above css changed

    test: /\.(css|less)$/,

    Like configuration webpack.config.dev.js and webpack.config.prod.js two documents

Fourth, the installation antd

yarn add antd

Babel plug-in installation

yarn add babel-plugin-import --dev

Load demand antd components, rapid positioning: Find limit or 10000, add the following options object

plugins:[
          ['import',[{libraryName:'antd',style:true}]]
        ],
        //因为要修改源码样式,这里的style配置为true

webpack.config.prod.js modification

It may be an error

• Reduce less version

yarn add less@^2.7.3

yarn add moment --save

Installation jsonp

yarn add jsonp --save

Encountered pit

• It can not be congruent with the state
• Table must have a key value, obtained by cycling map

data.map((item,index)=>{
  item.key=index
})

Key application Baidu map

http://lbsyun.baidu.com/

Map implementation steps

• Creating ak, load Baidu Map SDK

• Map initialization

  • public folder index.html head introduced

  •  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Gs85rFwmAsGUDGoe4GUkhrKl6FpPqbTM"></script>

• Add a map control

• Draw user driving route

• Drawing service area map

Project engineering