一次react從0開始建站體驗及各類填坑--開始前的準備

最近須要作一個前端網站，多個頁面，有搜索。決定使用react，雖然之前也用過react作過管理後臺，可是從0開始建站仍是第一次，中間遇到了許多問題和各類坑，最終能夠算是還算圓滿的解決了。如下記錄主要操做過程，大量參考了網上查找到的各類資料。

一、安裝npm、react（下次能夠跳過此步驟）

安裝npm

$ brew install node

配置cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

安裝create-react-app

$ cnpm install -g create-react-app

二、建立項目

$ create-react-app my-app

三、安裝各類須要的軟件並配置

進入項目目錄

$ cd my-app/

根據需求，大體須要安裝路由、less、ajax、代理等支持軟件

• 路由

$ cnpm install react-router-dom --save
$ cnpm install history --save

若是使用createBrowserHistory的話，代碼編譯後上傳到nginx環境，須要在配置中增長如下內容

location / {
    try_files  $uri /index.html;
}

• less

$ cnpm install less less-loader --save-dev
$ npm run eject

最後一步是將項目配置文件暴露出來，react要支持less必需要修改config/webpack.config.js

打開 config/webpack.config.js，有三個地方要修改

一、找到

const sassModuleRegex = /\.module\.(scss|sass)$/;

在後面添加

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

二、找到

if (preProcessor) {

整塊改爲

if (preProcessor) {
    if(preProcessor === 'less-loader') {
        loaders.push({
            loader: require.resolve(preProcessor),
            options: {
                sourceMap: isEnvProduction && shouldUseSourceMap,
                javascriptEnabled: true,
            },
        });
    }else{
        loaders.push({
            loader: require.resolve(preProcessor),
            options: {
                sourceMap: isEnvProduction && shouldUseSourceMap,
            },
        });
    }
}

三、找到 test: sassModuleRegex, 開頭的對象，在後面增長

{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
    ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
    ),
},

• ajax

$ cnpm install whatwg-fetch --save

• 代理

$ cnpm install http-proxy-middleware --save

新建文件 src/setupProxy.js

const proxy = require('http-proxy-middleware');

module.exports = app => {
    app.use(
        proxy('/api', {
            target: 'http://localhost/api/index.php/',
            changeOrigin: true,
            pathRewrite: {
                '^/api': '',
            },
        })
    );
};

效果是前端 fetch('/api/web/list') 實際指向的是：http://localhost/api/index.ph...

四、運行項目，開始編程

$ npm start

基本的安裝和配置差很少就是這些了，接下來就是個人強項了，開始碼代碼