Reactプロジェクトフレームワーク初期化操作(フレームワーク、UI、スタイル、ルーティング)およびエラーlessOptions?prependData?, appendData?, sourceMap?解決する

一、フレームCRAの作成

  ： npx create-react-app item

注記:npxが使用できないcnpmを使用して作成
二、基本プラグインのインストール

yarn add react redux react-redux redux-devtools-extension immutable react-immutable react-router-dom

三、UIフレームワークの選択(ここではAntd 4.3.3 UIを例とする)
フレームワークマニュアル:https://ant.design/index-cn(1)インストール:

yarn add antd

(2)オンデマンド・ロードの構成

     1、  ：yarn add react-app-rewired customize-cra
     2   package.json   react-scripts  react-app-rewired
     3、  config-overrides.js  （   ）
	 4、  antd      yarn add babel-plugin-import
	 5、  config-overrides.js  （   ）

(2.2)packageを修正する.json react-scriptsをreact-app-rewiredに変更

"scripts": {
     
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

(2.5)config-overridesを修正する.js構成インストールyarn add less [email protected]

//      
const {
      override, fixBabelImports, addLessLoader } = require('customize-cra');

// antd         
// module.exports = function override(config, env) {
     
//     // do stuff with the webpack config...
//     return config;
//   };


//      
module.exports = override(
    fixBabelImports('import', {
     
      libraryName: 'antd',
      libraryDirectory: 'es',
    //   style: 'css',
      style: true,
}),
addLessLoader({
     
      javascriptEnabled: true,
      modifyVars: {
     
            //       
           '@primary color': '#1DA57A'
        },
    }),
);

(3)国際化修正indexを配置する.js(注:app.jsを変更してもいい)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import {
      ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';

ReactDOM.render(
<ConfigProvider locale={
     zhCN}>
    <App />
</ConfigProvider>, 
document.getElementById('root')
);

四、プロジェクトスタイル管理モジュール
(1)取付

yarn add styled-components

(2)src\static\reset.jsファイル

import {
     createGlobalStyle} from 'styled-components';

export const GlobalStyle = createGlobalStyle`
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size:100%;
    font: inherit;
    vertical-align: baseline;
    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  body {
    line-height: 1;
  }
  body,html,#root{
   	 width: 100%;
  height: 100%;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
`;

五、ルーティングモジュールの初期化構成
(1)routerindexを作成する.js下記コード入力

//    
import React,{
     Component} from 'react';
import {
     
    HashRouter as Router,
    Route,
    Switch,
    Redirect
} from 'react-router-dom';

//     
import Login from '../pages/login/index';
import Admin from '../pages/admin/index';
import Err404 from '../components/err/404';
import Err500 from '../components/err/500';

class ReactRouter extends Component
{
     
    render()
    {
     
        return (
            <Router>
                <Switch>
                    <Route path="/login" component={
     Login}></Route>
                    <Route path="/admin">
                        <Switch>
                        {
     /* 
                          ：           
                          ：    、     
                        */}
                        <Route path="/admin" exact component={
     Admin}></Route>
                        </Switch>
                    </Route>
                    <Route path="/404" component={
     Err404}></Route>
                    <Route path="/500" component={
     Err500}></Route>
                    <Redirect to="/404" /> 
                </Switch> 
            </Router>
        )
    } 
}

export default ReactRouter;

(2)下記コード作成に必要なコンポーネント

pages/login/index.js 
pages/admin/index.js 
components/err/404.js 
components/err/500.js

import React, {
      Component } from 'react'
 class          extends Component {
     
    render() {
     
        return (
            <div>
                this is    index
            </div>
        )
    }
}

export default    

(3)router/index.jsとプロジェクトを関連付ける(App.js)

//    
import React, {
      Component } from 'react'

//     
import {
      GlobalStyle } from './static/reset';

//   UI  
import {
      ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';

//     
import Router from './router/index'

//     
class App extends Component 
{
     
    render() {
     
        return (
            <ConfigProvider locale={
     zhCN}>
                <GlobalStyle />
                <Router />
            </ConfigProvider>
        )
    }
}

export default App

六、カスタマイズの具体的な使用は自分の状況に応じて修正することができる七、起動エラー(1)問題ValidationError:Invalid options object.Less Loader has been initialized using an options object that does not match the API schema. options has an unknown property ‘source’. These properties are valid: object { lessOptions?, prependData?, appendData?, sourceMap? } ソリューション:

yarn remove less-loader
yarn add less-loader@5.0.0