React学习历程----初步部署环境

前言：在学完Vue3后的一段时间里，决定继续为自己充电，于是选择React。

本文依托于哔哩哔哩React教程（2023最新全套100集）React入门到项目实战（B站最新最全超详细教程）_哔哩哔哩_bilibili

系统学习一段时间后做的笔记。

### React项目搭建
脚手架 提高生产和开发效率的工具

### React 需要node.js 和 webpack环境
node -v   看是否有安装 node
webpack -V  看是否有安装webpack

### 如何使用npx在本地安装包
```cmd
    npm: node包管理器，使用npm 下载包
    npx: 执行二进制文件，npm 从5.2版本开始 , 增加了npx 命令
  # 生成依赖项目文件 
    yarn init -y
    (注意：package.json 文件名 "name": "React_project"  不能含有中文)
  # 使用本地安装(脚手架)
    yarn add -D create-react-app
    (由于非全局安装，故create-react-app --version 无法查找版本)
  # 创建项目
    npx create-react-app 项目名
    (项目名首字母不可大写)
  # 当前脚手架版本
    npx create-react-app --version

  # npx 自动查询当前依赖包可执行文件，若查不到，则前往环境变量，若依旧为无，自动安装
```

### 2.全局安装creat-react-app
```cmd
npm i -g create-react-app  #全局安装脚手架
create-react-app --version #全局查看版本号
create-react-app project   #全局创建项目
```

### 解读：React内置webpack为何在项目中见不到
React 做了内置隐藏，封装于package.json的  "react-scripts" 里面
Vue 项目没做隐藏，故能正常看到

暴露webpack指令 (一旦使用，无法重新隐藏webpack配置) :    
npm run eject/yarn eject 会复制所有依赖项(webpack、babel)到项目中，此操作不可逆  且为单项操作


### src和public文件内,保留.icon + index.html +index.js  以外
当使用 class构造器组件时， 
快速创建配置
侧边 ES7插件 (ES7+ React/Redux/React-Native snippets)
使用 键盘输入 rce 指令  回车即可

推荐使用本地配置，毕竟后期运行其他不同版本项目，容易出现不兼容问题。

npx能为项目自动安装对应配置。