持续创作，加速成长！这是我参与「掘金日新计划 · 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 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构建就到此结束，如果有什么不明白的还欢迎在评论区留言告诉我

手把手教你构建React