# react-project-study-from-ItHeima

**Repository Path**: sunfei666/react-project-study-from-it-heima

## Basic Information

- **Project Name**: react-project-study-from-ItHeima
- **Description**: 学习react 学习来自哔哩哔哩黑马程序员
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-22
- **Last Updated**: 2023-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 使用 Create React App 开始

该项目使用 [Create React App](https://github.com/facebook/create-react-app) 进行了引导。

## 可用脚本

在项目目录中，您可以运行以下命令：

### `npm start`

以开发模式运行应用程序。\
在浏览器中打开 [http://localhost:3000](http://localhost:3000) 以查看它。

当您进行更改时，页面将重新加载。\
您还可以在控制台中看到任何 lint 错误。

### `npm test`

以交互式监视模式启动测试运行器。\
有关更多信息，请参见有关 [运行测试](https://facebook.github.io/create-react-app/docs/running-tests) 的部分。

### `npm run build`

将应用程序构建为 `build` 文件夹的生产版本。\
它以生产模式正确捆绑 React 并优化构建以获得最佳性能。

构建是经过缩小的，文件名包括哈希值。\
您的应用程序已准备好部署！

有关更多信息，请参见有关 [部署](https://facebook.github.io/create-react-app/docs/deployment) 的部分。

### `npm run eject`

**注意：这是一个单向操作。一旦 `eject`，就无法返回！**

如果您对构建工具和配置选择不满意，可以随时 `eject`。此命令将从您的项目中删除单个构建依赖项。

相反，它将复制所有配置文件和传递依赖项（webpack、Babel、ESLint 等）直接到您的项目中，因此您可以完全控制它们。除了 `eject` 之外的所有命令仍将工作，但它们将指向复制的脚本，以便您可以进行微调。此时，您就可以自己操作了。

您不必使用 `eject`。策划的功能集适用于小型和中型部署，并且您不应该感到有义务使用此功能。但是，我们理解如果您在准备好时无法自定义此工具，则此工具将无用。

## 了解更多

您可以在 [Create React App 文档](https://facebook.github.io/create-react-app/docs/getting-started) 中了解更多信息。

要了解 React，请查看 [React 文档](https://reactjs.org/)。

### 代码拆分

此部分已移至：[https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)

### 分析捆绑大小

此部分已移至：[https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)

### 制作渐进式 Web 应用程序

此部分已移至：[https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)

### 高级配置

此部分已移至：[https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)

### 部署

此部分已移至：[https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` 无法缩小

此部分已移至：[https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

# 使用 CRA 初始化项目环境

## 安装

```shell
npx create-react-app 项目名称
```

## 页面目录解读

slot(后期补)

## 安装依赖包

### scss

1. 安装依赖

```shell
npm install sass -D
```

2. 项目接入

直接上手写 sass 代码即可

### Ant Design 组件

安装

```shell
npm install antd -D

```

引入

```js
import React from "react";
import { Button } from "antd";

const App: React.FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;
```

## 配置路由

1. 安装路由包 react-router-dom

```shell
 npm install react-router-dom
```

2. 准备两个基础路由组件 layout 和 login

/src / page / Layout / index.js

```js
const Layout = () => {
  return <div>this is Layout Page</div>;
};

export default Layout;
```

> login 组件同上

3. 在 router/index.js 文件中引入组件进行路由配置,导出 router

src / router /index.js

```js
import { createBrowserRouter } from "react-router-dom";
import Layout from "../page/Layout";
import Login from "../page/Login";

const router = createBrowserRouter([
  {
    path: "/",
    Component: Layout,
  },
  {
    path: "/login",
    Component: Login,
  },
]);

export default router;
```

4. 在入口文件中渲染`<RouterProvider/> ` ,通过组件身上的 store 属性转入 router 实例

/src 下 index.js

```jsx
import router from "./router";
import { RouterProvider } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);
```

## 配置别名路径 @

1. 针对路径转换, 修改 webpack 别名路径配置 craco

2. 针对联想提示, 修改 VSCode 配置 jsconfig.json

安装

```shell

npm install @craco/craco -D
```

配置 craco.config.js 文件

```js
const path = require("path");
module.exports = {
  // webpack配置
  webpack: {
    // 配置别名
    alias: {
      // 约定: 使用 @ 表示 src 目录
      "@": path.resolve(__dirname, "src"),
    },
  },
};
```

修改 package.json 的 script 脚本指令

```js
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
}
```

## VsCode提示配置
vcode 启动项目的时候 会自动读取该文件的配置

实现步骤:
1. 在项目根目录创建 `jsconfig.json`配置文件
2. 在配置文件中添加以下配置

```json
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./src/*"
            ]
        }
    }
}
```

## gitee 管理项目
目的:
为了记录每次阶段性的功能,使用gitee 方便管理项目


实现步骤
1. 在gitee上初始化一个空项目仓库
2. 把远程仓库 和 本地仓库关联
3. 提交代码到远程仓库