手把手教你安装react
【摘要】 持续创作，加速成长！这是我参与「掘金日新计划 · 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),
我的建议是全部都勾选默认
安装Nodejs
[下载Node.js](Node.js (nodejs.org))
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 # 启动应用
最后出现这个代表React安装成功！
可以打开VScode看一下，中间这个过程，主要是帮我们创建了一些关于react的js代码块
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）