React入门以及学习资料汇总分享

Posted 黑马程序员官方

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

初始化及安装依赖

$ 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>

以上是关于React入门以及学习资料汇总分享的主要内容，如果未能解决你的问题，请参考以下文章

React：JSX环境配置和基础语法，列表等操作

react入门

React入门

react入门

分享互联网2021年最新Java面试题汇总整理-附详细答案解析

opencv学习-入门系列汇总