从0开始学react系列 - 第一节: 搭建环境+创建项目

一、安装node.js

首先安装node.js，安装之后在终端运行命令测试是否安装成功，成功会打印版本号

$ node -v
$ npm -v
$ npx -v

二、使用 create-react-app 初始化项目

# 其中 npx 是npm附带的package运行工具, react-blog是我们的项目名称
$ npx create-react-app react-blog

如果提示 node.js版本过低，要求node.js14以上版本，重新安装达到要求的版本，或者使用nvm切换到高版本。参考我的另一篇文章
node.js版本管理工具nvm的安装和使用

安装了nvm的情况下，执行 nvm use 18.12.0，我这里切换到18.12版本，你可以根据自己需要进行切换。再次运行 npx create-app 命令，提示会安装一个包，按下回车继续，等待包安装完成。
在这里插入图片描述
如果一直卡着不动，可以设置一下npm源，参考我的另一篇文章
怎么发布npm包以及npm的使用

# 设置为淘宝源
npm config set registry=https://registry.npm.taobao.org/

# 查看是否设置成功
npm config get registry

因为上面我们已经执行 create-react-app，所以已经创建好项目，这时我们就不能重复create了，否则提示目录已经存在。
在这里插入图片描述
需要删掉之前创建的目录，再重新运行

$ rm -rf react-blog
$ npx create-react-blog

create-react-app 成功

三、进入项目目录，启动项目

根据安装成功后的提示进入目录，npm start启动项目

$ cd react-blog
$ npm start

终端提示 webpack 编译成功，浏览器也自动打开访问 localhost:3001了（我这里因为有另一个项目占用了3000，所以自动切换到3001端口了，全新启动的是3000端口的），项目脚手架初始化的页面成功展示出来了。
在这里插入图片描述

四、编辑 /src/App.js 文件并保存

使用 vscode 打开项目，编辑 src 目录下的 App.js，改动将会自动重载到浏览器更新。我们新开一个终端 cd 到项目目录下，然后执行 code .

# 使用vscode打开目录
$ code .

在这里插入图片描述

我们稍微修改 App.js中的文字

在这里插入图片描述

浏览器页面上的文字也已经跟着改变。

在这里插入图片描述
更多文章将会持续记录在此系列中
封面图