前言:在学完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能为项目自动安装对应配置。