(1)安装node.js,直接在官网下载安装包,根据提示安装node.js,npm包管理工具也会一同安装。
官网:
https://nodejs.org/en/
(2)打开cmd命令行,输入node -v和npm -v来查看版本号,如果显示则安装完成。
C:\Users\--->node -v
v16.1.0
C:\Users\--->npm -v
7.11.2
(3)使用npm安装create-react-app工具,其可以自动的在本地目录创建react项目。
在命令行输入:
npm install -g create-react-app
(4)可安装在默认目录下,也可以先更换到指定目录。
在命令行输入:
create-react-app my-new-app
然后就可以在安装路径中看到创建的文件夹。
文件夹中内容:
node_modules用于存放项目的依赖包,也就是构建这个React项目可能会用到的工具。
public文件夹中是 index.html存放目录,也就是React根页面的所在地。
src中用于存放js文件,也就是项目开发中的主要区域。
package.json用于记录项目信息,以及外部依赖包的导入信息等。
json文件不能直接打开,需要用到文本编辑器。
(5)在命令行中进入安装目录,部署npm,以及导入react-dom依赖包。
cd my-new-app
npm init (然后一路回车)
npm install --save react react-dom ( 在该目录下导入react和react-dom)
npm install --save react-router-dom (react路由,以后会用到)
(6)通过npm start启动项目,启动后自动弹出localhost:3000的网页窗口。
可以使用yarn代替npm,命令行下输入:
npm install -g yarn
启动项目时可能出现的错误:
(1)启动报错:npm ERR! missing script: start。
解决方案:可以检查一下是否进入到了项目目录中。
(2)‘react-scripts’ 不是内部或外部命令,也不是可运行的程序或批处理文件。
解决方案:
可以重新安装:
yarn add react-scripts
然后重启项目:
yarn start
参考:React环境搭建