安装依赖包

1. 安装nvm(以下均在mac上面)
   nvm 是用来安装和管理node的工具，可以在不同的node版本之间切换

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

安装完成后用一下命令检查nvm是否安装成功

nvm --version

返回nvm的版本号

2. 安装node
   安装最新版本的node

//安装最新版本的node
nvm install node
//列出所有安装的node版本
nvm list
        v8.17.0
       v10.13.0
       v10.15.0
       v10.15.3
       v12.18.3
        v15.2.1
//使用制定版本的node
nvm use v15.2.1

3. 安装yarn
   npm是和node一起安装的一个包，用npm来安装yarn

$ npm install -g yarn
$ yarn -v

4. 安装脚手架工具

npm install -g create-react-app

创建react 项目

1. 创建项目
   创建之前下检查下node和npm的版本(create-react-app要求 Node >= 6 和 npm >= 5.2)

node -v
npm -v

在命令行终端里面cd到新项目的文件夹，然后执行以下命令创建项目

create-react-app first_react

用tree命令查看创建的项目的文件夹内容如下

first_react
├── node_modules
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock

node_modules里面的内容太多没有列出

2. 运行项目
   cd 到项目文件夹里面，然后运行

npm start 或者 yarn start
//命令行输出如下：
Compiled successfully!

You can now view first_react in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.228:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

然后浏览器自动打开，出现如下画面：

image.png

说明react项目成功了，可以用vscode 打开first_react项目进行开发了

参考: 创建第一个react项目