React开发环境搭建、项目创建、命令使用


前言

由于项目组前端紧缺的原因,一个后端开发安排了前端开发任务,之前有用过VUE开发过后端页面,这么说来还是有经验的,借此记录一下React开发环境搭建过程。


一、Node.js下载安装

1、百度搜索Node.js下载即可看到官网地址,打开可以看到如图,这里根据自己电脑操作系统选择下载安装包,往下滑可选历史版本下载。
React开发环境搭建、项目创建、命令使用
2、双击下载安装包,无脑下一步(next)即可,中间可更改安装目录。
注:此处省略安装过程
React开发环境搭建、项目创建、命令使用
3、打开cmd命令窗口,输入node -v 查看版本,如图则表示安装成功。
React开发环境搭建、项目创建、命令使用
4、检查npm命令是否支持,输入npm -v 检查版本,显示版本则表示安装成功。
注:与Node.js一起安装好了,无需另外安装
React开发环境搭建、项目创建、命令使用
5、安装cnpm命令,默认镜像较慢,我们需要切换到淘宝的镜像安装:npm install -g cnpm --registry=https://registry.npm.taobao.org,安装成功后,可以输入cnpm -v检查是否安装成功。
这里npm、cnpm简要说明一下,npm是官方自带包镜像命令,cnpm是国内淘宝镜像命令。
React开发环境搭建、项目创建、命令使用

二、创建React项目

1、安装创建React项目的模块cnpm install -g create-react-app
React开发环境搭建、项目创建、命令使用

2、切换到项目空间目录,创建React项目 react-demo,输入创建命令create-react-app react-demo在当前目录下创建。
React开发环境搭建、项目创建、命令使用
中间省略N行安装信息…成功创建React项目
React开发环境搭建、项目创建、命令使用
3、创建完成项目我们需要切到项目目录下,执行npm start启动命令运行项目,下图我们可以看到启动成功日志。
React开发环境搭建、项目创建、命令使用
4、浏览器访问启动成功日志中的路径:http://localhost:3000/,到这就算成功创建React项目了。
React开发环境搭建、项目创建、命令使用

三、React项目常用npm命令使用

命令 说明
npm install 模块名 -g 安装依赖模块,加-g全局安装,否则本地安装
npm uninstall -g 模块名 卸载依赖模块,加-g全局卸载,否则本地卸载
npm install 模块名 -g 安装依赖模块,加-g全局安装,否则本地安装
npm install 模块1 模块2 模块n --save 安装多个模块
npm start 启动项目
npm run build 打包构建项目(构建成静态文件)

总结

本章详细介绍从React环境搭建到项目创建以及常用命令使用说明,这些都是准备学习、开发React必需要掌握的技能,所谓磨刀不误砍柴功就是这么个道理,如有疑问欢迎评论留言,小编会及时回复哦~喜欢的同学动动手指点个赞、收藏吧!

更多好文敬请关注公众号:main方法

React开发环境搭建、项目创建、命令使用