工程搭建

接口文档：Airbnb API 开发文档

第一章：项目搭建

一、初始化工程

1. 创建工程

npm install -g create-react-app

create-react-app airbnb
cd airbnb
npm start

运行没问题后，删除不用的文件以及代码。

2. 项目目录结构

3. craco

1）craco 配置别名

官方文档：CRACO

1）默认 webpack 配置没有暴露，也不推荐。使用 craco 来配置，而不用暴露 React 脚手架的配置。

npm i -D @craco/craco

2）在项目的根目录中创建一个 CRACO 配置文件，并配置：

  my-app
  ├── node_modules
+ ├── craco.config.js
  └── package.json

3）更新 package.json 中 scripts 启动命令为 CRACO

"scripts": {
-  "start": "react-scripts start"
+  "start": "craco start"
-  "build": "react-scripts build"
+  "build": "craco build"
-  "test": "react-scripts test"
+  "test": "craco test"
}

4）在 craco.config.js 文件中配置目录别名

const path = require('path');

const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
  webpack: {
    alias: {
      '@': resolve('src/'),
      'components': resolve('src/components/'),
      'utils': resolve('src/utils/'),
    },
  },
};

2）启用 less

1）安装

npm i -S craco-less

2）craco.config.js 配置

const CracoLessPlugin = require('craco-less');

module.exports = {
  // webpack 配置
  // ......
  // 插件配置
  plugins: [
    {
      plugin: CracoLessPlugin,
    },
  ],
};

5. 重置 CSS

normalize.css

1）安装 normalize.css

npm install --save normalize.css

2）在 @\index.js 中添加

import 'normalize.css'

rest.css

1）@\assets\css\reset.less

@import 'variables.less';

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

2）@\assets\css\index.css 引入 reset.less

3）@\assets\css\variables.less

4）@\index.js 文件中引入 @\assets\css\index.less

import '@/assets/css/index.less'

二、引入技术

1. 路由配置

1）安装

npm install react-router-dom

2）@\router\index.js

import React from "react";
import { Navigate } from "react-router-dom";

const Home = React.lazy(() => import("@/views/home"))
const Entire = React.lazy(() => import("@/views/entire"))
const Detail = React.lazy(() => import("@/views/detail"))

const routes = [
  {
    path: '/',
    element: <Navigate to="/home" />
  },
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/entire',
    element: <Entire />
  }, {
    path: '/detail',
    element: <Detail />
  }
]

export default routes

3）配置 Suspense

import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Suspense>
  </React.StrictMode>
);

4）@\App.js 生成路由元素

import { useRoutes } from "react-router-dom";
import routes from '@/router'

function App() {
  return (
    <>
      <header className='header'>header</header>
      <main className='page'>
        {useRoutes(routes)}
      </main>
      <footer className='footer'>footer</footer>
    </>
  );
}

export default App

2. redux 配置

1）安装

npm install @reduxjs/toolkit react-redux

RTK 默认安装了 redux。

2）创建 store

import { configureStore } from "@reduxjs/toolkit"

const store = configureStore({
  reducer: {},
})

export default store

3）注入 store

import { Provider } from 'react-redux'
import store from './store'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
      <BrowserRouter>
        <Provider store={store}>
          <App />
        </Provider>
      </BrowserRouter>
    </Suspense>
  </React.StrictMode>
);

3. Axios

1）安装

npm install axios

2）@\services\request\config.js

const BASE_URL = "http://codercba.com:1888/airbnb/api"
const TIMEOUT = 5000

export { BASE_URL, TIMEOUT }

3）@\services\request\index.js 中封装 axios

import axios from "axios"
import { BASE_URL, TIMEOUT } from "./config"

class Myrequest {
    constructor(baseURL, timeout) {
        this.instance = axios.create({
            baseURL,
            timeout
        })

        this.instance.interceptors.request.use(config => {
            return config
        })
        this.instance.interceptors.response.use(res => {
            return res.data
        }, err => {
            return Promise.reject(err)
        })
    }
    
    request(config) {
        return this.instance.request(config)
    }
 
    get(config){
        return this.request({...config,method:'get'})
    }
 
    post(config){
        return this.request({...config,method:'post'})
    }
}
 
export default new Myrequest(BASE_URL, TIMEOUT)

4. 引入组件库

1）Material UI

官方文档：Installation - Material UI

[1] 安装组件库

# 核心依赖
npm install @mui/material @emotion/react @emotion/styled

# Material UI 默认使用 emotion，而我们需要把它替换为 styled-components
npm install @mui/material @mui/styled-engine-sc

[2] 设置模式

使用 5.15.19 版本，不设置 mode 会报错。

在 @\index.js 中进行如下配置。

import { ThemeProvider, createTheme } from '@mui/material/styles'

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
});

export default function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  );
}

[3] 看下是否集成好了

import Button from '@mui/material/Button';

<Button variant="contained" color="primary">
    Hello World
</Button>

2）Ant Design

官方文档：在 create-react-app 中使用

[1] 安装组件库

npm install antd --save

[2] 看下是否集成好了

import { Button } from 'antd';

<Button type="primary">Button</Button>

npm install styled-components