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

时间:2024-03-23 18:34:11

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

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

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

这里我们打开的是react的中文文档官网,我们点击左上角的文档。出现下面的页面:
如何创建一个react项目,并编写一个简单的网站例子(1)

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

之后,我们需要点击右侧菜单栏中的安装按钮。
如何创建一个react项目,并编写一个简单的网站例子(1)
点击第二项,使用React开发新项目。
如何创建一个react项目,并编写一个简单的网站例子(1)
进入上述页面后,我们下拉左侧内容部分,可以看到下图(Create React App):
如何创建一个react项目,并编写一个简单的网站例子(1)
上面描述的是如果创建一个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 项目名称):

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

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

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

3.启动你的react项目
如何创建一个react项目,并编写一个简单的网站例子(1)
分开输入上面两行命令即可。

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

在你运行完上面两行命令之后,他会自动帮你打开页面地址为http://localhost:3000的页面了。如下图:
如何创建一个react项目,并编写一个简单的网站例子(1)
这时,你可以打开桌面或你自己创建项目路径上的react项目文件夹。可以观察他的文件结构:
如何创建一个react项目,并编写一个简单的网站例子(1)

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