1 ，建立工程的2种方式
1）用npm npx react-create-app xxx
2) 用脚手架 creacte-react-app xxx【推荐】
2， 更换项目图标和title(属于公共的东西在public文件夹里面）
public/favicon.ico
public/index.html
3，创建react函数组件代码片段
文件->首选项->设置用户代码片段->全局->.vscode\rmc.code-snippets
{
"全局React函数组件模板": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "rmc",
"body": [
"import React, {memo} from 'react';",
"",
"const ${1:App}= memo(() => {",
"return (",
"",
"<div>${1:App}</div>",
")",
"})",
"",
"export default ${1:App}",
""
],
"description": "React函数组件默认模版"
}
}
4，增加jsconfig.json 增加智能提示
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"jsx": "preserve",
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
5 ，craco【create-react-app-config】工具配置别名（react脚手架隐藏webpack）
1)安装 npm install @craco/craco@alpha -D
2)创建craco.config.js
const path=require('path')
const resolve=pathname=>path.resolve(__dirname,pathname)
module.exports={
//webpack
webpack:{
alias:{
'@':resolve('src'),
'components':resolve('src/components'),
'untils':resolve('src/untils')
}
}
}
3）更改启动方式package.json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
//当执行npm run start 就会用craco启动项目 ，将自定义craco配置和webpack原来的配置做个合并 craco配置就生效了
6 ，配置less
Ant Design样式库（react ui框架）NO.1
官网：https://4x.ant.design/docs/react/use-with-create-react-app-cn
配置craco-less
安装：npm i craco-less@2.1.0-alpha.0
craco.config.js
引入：const CracoLessPlugin = require('craco-less');
module.exports对象中增加
plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ],
7，样式重置
normalize.css ->直接安装 npm install normalize.css 在index.js中引入
asset/css
variables.less 定义less变量
@textColor：'#484848'
@textColorSecondary：'#222'
reset.less
可以使用less变量
导入@import './variables.less'
indes.less 作为css的统一导入文件 @import './reset.less'
在index.js中引入
8，配置路由
安装：npm install react-router-dom
1）index.js 全局引入
import React,{Suspense} from 'react';
import {HashRouter} form 'react-router-dom';
<Suspense fallback='loading'>
<HashRouter>
<App />
</HashRouter>
2）定义路由
route/routes.js
import React from "react";
import { Navigate } from "react-router-dom";
const Home = React.lazy(() => import("@/view/home"));
const Detail = React.lazy(() => import("@/view/detail"));
const Entries = React.lazy(() => import("@/view/entries"));
const routes = [
{
path: '',
element: <Navigate to='/home'/>
},
{
path: '/home',
element: <Home/>
},
{
path: '/detail',
element: <Detail/>
},
{
path: '/entries',
element: <Entries/>
},
];
export default routes;
3）在App.js中使用路由
import { useRoutes } from 'react-router-dom';
import routes from '@/router';
function App() {
return (
<div className="App">
{useRoutes(routes)}
</div>
);
}
export default App;
