react 入门(1)-搭建项目

本教程是自己入门的时候，查看官方文档并且切合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"
  }

3. 安装这些依赖 . 终端命令输入

npm install

4. 新建文件夹
   在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",
}

8. 修改 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)