第一步：环境准备
访问 Node.js 官网下载并安装最新 LTS 版本
安装 VS Code 编辑器
安装 VS Code 插件：ES7+ React/Redux snippets、ESLint、Prettier
第二步：项目初始化
打开 VS Code 终端（Terminal > New Terminal）
执行命令创建项目：
npx create-react-app greeting-app
创建项目日志如下：
PS F:\React> npx create-react-app greeting-app
Need to install the following packages:
create-react-app@5.1.0
Ok to proceed? (y) y
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for
old versions may be purchased (at exorbitant rates) by contacting i@izs.me
npm warn deprecated uid-number@0.0.6: This package is no longer supported.
npm warn deprecated fstream-ignore@1.0.5: This package is no longer supported.
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated fstream@1.0.12: This package is no longer supported.
npm warn deprecated tar@2.2.2: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
create-react-app is deprecated.
You can find a list of up-to-date React frameworks on react.dev
For more info see:https://react.dev/link/cra
This error message will only be shown once per install.
Creating a new React app in F:\React\greeting-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1297 packages in 2m
268 packages are looking for funding
run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
added 17 packages, and changed 1 package in 17s
268 packages are looking for funding
run `npm fund` for details
Removing template package using npm...
removed 1 package, and audited 1314 packages in 10s
268 packages are looking for funding
run `npm fund` for details
26 vulnerabilities (9 low, 3 moderate, 14 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
at genericNodeError (node:internal/errors:983:15)
at wrappedFn (node:internal/errors:537:14)
at checkExecSyncError (node:child_process:882:11)
at execSync (node:child_process:954:15)
at tryGitCommit (F:\React\greeting-app\node_modules\react-scripts\scripts\init.js:62:5)
at module.exports (F:\React\greeting-app\node_modules\react-scripts\scripts\init.js:350:25)
at [eval]:3:14
at runScriptInThisContext (node:internal/vm:209:10)
at node:internal/process/execution:449:12
at [eval]-wrapper:6:24 {
status: 128,
signal: null,
output: [ null, null, null ],
pid: 25988,
stdout: null,
stderr: null
}
Removing .git directory...
Success! Created greeting-app at F:\React\greeting-app
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 greeting-app
npm start
Happy hacking!
PS F:\React>
等待安装完成后进入项目目录：
cd greeting-app
第三步：安装必要依赖
项目已包含 React 核心依赖，可根据需要安装额外组件： package.json
