# react-studentmanage-sys

**Repository Path**: panws/react-studentmanage-sys

## Basic Information

- **Project Name**: react-studentmanage-sys
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-26
- **Last Updated**: 2024-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 学生管理系统项目说明

这是使用视频教程进行复习 react 项目
使用 npm 安装运行

### `gitee地址`

[https://gitee.com/](https://gitee.com/)

### `npm start`

打开 [http://localhost:3000](http://localhost:3000) 预览

### `npm test`

测试 [running tests](https://facebook.github.io/create-react-app/docs/running-tests)

### `npm run build`

生成 [deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run eject`

`npm run eject` 是一个在 `create-react-app`（CRA）脚手架创建的 React 项目中使用的命令。Create React App 提供了一个预配置好的开发环境，它隐藏了许多底层构建工具（如 Webpack、Babel）的复杂配置，使得开发者能够快速开始 React 应用的开发。

当你执行 `npm run eject` 时，会发生以下操作：

1. **暴露配置文件**：此命令会将原本隐藏的所有配置文件从 `create-react-app` 内部模块中提取出来，并放置在项目根目录下。这意味着你将获得对 Webpack、Babel 以及其他工具的完整控制权，可以直接编辑这些配置文件以满足个性化需求。

2. **不可逆过程**：`eject` 是一个单向操作，一旦执行，就不能撤销。之后你将不再能通过简单的 `npm install` 或 `yarn upgrade` 更新 `create-react-app` 到最新版本，因为项目已经脱离了 CRA 的抽象层，变为一个自定义配置的项目。

3. **Git 考虑**：

   - 在执行 `eject` 前，确保你的项目状态干净，即没有未提交的更改。因为 `eject` 会修改项目结构并添加大量文件，可能会导致 Git 工作区混乱，如果有未提交的更改，可能需要先提交或暂存它们。
   - 如果项目尚未初始化为 Git 仓库，`eject` 后生成的一些文件可能会被 `.gitignore` 忽略，此时需要手动处理 Git 相关操作。

4. **风险与挑战**：对于不熟悉 Webpack 等构建工具的开发者来说，`eject` 后意味着更多的责任和维护工作。你需要自行管理依赖升级、配置更新以及保持构建流程的兼容性。

`npm run eject` 是为了给那些需要深度定制构建过程的开发者提供一个途径，但通常情况下，除非确实遇到 CRA 无法满足的需求，否则并不推荐轻易执行此操作，因为保持项目在 CRA 提供的抽象层内可以获得更好的可维护性和未来更新的便利性。

## 复习笔记

### 什么是 JSX？

JSX 是 javascript 的语法扩展。
JSX 写的会自动转成 React.createElement 创建的对象。
JSX 是 React.createElement 的语法糖
JSX 也是 React 元素

### React 组件

#### 类组件

#### 函数组件

### 绑定事件

```js
const clickHandle = (e) => {
  console.log(e);
  // 返回原生事件
  console.log(e.nativeEvent);
  // 取消默认行为
  e.preventDefault();
};
```

### 类组件，this 指向问题