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 10s

5 packages are looking for funding
  run `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 ccreactapp

Creating 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 5m

231 packages are looking for funding
  run `npm fund` for details
Git repo not initialized Error: Command failed: git --version
    at 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:14
    at Script.runInThisContext (node:vm:129:12)
    at Object.runInThisContext (node:vm:307:38)
    at node:internal/process/execution:79:19
    at [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 12s

231 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1479 packages in 3s

231 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Success! Created ccreactapp at E:\devhome\reactdemo\ccreactapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd ccreactapp
  npm start

Happy 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
> vite


  VITE v4.1.4  ready in 532 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

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