【React教程】(1) React简介、React核心概念、React初始化

React

React 介绍

【React教程】(1) React简介、React核心概念、React初始化-LMLPHP

React 是一个用于构建用户界面的渐进式 JavaScript 库
- 本身只处理 UI
- 不关系路由
- 不处理 ajax
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
- 数据驱动视图
React 由 Facebook 开发
第一个真生意义上把组件化思想待到前端开发领域
- angular 早期没有组件化思想
- 后来也被 Vue 学习借鉴了

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机（参见《也许，DOM 不是答案》）。

数据驱动视图
组件化
路由
React 8w
- 对技术要求比较高
- 今年春天的，只要会用就行
- 编程性更好一些，更底层，更灵活
- 可玩儿性更高
Vue 7.5 w
angular
- 1 5.7 w
- 2 3w

React 特点

组件化
高效
- 虚拟 DOM
- Vue 2 也是虚拟 DOM
- 虚拟 DOM 更高效
灵活
- 渐进式，本身只处理 UI ，可以和你的其它技术栈组合到一起来使用
声明（配置）式设计
- data 响应式数据
- mathods 处理函数
- 这样做的好处就是按照我们约定好的方式来开发，所有人写出来的代码就像一个人写的
- state
- 方法就是类成员
- 也有特定的组件生命钩子
JSX
- 一种预编译 JavaScript 语言，允许让你的 JavaScript 和 HTML 混搭
- 模板中就是 JavaScript 逻辑
单向数据流
- 组件传值
- 所有数据都是单向的，组件传递的数据都是单向
- Vue 也是单向数据流
- 没有双向数据绑定

React 的发展历史

Facebook 内部用来开发 Instagram
2013 年开源了 React
随后发布了 React Native
React 开源协议
- 知乎专栏 -React 的许可协议到底发生了什么问题？
- 知乎 - 如何看待 Facebook 计划将 React 改为 MIT 许可证？
- 阮一峰 - 开源许可证教程
- 阮一峰 - 如何选择开源许可证
- React 最后架不住社区的压力，最后还是修改了许可协议条款。我分享，我骄傲。
React - Releases
2013 年 7 月 3 日 v0.3.0
2016 年 3 月 30 日 v0.14.8
2016 年 4 月 9 日 v15.0.0
2017 年 9 月 27 日 v16.0.0
截止到目前：2017 年 11 月 29 日 v16.2.0

React 与 Vue 的对比

技术层面

Vue 生产力更高（更少的代码实现更强劲的功能）
React 更 hack 技术占比比较重
两个框架的效率都采用了虚拟 DOM
- 性能都差不多
组件化
- Vue 支持
- React 支持
数据绑定
- 都支持数据驱动视图
- Vue 支持表单控件双向数据绑定
- React 不支持双向数据绑定
它们的核心库都很小，都是渐进式 JavaScript 库
React 采用 JSX 语法来编写组件
Vue 采用单文件组件
- template
- script
- style

开发团队

React 由 Facebook 前端维护开发
Vue
- 早期只有尤雨溪一个人
- 由于后来使用者越来越多，后来离职专职开发维护
- 目前也有一个小团队在开发维护

社区

React 社区比 Vue 更强大
Vue 社区也很强大

Native APP 开发

React Native
- 可以原生应用
- React 结束之后会学习
Weex
- 阿里巴巴内部搞出来的一个东西，基于 Vue

EcmaScript 6 补充

class

React 核心概念

组件化

虚拟 DOM

起步

初始化及安装依赖

$ mkdir react-demos
$ cd react-demos
$ npm init --yes
$ npm install --save babel-standalone react react-dom

Hello World

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>demo - Hello World</title>
  <script src="../node_modules/babel-standalone/babel.min.js"></script>
  <script src="../node_modules/react/umd/react.development.js"></script>
  <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, react!</h1>,
      document.getElementById('root')
    )
  </script>
</body>

</html>

老牛源码