react入门①

---

前言

众所周知，前端三大框架分别是react、angular、vue，今天我们就一起看看react框架的入门吧~

---

一、React定义和特点

1. 什么是React？

• React是一个用于构建用户界面的JavaScript库
• 用户界面：HTML页面（前端）
• 如果从MVC的角度看，React仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的M和C的功能
• React起源于Facebook的内部项目，后来用于开发Instagram网站，并与2013年5月开源

2. 特点

• 声明式
  需要描述的UI（HTML）看起来是什么样，就和写HTML一样

const jsx = <div className="app">
				<h1>Hello React! 动态变化数据: {count}</h1>
			</div>

• 基于组件
  组件就是看到的页面，由结构（HTML）、样式（CSS）、行为（JS）组成，且封装在一起。体现出“独立、可复用、可组合”三个特点

• 学习一次，随处使用
  使用React可以开发web应用
  使用React可以开发移动端应用
  使用React可以开发VR（虚拟现实）应用（react 360）
  ……

二、React基本使用

1. 开发环境搭建

• 创建项目目录
• 使用npm init -y命令初始化项目配置
• 检查package.json文件是否生成

2. React的安装

• 安装命令：npm i react react-dom
  react包是核心，提供创建元素、组件等功能
  react-dom包提供DOM相关功能等
• 在package.json文件中确认安装包
• 确认当前目录下生成的node_modules文件夹
• npm 5.xx 版本之后会生成package-lock.json文件

3. React的使用

创建index.html文件，引入react和react-dom两个js文件

代码如下（示例）：

<div id="root"></div>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

创建React元素，使用API是:React.createElement()

<script>
  // 返回值： React元素
  // 第一个参数：要创建的React元素名称
  // 第二个参数：该React元素的属性
  // 第三个及其以后的参数：要创建的React元素的子节点
  const el = React.createElement('h1', null, 'Hello React')
</script>

渲染React元素到页面中，使用的API是：ReactDom.render()

<script>
  // 第一个参数：要渲染的React元素
  // 第二个参数：DOM对象，用于指定渲染到页面中的位置
  const el = React.createElement('h1', null, 'Hello React')
</script>

---

总结

A good medicine tasks bitter.