React安装详细教程

红太狼 2023-10-10 23:47 42阅读 0赞

# 1.安装Node.js #

## 1)下载安装包 ##

[下载地址][Link 1]  
可以自行选择`zip`或者`.msi`,推荐`.msi`  
![在这里插入图片描述][f98cc6f654b6411a8e5e4d08bfa5569c.png]  
下载后选择安装路径直接`next`安装  
![在这里插入图片描述][aff10267dc794a1eaa96dad148606b87.png]  
![在这里插入图片描述][7143a1941f474310841aef7a0b243533.png]

## 2）环境安装 ##

在【个人电脑】右键→【属性】→【高级系统设置】  
![在这里插入图片描述][74760d9456f84882ae3c989e608ff1ce.png]  
在系统变量中查看【path】，点击【编辑】  
![在这里插入图片描述][a624aee8c487429d884c3605f180a65e.png]

![在这里插入图片描述][0ef898d1d6c044c5955e3fc94f5d1b1b.png]

## 3) 查看是否安装 ##

node -v

npm -v

![在这里插入图片描述][eadc5c23d27541209dd48b7777e6eb6f.png]

pm -v：查看npm安装的版本。
    npm init：会引导你建立一个package.json文件，包括名称、版本、作者等信息。
    npm list：查看当前目录下已安装的node包。
    npm ls：查看当前目录下已安装的node包。
    npm install moduleNames：安装Node模块到本地目录node_modules下。
    npm install < name > -g：将包安装到全局环境中。
    npm install < name > --save：安装的同时，将信息写入package.json中，项目路径中若是有package.json文件时，直接使用npm install方法就能够根据dependencies配置安装全部的依赖包，这样代码提交到git时，就不用提交node_modules这个文件夹了。
    npm install < name> --save-dev：安装的同时，将信息写入package.json中项目路径中若是有package.json文件时，直接使用npm install方法就能够根据devDependencies配置安装全部的依赖包，这样代码提交到git时，就不用提交node_modules这个文件夹了。
    npm uninstall moudleName：卸载node模块。

# 2.React 安装 #

![在这里插入图片描述][03d48a07c8ed4d12987d6aa2e43aedd9.png]

npm i -g create-react-app /

## 1）创建react项目 ##

项目存入指定文件夹下

![在这里插入图片描述][c8785b3824574663980f0e9205ac79dc.png]

create-react-app + 文件名

![在这里插入图片描述][334a9fa6f1da4a74b03814c37610a28d.png]  
![在这里插入图片描述][f827eb0891e542ffab9cfaf56e3f8ff4.png]

## 2）启动react项目 ##

*  进入文件的项目
 *  启动项目

npm start

![在这里插入图片描述][2db09ae9884b427c86c1d3b5341a80ec.png]

## 3) 项目启动成功 ##

![在这里插入图片描述][1cd2ca3d34ec42ba8bbd668920f3af94.png]

[Link 1]: https://nodejs.org/en/download
[f98cc6f654b6411a8e5e4d08bfa5569c.png]: https://img-blog.csdnimg.cn/f98cc6f654b6411a8e5e4d08bfa5569c.png
[aff10267dc794a1eaa96dad148606b87.png]: https://img-blog.csdnimg.cn/aff10267dc794a1eaa96dad148606b87.png
[7143a1941f474310841aef7a0b243533.png]: https://img-blog.csdnimg.cn/7143a1941f474310841aef7a0b243533.png
[74760d9456f84882ae3c989e608ff1ce.png]: https://img-blog.csdnimg.cn/74760d9456f84882ae3c989e608ff1ce.png
[a624aee8c487429d884c3605f180a65e.png]: https://img-blog.csdnimg.cn/a624aee8c487429d884c3605f180a65e.png
[0ef898d1d6c044c5955e3fc94f5d1b1b.png]: https://img-blog.csdnimg.cn/0ef898d1d6c044c5955e3fc94f5d1b1b.png
[eadc5c23d27541209dd48b7777e6eb6f.png]: https://img-blog.csdnimg.cn/eadc5c23d27541209dd48b7777e6eb6f.png
[03d48a07c8ed4d12987d6aa2e43aedd9.png]: https://img-blog.csdnimg.cn/03d48a07c8ed4d12987d6aa2e43aedd9.png
[c8785b3824574663980f0e9205ac79dc.png]: https://img-blog.csdnimg.cn/c8785b3824574663980f0e9205ac79dc.png
[334a9fa6f1da4a74b03814c37610a28d.png]: https://img-blog.csdnimg.cn/334a9fa6f1da4a74b03814c37610a28d.png
[f827eb0891e542ffab9cfaf56e3f8ff4.png]: https://img-blog.csdnimg.cn/f827eb0891e542ffab9cfaf56e3f8ff4.png
[2db09ae9884b427c86c1d3b5341a80ec.png]: https://img-blog.csdnimg.cn/2db09ae9884b427c86c1d3b5341a80ec.png
[1cd2ca3d34ec42ba8bbd668920f3af94.png]: https://img-blog.csdnimg.cn/1cd2ca3d34ec42ba8bbd668920f3af94.png