安装之前要确认你的机器上安装了 node.js 环境包括 npm。如果没有安装,可以到 node.js 的官网下载自己电脑的对应的安装包来安装好环境。Node.js 安装配置菜鸟教程 node自带npm
第一种方法(create-react-app)
安装好环境以后,只需要按照官网的指引安装 create-react-app
即可。
npm install -g create-react-app
这条命令会往我们的机器上安装一条叫 create-react-app
的命令,安装好以后就可以直接使用它来构建一个 react 的前端工程:
create-react-app hello-react
这条命令会帮我们构建一个叫 hello-react
的工程,并且会自动地帮助我们安装所需要的依赖,现在只需要安静地等待它安装完。
额外的小贴士:
如果有些同学安装过程比较慢,那是很有可能是因为 npm 下载的时候是从国外的源下载的缘故。所以可以把 npm 的源改成国内的 taobao 的源,这样会加速下载过程。在执行上面的命令之前可以先修改一下 npm 的源:
npm config set registry https://registry.npm.taobao.org
下载完以后我们就可以启动工程了,进入工程目录然后通过 npm 启动工程:
cd hello-react
npm start
终端提示成功:
并且会自动打开浏览器,就可以看到 React 的工程顺利运行的效果:
这时候我们把 src/App.js
文件中的 <h2>
标签的内容修改为 Hello React
,
<h2>Hello React</h2>
保存一下,然后户就会发现浏览器自动刷新,并且我们的修改也生效了:
到这里我们的环境已经安装好了
第二种方法,VSCode中直接新建项目:
第一步:打开VScode,ctrl+shift+` 进入终端,npx create-react-app 【新项目名称】
第二步:运行项目 npm run start