- 通过Create React App创建项目
npx create-react-app my-app
cd my-app
npm start
- 安装集中式管理路由所需包
npm install --save react-router-dom react-router-config react-loadable
- 添加集中式管理路由
- 在src下新建common文件夹
// common/router.js
import Loadable from '../utils/loadable.js'
const BasicLayout = Loadable(() => import(/* webpackChunkName: "BasicLayout" */ '../layouts/BasicLayout'))
const Entrance = Loadable(() => import(/* webpackChunkName: "Entrance" */ '../routes/Entrance/index'))
const PageNotFound = Loadable(() => import(/* webpackChunkName: "PageNotFound" */ '../components/PageNotFound/'))
const routes = [
{
component: BasicLayout,
routes: [
{
path: '/',
exact: true,
component: Entrance
},
{
path: '*',
component: PageNotFound
}
]
}
]
export default routes
- 在src下新建router.js文件
import React, { Component } from 'react'
import { renderRoutes } from 'react-router-config'
import { HashRouter as Router } from 'react-router-dom'
import routes from './common/router.js'
class Root extends Component {
render() {
return (
<Router>
{/* kick it all off with the root route */}
{renderRoutes(routes)}
</Router>
)
}
}
export default Root
// export default Root
- 最后在src/index.js文件中引入使用
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import Router from "./router";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(<Router />, document.getElementById("root"));
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
不过用了这个react-router-config包后, 控制台会给出如下的警告提示:
react-dom.development.js:67 Warning: componentWillMount has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.
* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: LoadableComponent
挺难解决的, 并且这个包有点要无人维护的情况, 所以我决定放弃使用这个包, 转而使用官方提供的代码分割API: React.lazy
修改common/router.js文件
// import Loadable from '../utils/loadable.js'
import React from 'react'
const BasicLayout = React.lazy(() => import(/* webpackChunkName: "BasicLayout" */ '../layouts/BasicLayout'))
const Entrance = React.lazy(() => import(/* webpackChunkName: "Entrance" */ '../routes/Entrance/index'))
修改src/router.js文件
// React.lazy不能单独使用，需要配合React.suspense，suspence是用来包裹异步组件，添加loading效果等
import React, { Component, Suspense } from "react";
import { renderRoutes } from "react-router-config";
import { HashRouter as Router } from "react-router-dom";
import routes from "./common/router.js";
class Root extends Component {
render() {
return (
<Suspense fallback={<div>Loading...</div>}>
<Router>
{/* kick it all off with the root route */}
{renderRoutes(routes)}
</Router>
</Suspense>
);
}
}
export default Root;
// export default Root
- 基于Create React App二次配置webpack
参考https://ant.design/docs/react/use-with-create-react-app-cn进行配置
引入 react-app-rewired 并修改 package.json 里的启动配置。。由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra
npm install react-app-rewired customize-cra --save-dev
/* package.json */
"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",
}
然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
const path = require("path");
function resolve(dir) {
return path.join(__dirname, ".", dir);
}
module.exports = function override(config, env) {
config.resolve.alias = {
"@": resolve("src")
};
return config;
};
- 引入 antd-mobile UI框架
也可以根据官网配置, 地址: https://mobile.ant.design/index-cn
npm install antd-mobile --save
config-overrides.js文件修改
const path = require("path");
const { override, fixBabelImports, addWebpackAlias } = require("customize-cra");
function resolve(dir) {
return path.join(__dirname, ".", dir);
}
module.exports = override(
addWebpackAlias({
"@": resolve("src")
}),
fixBabelImports("import", {
libraryName: "antd-mobile",
style: "css"
})
);
- 添加css扩展 -- sass
安装sass-loader和node-sass依赖
npm install sass-loader node-sass --save-dev
因为create-react-app已经默认已经添加了scss/sass对应的loader，所以在安装完之后就可以在项目中使用scss了，详见配置可以参考\node_modules\react-scripts
全局配置scss变量/函数
npm install --save-dev sass-resources-loader
config-overrides.js文件修改
const { override, adjustStyleLoaders } = require("customize-cra");
module.exports = override(
// ...其他配置...
adjustStyleLoaders(rule => {
if (rule.test.toString().includes("scss")) {
rule.use.push({
loader: require.resolve("sass-resources-loader"),
options: {
resources: "./src/assets/scss/output.scss" //这里是你自己放公共scss变量的路径
}
});
}
})
);
第一次配置React项目，记录一下