# react-demo

**Repository Path**: zkboys/react-demo

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-26
- **Last Updated**: 2025-07-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React 学习 

## 创建项目

```bash
yarn create vite react-demo --template react
```

使用 vite https://cn.vite.dev/

vite是一个构建工具，主要功能
1. 开发调试，本地电脑启动一个node web服务，用于调试页面，具有热更新、热重载功能；
2. 构架打包，将一些ES6新语法转换为浏览器可运行的js、css 预处理器（less、sass）转换为css、jsx转换等；

老牌的 webpack https://webpack.docschina.org/

- 最早前端 一个文件夹 js + css + html
- 一个html就是一个页面，会引用js 和 css

- html文档，用来描述页面有什么
- js 处理交互
- css 处理样式

全局污染： js变量冲突、css样式冲突

没有模块化，代码组织复杂

ES6+ -> 构建工具（babel） -> ES5 

css预处理器（sass、less） -> 构建工具（post-css）-> css

css module -> 构建工具（post-css）-> css

.title -> .title_index_shdafdsf
.title -> .title_about_sdfss

## 包管理器

npm yarn cnpm pnpm 

安装yarn：npm i -g yarn

node package manager

package.json 包管理器配置文件

node_modules 本地包存放路径

镜像源 放包的地方

- 下载安装包：本地、全局
- 上传包：组件库、工具库


## yarn 修改镜像源

- 全局修改：yarn config set registry https://registry.npmmirror.com
- 项目级别：.npmrc文件 registry=https://registry.npmmirror.com/
- 临时修改 yarn --registry=https://registry.npmmirror.com