如何创建一个react项目,并编写一个简单的网站例子(1)

1 篇文章 0 订阅
1 篇文章 0 订阅

根据自己最近学习react 视频,下面谈谈如何去创建一个react项目
准备工作:
ES6语法、html5、css3、JSX语法
node.js

这里我们根据react官网中给出的安装react项目步骤来创建一个react项目。
打开react官网,可以是中文文档,当然,如果你的英文水平支持的话,可以去查看react英文的官方文档,英文的官方文档的内容相比较于中文文档会更加准确些。

在这里插入图片描述

这里我们打开的是react的中文文档官网,我们点击左上角的文档。出现下面的页面:
在这里插入图片描述

这是react官网提供的学习文档,想要学习react相关概念内容的,可以通过这个文档去学习react相关内容。

之后,我们需要点击右侧菜单栏中的安装按钮。
在这里插入图片描述
点击第二项,使用React开发新项目。
在这里插入图片描述
进入上述页面后,我们下拉左侧内容部分,可以看到下图(Create React App):
在这里插入图片描述
上面描述的是如果创建一个react-app的方式,可以看到,这里是需要用到的是create-react-app脚手架。因此,我们需要先通过npm去下载create-react-app脚手架,它可以帮助我们快速的去搭建react项目。

  1. 通过npm下载 create-react-app

由于我们需要去使用create-react-app,因此我们可以通过npm下载create-react-app。

这里我直接给出如何通过npm安装全局create-react-app脚手架的方式。当然你也可以通过网上搜索如何去下载它。

npm install -g create-react-app

2.根据官网给出的安装内容,我们现在在已经安装好了create-react-app的情况下,开始正式通过create-react-app去安装我们的react项目。

查看上面我标记有Create-React-App的图中,我们接下来的操作是:打开你的命令行(windows系统下,无论是GitCMD、cmd、还是node.js都可以)

通过命令行命令或直接右击桌面,将命令行路径定位到桌面上(Desktop)上

之后输入命令(npx create-react-app 项目名称):

在这里插入图片描述

上图中项目名称为官方给出demo的my-app,当然你也可以自己起项目名称。

输入后回车。等待它创建好你的项目。

3.启动你的react项目
在这里插入图片描述
分开输入上面两行命令即可。

他的意思是:你需要先进入到你新创建的项目路径下,通过npm start命令创建服务,在你本地创建了一个3000端口后的服务。

在你运行完上面两行命令之后,他会自动帮你打开页面地址为http://localhost:3000的页面了。如下图:
在这里插入图片描述
这时,你可以打开桌面或你自己创建项目路径上的react项目文件夹。可以观察他的文件结构:
在这里插入图片描述

这样,你就成功创建了一个最简单的react项目了。
d=====( ̄▽ ̄*)b!!!

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值