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

目录

React

React 介绍

  • 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 的发展历史

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

起步

https://reactjs.org/docs/hello-world.html

初始化及安装依赖

Shell 复制代码
$ mkdir react-demos
$ cd react-demos
$ npm init --yes
$ npm install --save babel-standalone react react-dom

Hello World

html 复制代码
<!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>
相关推荐
小行星1259 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12516 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
疯狂的沙粒18 分钟前
如何在 React 项目中应用 TypeScript?应该注意那些点?结合实际项目示例及代码进行讲解!
react.js·typescript
Lysun00125 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
J总裁的小芒果41 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9643 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋1 小时前
Electron一些概念理解
前端·javascript·electron
yqcoder1 小时前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code1 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh2 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法