React+Vite学习第一次笔记

1. vite构建项目

react官网给的cra创建项目命令使用的webpack，但Vite的开发速度更快，也更适合小型、简单的项目。所以，我们选择用vite构建项目。

开始 | Vite 官方中文文档

npm create vite@latest project-one

npm install

npm run dev

2. 第一个Demo

项目的入口文件为main.tsx，将项目的根组件App.tsx渲染到页面index.html上。

下面是我修改了之后的页面效果。

3. 必备知识

3.1 npx和npm的区别

总结

npm是node包管理工具，而npx是包的执行器。Node 的执行也可以 NPM 来完成，但是必须进行本地安装，通过定位本地路径或者配置 scripts 才能执行。NPX则可以直接运行尚未安装的 npm 包，它会将 Node 包下载到一个临时目录中，使用以后再删除。

详细解释

1. npm 本身不能够执行任何包，我们执行的npm run script-name，会经过如下历程。首先如果想要执行，则需要写入到 package.json 的script里面，然后通过 npm 来解析 package.json 文件，解析到script-name对应的真实的包文件在node_modules/.bin的路径，再去通过这个真实的包去执行命令。

// package.json
{
    "name": "Project-Name",
    "scripts":  {
        "script-name":  "package-name"
    }
}

2. npx可以直接运行尚未安装的 npm 包中的可执行文件。执行npx package-name就和上面效果一样，它会自动去node_modules/.bin路径和环境变量 $PATH 里面，检查命令是否存在，如果没有，则NPX 会将 Node 包下载到一个临时目录中，使用以后再删除。

NPM vs. NPX，傻傻分不清楚 - 掘金 (juejin.cn)

举个例子：

使用react脚手架创建react项目时，先全局安装脚手架，再创建。或者使用npx，就不需要全局安装脚手架

1. 不使用npx

npm i -g create-react-app 

create-react-app  my-project

2.使用npx

npx create-react-app my-project

3.2 babel和swc

Babel 和 SWC 是两个不同的 JavaScript/TypeScript 编译器。ES6 的某些高级语法在某些浏览器环境甚至是 Node.js 环境中无法执行。使用Babel或SWC就能将它们转换成向后兼容的版本，比如：将tsx和jsx转为普通的Javascript语言。

如果不使用任何webpack、vite等任何构建工具去构建react项目。而是自己手动npm init初始化项目时，则需要安装babel。