React实战001:快速搭建React项目

React是一个用于构建用户界面的JAVASCRIPT库,起源于Facebook内部项目并于2013年5月开源。React拥有出众的性能而代码逻辑却非常简单,因此越来越多的人开始关注和使用React。现在已经成为前端三大主流之一,其他两大主流前端框架分别为Angular和Vue。

React实战001:快速搭建React项目

安装Node

在安装React之前我们需要安装node环境,这个我们只要在node官方下载node绿色免安装版,然后再配置下环境变量即可使用node和npm了。

React实战001:快速搭建React项目

​配置Node

将node所在目录配置到电脑的环境变量中就可以使用了,这里我的目录是D:Program Files ode-v10.8.0-win-x86,这里我们只要打开电脑-属性-系统设定-进阶-环境变量中将该路径添加到path中即可, 快捷键“win+r ”打开运行框,输入cmd在弹出的窗口中输入node -v 检查node.js是否安装成功。

React实战001:快速搭建React项目

配置npm源

npm在国内的访问速度特别的慢,这里我们配置下淘宝的镜像源,这里设置永久的输入命令:npm config set registry https://registry.npm.taobao.org/

React实战001:快速搭建React项目

安装React脚手架

现在我们可以开始来搭建React开发环React境了,FaceBook的团队官方出的一个构建React单页面应用的脚手架工具(类似Vue cli脚手架),通过它可以快速创建基于Webpack + ES6 的React项目。快捷键“win+r ”打开运行框,输入cmd在弹出的窗口中输入命令:npm install -g create-react-app,即可全局安装该脚手架工具。

React实战001:快速搭建React项目

​创建React项目

有了脚手架我们就开始创建React项目了,通过create-react-app+项目名称即可快速的创建一个React项目了。React创建项目比Vue更简单不需要配置那么多项目信息,执行命令之后直接等待安装完成即可。

React实战001:快速搭建React项目

​启动React项目

等进度条结束之后我们的项目就安装完成了,安装完之后会在当前目录下生成一个与项目名称相同的文件夹。我们可以通过cd命令进入到该文件夹继续执行命令:npm start即可启动React项目了。启动页面如图一,React默认端口为3000。

React实战001:快速搭建React项目

React目录结构

创建项目之后我们就可以得到如下所示结构的文件目录,对应的目录及文件简介都写在右边了。我们项目开发主要在src目录中来完成,接下来我们就可以愉快的开始React项目开发了。

React实战001:快速搭建React项目

总结:

借用Fackbook提供的脚手架工具可以实现快速搭建React项目,以上内容是小编给大家分享的【React实战001:快速搭建React前端开发环境】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的,在此也非常感谢大家对小编的支持!

展开阅读全文

页面更新:2024-04-12

标签:进阶   快速   项目   脚手架   快捷键   文件夹   实战   环境变量   命令   主流   名称   结构   页面   简单   目录   工具   数码

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top