react 的初次安装和启动方法

时间:2024-10-13 13:56:50

1、首先,react中文官网如图所示。在中文官网中也有入门教程。

react 的初次安装和启动方法

2、本经验假设系统已经装有node和npm(可以使用nvm安装它们)。输入命令:npm install -g create-react-app安装react的脚手架。

react 的初次安装和启动方法

3、安装好之后,输入create-react-app,可以看到已经安装成功。

react 的初次安装和启动方法

4、接着使用 create-react-app 项目名称 命令,在当前命令下创建文件夹,并作为react app的存放文件夹。然后等待很久安装(如果安装过慢可切换国内源),成功之后如图所示。

react 的初次安装和启动方法

5、运行之后,得到如图所示的文件。对于初学者不用关心里边的serviceWorker.ks, App.test.js。App.js是本项目的根组件。

react 的初次安装和启动方法

6、打开package.json,可以看到几个命令,要启动项目可以使用npm start。

react 的初次安装和启动方法

7、但是如果npm项目启动出错,则耐心阅读出错提示排查原因即可。这里我遇到的问题是,项目文件夹的上层还有全局安装的node_modules,造成冲突。移动项目文件夹到自己的用户目录之外的地方即可。

react 的初次安装和启动方法

8、最后,npm start启动成功如图所示,使用localhost:3000即可访问。

react 的初次安装和启动方法

9、访问结果如图,接下来只需要修改代码,浏览器中的页面就会自动变化。

react 的初次安装和启动方法
© 手抄报圈