前言

这篇文章是学习React框架的开始，也是预示着我又开始进步了，正在观看整篇文章的你，是否有比昨天强了一些呢？

提示：以下是本篇文章正文内容，下面案例可供参考

一、React是什么？

当然，这个问题是必不可少的环节，总结起来就以下这句话：

React.js是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。

细致化的在说一说：

Facebook 开源了 React ，这是该公司用于构建反应式图形界面的JavaScript库，已经应用于构建
Instagram网站及 Facebook 部分网站。React 基于在数据模型之上声明式指定用户界面的理
念，用户界面会自动与底层数据保持同步。与前面提及的框架不同，出于灵活性考虑，React使用
JavaScript来构建用户界面，没有选择HTML。

二、为什么要用React框架？

React 是唯一一个让我真正体验到编写代码快感和舒适感。（尽管在此之前我很排斥JSX）

简约的语法，轻量的API，组织代码时的稳健，时时刻刻让我爽到溜起…

稳定的API，每次升级都是在强化和优化，相当少少少少量的API更新，即将废弃的语法，都会有警告提示，让我们更快的升级架构。

用React这种组件化的模式敲代码让我有一种类似于搭积木一样的创造快感，每一个组件都像是一组搭好的积木，你非常清楚自己做出了什么东西，它长什么样，它有什么用。它对于你来说就是一种独立的存在，但同时，这一组组搭好的组件又可以拼凑成另一个更大的东西，就这样搭搭搭搭。这个敲代码的过程让我觉得非常爽，很符合人脑创造的过程，或者更准确的说，可能更符合现实中人创造东西的过程，很直观，出了问题也很容易定位。每写一个组件，我的脑中仿佛就有了一个形状，或者说一个模子，存放在一个仓库中。每次需要的时候，把这个模子拿出来克隆一份，只要加上不同的参数，它立马就变成你想要的样子，爽到爆炸！如果你要它在不同时刻表现不同的状态，也只要操作state数据。

三、安装React脚手架

1. 首先安装Node（直接点击跳转）

# 使用这个命令来查看你的node的版本，如果出现版本号那就是安装成功了
$ node -v

2. 安装react脚手架

$ npm install -g create-react-app

3. 新建React项目

$ create-react-app demo

demo是你的项目根目录文件夹名称

4. 启动项目

$ cd demo
$ npm start

启动项目之后会自动生成一个3000的端口 http://localhost:3000，并且自动打开默认浏览器。

在这里插入图片描述

四、React的循环数据渲染

以下代码为示例便利循环


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx小练习</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.min.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<script type="text/babel" >
		const data = ['Angular','React','Vue']
		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h1>前端js框架列表</h1>
				<ul>
					{
						data.map((item,index)=>{
							return <li key={index}>{item}</li>
						})
					}
				</ul>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>