前言

众所周知，前端三大框架分别是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.

react入门①

前言