react搭建項目

一、建立react項目

使用react腳手架create-react-app

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

使用yarn

yarn init
yarn add
yarn remove
yarn/yarn install

二、啓動程序

yarn start

三、安裝須要的庫

首先安裝路由以及less庫

yarn add react-router-dom axios less-loader

 3.1 暴露webpack配置文件

yarn eject

若是有報錯

說明你以前改了配置，須要先暫存下

在VSCode的命令控制檯輸入

git add ./
git commit -m "init"

而後再執行yarn eject

package.json裏出現了不少配置就說明暴露成功了

 能夠發現config裏以及暴露了webpack的配置文件.dev是本地的開發配置，.prod是生成的配置,server是本地的server開發，使得本地開啓3000端口服務器

3.2 配置less-loader

在dev文件裏的 ‘test: /\.css$/,’前添加less-loader,並複製一份到prod配置裏

          {
            test: /\.less$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
              {
                loader:require.resolve('less-loader'),
                options: {
                  modules: false,
                  modifyVars: {
                      "@primary-color": "#f9c700"  //定製主題
                  }
                }
              }
            ],
          },

先經過less-loader去解析它，把他轉換成可以識別的文件，再經過postcss-loader進去前綴的添加，最後轉成css樣式css-loader，再轉成行內樣式style-loader,一層一層往前轉。

從新啓動yarn start 後會報錯Cannot find module 'less'，

須要

yarn add less

 3.3 安裝antd

yarn add antd

使用前引入css樣式

import 'antd/dist/antd.css';

還須要安裝使用babel-plugin-import

babel-plugin-import 是一個用於按需加載組件代碼和樣式的 babel 插件，好比該組件只使用了antd的Button組件，它就會只加載Button的css樣式

 在webpack.dev和webpack.prod的test: /\.(js|mjs|jsx)$/,裏的options里加插件，用來按需加載antd的less文件

 

['import', { libraryName: 'antd', style: true }], // import less，導入一個插件，libraraName指暴露一個庫，抽成一個style文件

 

          {
            test: /\.(js|mjs|jsx)$/,
            include: paths.appSrc,

            loader: require.resolve('babel-loader'),
            options: {
              customize: require.resolve(
                'babel-preset-react-app/webpack-overrides'
              ),
              
              plugins: [
                [
                  require.resolve('babel-plugin-named-asset-import'),
                  {
                    loaderMap: {
                      svg: {
                        ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
                      },
                    },
                  },
                ],

　　　　　　　　　　　['import', { libraryName: 'antd', style: true }], // import less

              ],
              cacheDirectory: true,
              // Save disk space when time isn't as important
              cacheCompression: true,
              compact: true,
            },
          },

配置好後，就不須要在任何地方經過import 'antd/dist/antd.css';引入樣式了

但會報錯

./node_modules/antd/lib/button/style/index.less
Module build failed:
 
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in E:\webstrom\migu\ngoc\web\react-interface\react-interface-cli\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0)

解決方法：

1.把 "style": true 改爲 "style": 'css' 就好

['import', { libraryName: 'antd', style: 'css'}], 

2.或者把 less 版本安裝成2.7.3

yarn add less@^2.7.3

建議使用方法二解決，由於在前面配置less-loader的時候對antd定製了主題

              {
                loader:require.resolve('less-loader'),
                options: {
                  modules: false,
                  modifyVars: {
                      "@primary-color": "#f9c700"  //定製主題
                  }
                }
              }

方法一能加載antd的樣式，是加載已經編譯好的css文件，改不了變量，定製的主題會失效

 3.4 jsonp（百度天氣api用到）

以前已經安裝了axios插件，可是隻支持get和post請求，不支持跨域

yarn add jsonp --save

 首先須要在百度天氣api裏得到ak值

    getWeatherAPIData(){
        let city = '北京';
        axios.jsonp({
            url:'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'
        }).then((res)=>{
            if(res.status == 'success'){
                let data = res.results[0].weather_data[0];
                this.setState({
                    dayPictureUrl:data.dayPictureUrl,
                    weather:data.weather
                })
            }
        })
    }

 

 可經過https://www.npmjs.com/package/jsonp查看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);
                }
            })
        })
    }
}

<span className="weather-img">
　　<img src={this.state.dayPictureUrl} alt="" />
</span>
<span className="weather-detail">
　　{this.state.weather}
</span> 

效果：

  3.5 redux

yarn add redux --save
yarn add react-redux --save

步驟： 

1.建立Action模塊

2.建立 Reducer模塊

3.建立Store模塊

4.經過connect方法將React組件和Redux鏈接起來

5.添加Provider做爲項目的根組件，用於數據的存儲

 安裝中間鍵：

yarn add redux-thunk --save

redux調試工具安裝

方法一：

1.首先，在Chrome中安裝Redux Devtools擴展

2.

yarn add redux-devtools-extension

 方法二：

yarn add redux-logger --save

 在控制檯直接輸出action：

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from './redux/reducer';
import './index.css';
import Router from './router'
import registerServiceWorker from './registerServiceWorker';
const middleware =[thunk, createLogger];
const store=createStore(rootReducer,applyMiddleware(...middleware));


ReactDOM.render(
    <Provider store={store}>
        <Router />
    </Provider>,
    document.getElementById('root')
);
registerServiceWorker();

reducer/index.js

import { combineReducers } from 'redux'
import { type } from '../action';
const initialState = {
    menuName: ''
}
const ebikeData = (state=initialState, action) => {
    switch (action.type) {
        case type.SWITCH_MENU:
            return {
                ...state,
                menuName:action.menuName
            };
        default:
            return {...state};
    }
};

export default ebikeData;

action/index.js

export const type = {
    SWITCH_MENU : 'SWITCH_MENU'
}

// 菜單點擊切換，修改麪包屑名稱
export function switchMenu(menuName) {
    return {
        type:type.SWITCH_MENU,
        menuName
    }
}

 

四、小技巧

4.1 建個default.less，存放顏色變量

@colorA: #f9c700;

4.2 計算寬高

height: calc(100vh);
height: calc(100%-64px);

4.3 將圖片放入public文件夾的assets文件夾中，引入路徑不須要加public

<img src="/assets/logo-ant.svg" alt=""/>

4.4 css實現箭頭 

一個正方形的盒子→把內容縮小，邊框加粗→把內容弄沒，盒子是實心的→把底邊框去掉，只留上邊框，左右邊框→左右邊框透明，上邊框白色

 

        .breadcrumb-title{
            text-align: center;
            font-size: @fontC;
            &:after{
                position: absolute;
                content: '';
                left:73px;
                top:39px;
                border-top: 9px solid @colorM;
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
            }
        }

 

效果圖

 

五、工具箱

5.1 獲取系統時間並格式化

    formateDate(time){
        if(!time)return '';
        let date = new Date(time);
        return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
    }

傳入當前系統的時間戳

        setInterval(()=>{
            let sysTime = Util.formateDate(new Date().getTime());
            this.setState({
                sysTime
            })
        },1000)

顯示：

5.2 隱藏手機號中間4位

    formatPhone(phone) {
        phone += '';
        return phone.replace(/(\d{3})\d*(\d{4})/g, '$1***$2')
    },

5.3 隱藏身份證號中11位

formatIdentity(number) {
        number += '';
        return number.replace(/(\d{3})\d*(\d{4})/g, '$1***********$2')
    },