react学习笔记-1：创建项目

• 安装nodejs

https://nodejs.org/dist/v18.14.2/node-v18.14.2-x64.msi

修改国内源：npm config set registry https://registry.npm.taobao.org

• 使用create-react-app脚手架创建项目

安装脚手架

npm install -g create-react-app
全局安装，可以在任意的命令行中执行命令，同样可以使用vscode内的终端进行操作

E:\devhome\reactdemo>npm install -g create-react-app
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.added 67 packages in 10s5 packages are looking for fundingrun `npm fund` for details
npm notice
npm notice New minor version of npm available! 9.5.0 -> 9.6.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.0
npm notice Run npm install -g npm@9.6.0 to update!
npm notice

 使用create-react-app脚手架创建项目

使用create-react-app脚手架：npx create-react-app ccreactapp

E:\devhome\reactdemo>npx create-react-app ccreactappCreating a new React app in E:\devhome\reactdemo\ccreactapp.Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...added 1417 packages in 5m231 packages are looking for fundingrun `npm fund` for details
Git repo not initialized Error: Command failed: git --versionat checkExecSyncError (node:child_process:885:11)at execSync (node:child_process:957:15)at tryGitInit (E:\devhome\reactdemo\ccreactapp\node_modules\react-scripts\scripts\init.js:46:5)at module.exports (E:\devhome\reactdemo\ccreactapp\node_modules\react-scripts\scripts\init.js:276:7)at [eval]:3:14at Script.runInThisContext (node:vm:129:12)at Object.runInThisContext (node:vm:307:38)at node:internal/process/execution:79:19at [eval]-wrapper:6:22 {status: 1,signal: null,output: [ null, null, null ],pid: 11244,stdout: null,stderr: null
}Installing template dependencies using npm...added 62 packages in 12s231 packages are looking for fundingrun `npm fund` for details
Removing template package using npm...removed 1 package, and audited 1479 packages in 3s231 packages are looking for fundingrun `npm fund` for details6 high severity vulnerabilitiesTo address all issues (including breaking changes), run:npm audit fix --forceRun `npm audit` for details.Success! Created ccreactapp at E:\devhome\reactdemo\ccreactapp
Inside that directory, you can run several commands:npm startStarts the development server.npm run buildBundles the app into static files for production.npm testStarts the test runner.npm run ejectRemoves this tool and copies build dependencies, configuration filesand scripts into the app directory. If you do this, you can’t go back!We suggest that you begin by typing:cd ccreactappnpm startHappy hacking!

tips：默认webpack和babel等文件是隐藏的，可以通过 npm run eject来显示，但此命令不可逆.

运行项目

进入项目文件夹后，运行 npm start ；
会自动打开浏览器，显示example页面。

• 使用vite脚手架创建项目

初始化项目

使用create-vite脚手架：npm init vite --registry=https://registry.npm.taobao.org

tips：默认连接国外源，可以临时配置使用国内源，--registry=https://registry.npm.taobao.org

安装模块

打开package.json，参照补充依赖包，如react-redux，react-router-dom，redux等

"dependencies": {"react": "^18.2.0","react-dom": "^18.2.0","react-redux": "^8.0.5","react-router-dom": "^6.8.2","redux": "^4.2.1"}

保存后在终端执行 npm install 来下载安装对应的package包 

运行项目

进入项目文件夹后，运行 npm run dev ；

PS E:\devhome\reactdemo\ccreactnew\vite-project> npm run dev> vite-project@0.0.0 dev
> viteVITE v4.1.4  ready in 532 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  press h to show help

打开浏览器输入地址，显示example页面。