redux-1_创建项目

redux-1 创建项目

一、初始化项目

1. 创建项目

   npx create-react-app hello-redux --template redux
   
   或者
   npx create-react-app my-app --template redux-typescript
   
   或者(本篇采用)
   npx create-react-app hello-react
   npm config set registry https://registry.npm.taobao.org
   npm i @reduxjs/toolkit react-redux
   npm i react-router-dom
   npm add antd
   

2. 查看包配置

   {
     "name": "hello-react",
     "version": "0.1.0",
     "private": true,
     "dependencies": {
       "@reduxjs/toolkit": "^1.9.1",
       "@testing-library/jest-dom": "^5.16.5",
       "@testing-library/react": "^13.4.0",
       "@testing-library/user-event": "^13.5.0",
       "antd": "^5.0.4",
       "react": "^18.2.0",
       "react-dom": "^18.2.0",
       "react-redux": "^8.0.5",
       "react-router-dom": "^6.4.4",
       "react-scripts": "5.0.1",
       "web-vitals": "^2.1.4"
     },
     "scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject"
     },
     "eslintConfig": {
       "extends": ["react-app", "react-app/jest"]
     },
     "browserslist": {
       "production": [">0.2%", "not dead", "not op_mini all"],
       "development": [
         "last 1 chrome version",
         "last 1 firefox version",
         "last 1 safari version"
       ]
     }
   }
   

3. 项目目录

   $ ls -R public/ src/
    public/:
    favicon.ico  index.html
   
    src/:
    App.js  index.js
   

4. App.js 引入样式

   import "antd/dist/reset.css";
   
   function App() {
     return (
       <div className="App">
         <p>123</p>
       </div>
     );
   }
   
   export default App;