手把手教你安装react

举报
秋名山码民 发表于 2022/05/29 14:13:30 2022/05/29
【摘要】 持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第4天,点击查看活动详情 React(web前端开发框架)React主要用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的html DOM元素、也可以传递动态变量、甚至是可交互的应用组件。 安装gitbash[下载gitbash](Git for Windows),我的建议是全...

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第4天,点击查看活动详情

React(web前端开发框架)

React主要用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的html DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

安装gitbash

[下载gitbash](Git for Windows),

image.png
我的建议是全部都勾选默认

安装Nodejs

[下载Node.js](Node.js (nodejs.org))

image.png

create-react-app

打开Git Bash,执行:

npm i -g create-react-app,
过程有点慢,可能要等待一段时间,如果实在不行,可以改一下镜像源:npm config set registry https://registry.npm.taobao.org

创建React App

在目标目录下打开Git Bash,在终端中执行:

create-react-app react-app # 可以替换为其他app名称

cd react-app
npm start # 启动应用

image.png
最后出现这个代表React安装成功!

可以打开VScode看一下,中间这个过程,主要是帮我们创建了一些关于react的js代码块

image.png

react第一个项目

用我们最熟悉的Hello, world!来做实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);
</script>

</body>
</html>

此刻我们在打开电脑的3000端口,就会看到,由原来的react改为电脑屏幕输出的为Hello,world!

好了,今天的react构建就到此结束,如果有什么不明白的还欢迎在评论区留言告诉我

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200