本教程是自己入门的时候，查看官方文档并且切合redux和 router 来进行开发
源码:
react-rookie 项目
下一篇:
react 入门实践(2)-手把手之登录页 - 简书 (jianshu.com)
技术栈:
路由：react-route
状态管理：redux
UI组件 ：antd
请求：axios
可视化图表： echarts
日期格式化插件：moment
最终效果图
login.PNG
1.首先初始化一个项目
npx create-react-app-my-app
cd my-app
npm start
npmx是 npm5.2+ 附带的 package 运行工具
2.把 package.json下的 dependencies改为一下内容:
"dependencies": {
"@babel/core": "^7.16.0",
"@craco/craco": "^6.4.5",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
"@reduxjs/toolkit": "^1.8.4",
"@svgr/webpack": "^5.5.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"antd": "^4.22.4",
"axios": "^0.27.2",
"babel-jest": "^27.4.2",
"babel-loader": "^8.2.3",
"babel-plugin-named-asset-import": "^0.3.8",
"babel-preset-react-app": "^10.0.1",
"bfj": "^7.0.2",
"browserslist": "^4.18.1",
"camelcase": "^6.2.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.2.0",
"dotenv": "^10.0.0",
"dotenv-expand": "^5.1.0",
"echarts": "^5.3.3",
"echarts-for-react": "^3.0.2",
"eslint": "^8.3.0",
"eslint-config-react-app": "^7.0.1",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"fs-extra": "^10.0.0",
"html-webpack-plugin": "^5.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.4.3",
"jest-resolve": "^27.4.2",
"jest-watch-typeahead": "^1.0.0",
"mini-css-extract-plugin": "^2.4.5",
"moment": "2.24.0",
"postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1",
"postcss-normalize": "^10.0.1",
"postcss-preset-env": "^7.0.1",
"prompts": "^2.4.2",
"react": "^18.2.0",
"react-app-polyfill": "^3.0.0",
"react-dev-utils": "^12.0.1",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"react-refresh": "^0.11.0",
"react-router-dom": "6",
"react-scripts": "^5.0.1",
"redux": "^4.2.0",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.3.0",
"semver": "^7.3.5",
"source-map-loader": "^3.0.0",
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2",
"web-vitals": "^2.1.4"
}
- 安装这些依赖 . 终端命令输入
npm install
- 新建文件夹
在src下 新建components，utils , pages,router文件夹
分别代表 组件包，工具包，页面包和路由配置。
5.在pages 下新建home文件夹,home文件夹里再创建一个index.jsx
const Home = () => {
return (
<div>你好home</div>
)
}
6.router 里新建 router.config.js
import Home from '@/pages/home/index'
import Login from '@/pages/login';
const BaseRouter = () => {
const routes = useRoutes([
{
path: '/',
element: <Home />
},
{
path: '/login',
element: <Login />
}
]);
return routes;
}
export default BaseRouter;
7.@ 别名路径配置
安装修改 CRA 配置的包：yarn add -D @craco/craco
在项目根目录中创建 craco 的配置文件：craco.config.js，并在配置文件中配置路径别名
修改 package.json 中的脚本命令
在代码中，就可以通过 @ 来表示 src 目录的绝对路径
craco.config.js
const path = require('path')
module.exports = {
webpack: {
alias: {
'@': path.join(__dirname, 'src')
}
}
}
package.json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
}
- 修改 app.js
import { BrowserRouter } from 'react-router-dom';
import BaseRouter from './router/router.config';
function App() {
return (
<>
<BrowserRouter>
<BaseRouter />
</BrowserRouter>
</>
);
}
--------------------------
然后重启项目， 只要能显示 home/index.jsx 的内容即可
这样就先搭建成功一个项目的基本了。
其他文章后续更新--------------------
下一篇:
react 入门实践(2)-手把手之登录页 - 简书 (jianshu.com)
