react安裝及使用

一, 安裝react腳手架

　　1. 全局安裝腳手架

　　　　npm install -g create-react-app

　　2. 創建我們react項目

　　　　npx create-react-app shen-react(項目名不能有大寫)

　　3. 運行

　　　　cd shen-react

　　　　npm start

二. 安裝react路由

　　1. 安裝react-router-dom

　　npm install react-router-dom --save-dev

三, 創建項目中webpack配置文件

　　npm run eject

　　如果這步報錯  運行   git add .          git commit -m 'init'

　　然后在運行 npm run eject

四, 安裝less

　　npm install less less-loader --save-dev 

　　建議是用 yarn add less-loader@5.0.0

　　修改配置文件 config/webpack.config.js

　　

// style files regexes 47行
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

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

//less 自定義 466行
// 找 sassRegex   並列放在這個對象上面, 

            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },
            //less end 自定義