The React CRA project common directory

📂app 📂node_modules // dependent module 📂public // static file 📂 SRC // resource port API // common API entry of company project 📂assets // Static resource folder put img/style/third-party js / 📂components // project public component library 📂router // Route 📂store // state management 📂utils // project public packaging library REm. js data request etc 📂 Layout // container entry 📂XXX_framework // public component library 🔴 app.css // Home entry style 🔴 app.js // home entry js 📂 app.test.js linkindex.js // main entry js 🔴logo.svg // icon 🔴 seriveworker.js 🔴 setupproxy. js// Configure the reverse proxy 🔴 setuptest.js gitignore config-overrides 🔴package.json // Project dependencies 🔴 readme. md // Project introduction 🔴yarn.lock // Version lockingCopy the code

Get started with Ant Design quickly

Mobile. Ant. The design/docs/react /… This is the official configuration documentation

$ npm install -g create-react-app

# Note: The tool automatically initializes a scaffold and installs various necessary dependencies for the React project. If you experience network problems during the process, try configuring the proxy or using another NPM Registry.
$ create-react-app my-app

$ cdMy-app $NPM start import antD-mobile $NPM install ANTD-mobile --save here we use yarn lock version instead of NPM yarn add ANTd-mobile -d load import on demand React-app-rewired and changes the startup configuration in package.json. Thanks to the new [email protected] version, you'll also need to install customize-cra. $NPM install react-app-rewired customize-cra --save-dev yarn add react-app-rewired customize-cra-s -d /* Package. json */ Replaces the Webpack configuration item"scripts": {-"start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom"} use babel-plugin-import. Babel-plugin-import is a Babel plug-in that loads component code and styles on demand. Now let's try to install it and modify the config-overrides. NPM install babel-plugin-import --save-dev: NPM install babel-plugin-import --save-dev: NPM install babel-plugin-import --save-dev: yarn add babel-plugin-import-s -d: // override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   returnconfig; -}; + module.exports = override( + fixBabelImports('import', {
+     libraryName: 'antd-mobile',
+     style: 'css', +}), +); Change the reference - import Button from'antd-mobile/lib/button';
+ import { Button } from 'antd-mobile';
Copy the code

config-overrides.js

Common Examples

const {
	override,
	fixBabelImports,
	addWebpackAlias  
} = require('customize-cra'); // NPM customize-cra view manual const path = require('path')

function pathFn(pathUrl) {
	return path.join(__dirname, pathUrl)
}

module.exports = override(
	fixBabelImports('import', {// Introduce style libraryName:'antd-mobile',
		style: 'css'}), addWebpackAlias({// Alias: directory absolute path uses directory nameThe '@': pathFn('./src'),
		'assets': pathFn('./src/assets'),
		'components': pathFn('./src/components'),
		'router': pathFn('./src/router'),
		'utils': pathFn('./src/utils'),
		'views': pathFn('./src/views'),
		'store': pathFn('./src/store')}));Copy the code

setupProxy.js

Yarn add HTTP-proxy-middleware -s // Download dependent middleware

Const {createProxyMiddleware} = require('http-proxy-middleware'// Exports of middleware NPM see manual module.exports =function(app) {/* //app.use(proxy(identifier, reverse proxy configuration)) */ app.use(createProxyMiddleware('/ajax', {
			target: 'http://m.maoyan.com'// Request path changeOrigin:true// Use our current http://localhost:3000 instead of the target source})) app.use(createProxyMiddleware('index.php', {
			target: 'http://www.qinqin.net',
			changeOrigin: true}}))Copy the code

SASS configuration

$yarn add node – sass sass – loader – D / / if the node – sass installation failure yarn config set sass – binary – site npm.taobao.org/mirrors/nod…