React是一个用于构建用户界面的JAVASCRIPT库,起源于Facebook内部项目并于2013年5月开源。React拥有出众的性能而代码逻辑却非常简单,因此越来越多的人开始关注和使用React。现在已经成为前端三大主流之一,其他两大主流前端框架分别为Angular和Vue。
安装Node
在安装React之前我们需要安装node环境,这个我们只要在node官方下载node绿色免安装版,然后再配置下环境变量即可使用node和npm了。
配置Node
将node所在目录配置到电脑的环境变量中就可以使用了,这里我的目录是D:\Program Files\node-v10.8.0-win-x86,这里我们只要打开电脑-属性-系统设定-进阶-环境变量中将该路径添加到path中即可, 快捷键“win r ”打开运行框,输入cmd在弹出的窗口中输入node -v 检查node.js是否安装成功。
配置npm源
npm在国内的访问速度特别的慢,这里我们配置下淘宝的镜像源,这里设置永久的输入命令:npm config set registry https://registry.npm.taobao.org/
安装React脚手架
现在我们可以开始来搭建React开发环React境了,FaceBook的团队官方出的一个构建React单页面应用的脚手架工具(类似Vue cli脚手架),通过它可以快速创建基于Webpack ES6 的React项目。快捷键“win r ”打开运行框,输入cmd在弹出的窗口中输入命令:npm install -g create-react-app,即可全局安装该脚手架工具。
创建React项目
有了脚手架我们就开始创建React项目了,通过create-react-app 项目名称即可快速的创建一个React项目了。React创建项目比Vue更简单不需要配置那么多项目信息,执行命令之后直接等待安装完成即可。
启动React项目
等进度条结束之后我们的项目就安装完成了,安装完之后会在当前目录下生成一个与项目名称相同的文件夹。我们可以通过cd命令进入到该文件夹继续执行命令:npm start即可启动React项目了。启动页面如图一,React默认端口为3000。
React目录结构
创建项目之后我们就可以得到如下所示结构的文件目录,对应的目录及文件简介都写在右边了。我们项目开发主要在src目录中来完成,接下来我们就可以愉快的开始React项目开发了。
总结:
借用Fackbook提供的脚手架工具可以实现快速搭建React项目,以上内容是小编给大家分享的【React实战001:快速搭建React前端开发环境】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的,在此也非常感谢大家对小编的支持!
,