React系列之简介和安装(一)
一、什么是React？
React是用于构建用户界面的 JavaScript 库
二、为什么会发展迅速？
1、相比之前的前端框架，Ember.js和Angular 1.x这些，它没那么复杂
2、同时期的Angular 2.x相比，它的性能更好，同时比较好上手，而Angular 2.x和Angular 1.x更像是两种框架
3、Facebook的推动也是一个重要原因。
三、前端三大框架对比
1. angularJS
是一个比较完善的前端MV*框架，后为Google所收购
包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等等所有功能，依赖注入和自定义directive非常灵活，功能强大
框架【偏重】，太庞大了，学习路线长
主要提供更多的是一整套解决方案，vue和react更像是一个生态
2. reactJS 和 VueJS
有很多的相似之处：
使用 Virtual DOM
提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件
将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库
react采用的JSX语法，angular推崇使用typescript，也可以直接用js写。配合上ts还是很爽，后端的也能很快习惯ts的开发。react更注重的是在[view ui]层，用state的改变去re-render页面。angular是双向绑定，更加注重的是[model 数据]层，更加擅长对数据的处理和业务逻辑。
React和Vue都有props的概念，props在组件中是一个特殊的属性，允许父组件往子组件传送数据
React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境
SSR(server side render) 服务器端渲染
官方声明对比
VueJS：
都是组件化思想
模板的使用和数据渲染非常灵活，层次结构鲜明
简单的语法并能够简单快速构建一个项目
轻量级，体积小渲染速度更快
Vue采用的脚手架工具是：【vue-cli】 2.x版本，现在已经是3.x版本了，2.x和3.x构建项目的方式也不同了
cnpm i webpack webpack-cli -g
cnpm i vue-cli -g
vue init webpack projectName
npm run dev
初期是尤雨溪个人维护，现在有加入的团队组织个人提供技术一同维护迭代更新
Vue中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图样式和数据逻辑
跨平台
windows、android、IOS
安卓开发 IOS开发 原生APP (动画流畅)
软件打包APP
react-native开的APP 接近于原生APP
ReactJS:
React 是一个用于构建用户界面的渐进式 JavaScript 库，也可以说是 是一个采用声明式，高效而且灵活的用来构建用户界面的框架。
可以和你的其它技术栈组合到一起来使用，主要用于构建Ui，不用关注内在的实现原理，只要提供数据就可，也就是数据驱动视图，不关注路由，不处理数据请求.说白了就是，React 提供了模板语法以及一些函数钩子用于基本的 HTML 渲染
第一个真正意义上把组件化思想移植到前端开发领域，angular 1.x是模块化思想，从2.x开始也用组件化思想，但angular 一个版本一个样。学习成本大！ 后来vue也借鉴了react 和angular的思想和优点并简化了，学习成本非常低
由于react设计思想独特，性能出众，靠近后端语言的面向对象编程思想强烈，并且从最早的ui引擎逐渐变成了一套前后端都能满足的web App解决方案，所以越来越多的人使用。最后孵化出了 react native框架，目标很伟大，就算没学android开发或ios开发，也能用开发web app的方式去写 Native(原生的) app。这将是颠覆半个互联网行业生态，那到时，只要写一次ui，就能同时运行在浏览器，服务器，手机端。
庞大的生态系统，背后是强大的FB团队，野心更大，angularJS和react是竞争对手，都想取代对方
但学了 react 就可以上react native框架 开发跨平台app了，所以我看好react
组件有两个核心概念：props,state。 一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构
数据流单向，为啥不是双向呢？是因为技术不行吗？NO!，存在即有意义！
react采用的是自己开发的脚手架：create-react-app，全局安装
cnpm i create-react-app -g
npm run start
npm run eject 生成webpack的配置文件
react推广了Virtual DOM，并创造了新的语法——JSX，JSX允许开发者在JavaScript中书写HTML
react 认为组件才是王道，而组件是和模板紧密关联的，组件模板和组件逻辑分离让问题复杂化了。所以就有了 JSX 这种语法，就是为了把 HTML 模板直接嵌入到 JS 代码里面，这样就做到了模板和组件关联，但是 JS 不支持这种包含 HTML 的语法，所以需要通过工具将 JSX 编译输出成 JS 代码才能使用（可以进行跨平台开发的依据，通过不同的解释器解释成不同平台上运行的代码，由此才有ReactNative和React开发桌面客户端）
四、React的特点？
一切皆组件化思想
基于虚拟DOM性能高效
渐进式，专注ui，可以和其它的技术栈结合开发，很灵活
声明式程序设计编程
JSX语法，允许JavaScript和XML混搭，类似于node 的模板引擎 jade ejs swig handl… pug…
JSX语法的诞生都是组件间传值通信，都是单向数据流
vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。 单向数据绑定是使用状态管理工具（如redux）的前提。如果我们使用vuex，那么数据流也是单向的两者并不互斥， 在全局性数据流使用单向，方便跟踪局部性数据流使用双向，简单易操作。处理表单，vue的双向数据绑定用起来就特别舒服了
安装
五、脚手架工具create-react-app安装
npm install -g create-react-app
六、create-react-app的使用
在需要创建项目的位置打开命令行
输入create-react-app + 项目名称的命令，比如：
create-react-app myproject
七、当项目创建完成后，可以进入项目，并启动：
cd myproject
npm start
八、脚手架工具生成的目录结构
重要文件：
index.html
index.js
App.js
文件内容：
App.js
import React, { Component } from 'react';
/**
import {Component} from 'react'
相当于：
import {Component} from React // 因为react导出React对象
由于解构赋值的原因，所以Component等于React.Component
*/
//所有的组件都要继承Component
export default class App extends Component {
// 发送页面内容
render() {
return (
<div>
Hello World
</div>
);
}
}
index.js
import React from 'react'; // 导入React的作用是使用jsx语法
import ReactDOM from 'react-dom';
import App from './App'; // 接受
// 像js中使用标签的语法，叫做jsx语法
ReactDOM.render(<App />, document.getElementById('root'));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>TodoList</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
如果感觉有帮助就留下一个宝贵的赞或者给小编一个赞赏！！！！
