2019独角兽企业重金招聘Python工程师标准>>>

概述

什么是React

很多人可能会对这个问题感到困惑。React 其实不是Augular.js 或者 Backbone.js 那样的MVC 框架。 它只是MVC中的V — 也就是表现层， react 只做一件事，这也是符合UNIX的思路。按官网描述，其出发点为：

用于开发数据不断变化的大型应用程序（Building large applications with data that changes over time）。

React最初来自Facebook内部的广告系统项目，项目实施过程中前端开发遇到了巨大挑战，代码变得越来越臃肿且混乱不堪，难以维护。于是痛定思痛，他们决定抛开很多所谓的“最佳实践”，重新思考前端界面的构建方式，于是就有了React。

React能做什么

一开始学React是从阮一峰的React教程里学的，讲得蛮详细 [React 入门实例教程]: http://www.ruanyifeng.com/blog/2015/03/react.html
相信很多人都想知道react到底能干什么，往下看基本概念

React中的基本概念

  1. React.js
    React.js 是 React 的核心库，在应用中必须先加载核心库。
  2. ReactDOM.js
    ReactDOM.js 是 React 的 DOM 渲染器，React 将核心库和渲染器分离开了，为了在 web 页面中显示开发的组件，需要调用 ReactDOM.render 方法， 第一个参数是 React 组件，第二个参数为 HTMLElement。
  3. JSX
    作用： 描述DOM元素
    JSX 是 React 自定义的语法，最终 JSX 会转化为 JS 运行于页面当中。
  4. 组件
    组件是 React 中的核心概念，页面当中的所有元素都是通过 React 组件来表达， 我们将要写的 React 代码绝大部分都是在做 React 组件的开发。
  5. VIRTUAL DOM
    React 抽象出来的虚拟 DOM 树，虚拟树是 React 高性能的关键。
  6. 单向数据流：
    React 应用的核心设计模式，数据流向自顶向下（组件层级关系传递）

React的起源背景

  • 古老时代
    在古老的时代中Web应用程序的每次交互都用于触发服务器往返。每次点击和每个表单提 交意味着网页被卸载，请求被发送到服务器，服务器响应浏览器然后呈现的新页面。通过这种 方式，前端没有真正的管理状态。每次发生什么事情，那就是浏览器所关注的宇宙的尽头。前端只是一些生成的HTML和CSS，也许有一点JavaScript洒在上面。但是也只是为了辅助。
    完全重绘的时代，在那个时候应该都没有严格意义上的前端工程师，我们都是切图仔。

  • 第一代JS：手动重绘
    这是JS发展史上最重要的标志之一，哪怕到现在还在持续发挥着光与热。站在浏览器的角度：“我不知道我应该重新渲染，你弄明白了”，这样的思想使得前端开发人员具有了真正的话语权。第一代JavaScript框架，如Backbone.js，ExtJS和Dojo也包括了我们熟知的jQuery，首次在浏览器中引入了一个实际的 数据模型，而不是在DOM上放置一些轻量级的脚本。这也意味着您第一次在浏览器中更改状态 。数据模型的内容可能会改变，然后您必须得到用户界面中反映的这些更改。

  • 性能分析
    框架之间对于操作DOM元素的性能问题讨论： https://www.zhihu.com/question/31809713

环境搭建

  • 线上环境 线上环境提供给我们快速检验代码结果的好地方。同时线上环境也是很多技术预演的必备场景。
    操作地址： https://codepen.io/pen?&editors=0010

  • 最小化html环境
    代码参见code部分，其验证了 react 作为库的特性，只需要像使用jQuery一样，引入react.js 和react-dom.js 就可以来使用react了。 引入react时需要设置 type="text/babel"

<html><head><script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script></head><body><div id="root></div><script type="text/babel">ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('root'));</script></body>
</html>

运行结果：

  • Create-react-app
    这是开始构建新的React单页应用程序的最佳方式。它设置了您的开发环境，以便您可以使用最新的JavaScript功能，提供良好的开发人员体验，并优化您的应用程序以进行生产。你需要在你的机器上有Node> = 6。
    步骤： 1.npm install -g create-react-app 2.create-react-app my-app 3.进入目录 -> cd my-app 4.Npm start 运行项目
    Create-react-app不处理后端逻辑或数据库; 它只是创建一个前端构建管道，所以你可以将它用于任何你想要的后端。它使用诸如Babel和webpack之类的构建工具，但是使用零配置。
    当准备部署到生产环境时，运行npm run build将在build文件夹中创建应用程序的优化版本。我们可以从README和用户指南中了解有关创建React应用程序的更多信息。

  • 生产版本
    以上都是我们在开发过程中使用React的方式，具体在生产环境中，我们可以按照下面的方式来配置不同的生产环境。
    https://doc.react-china.org/docs/optimizing-performance.html#create-react-app

  • webpack 配置
    如果想查看Webpack 配置请运行 npm run eject 注意此操作是不可逆的。单纯查看可以直接参见： node_module -> react-script - > config -》

组件库的安装与使用

React之所以火爆的一大原因在于其丰富的组件生态圈，而作为国内热度很高的Ant Design 也被广泛使用。
官网：https://ant.design/index-cn
安装步骤： https://ant.design/docs/react/introduce-cn

React个人认为三套比较好的UI框架：
Ant Design： 由于是国内的UI框架 偏向国内的业务需求，主要体现页面元素比较多，业务功能比较紧凑
Material-ui： http://www.material-ui.com/ 动画的支持更好，配色更欧美范。
React-bootstrap：虽然Bootstrap也是facebook的产品，但是对于React 并没投入资源。

转载于:https://my.oschina.net/johnsken/blog/1633626

Reac 学习 初识（一）相关推荐

  1. C语言学习——初识C语言(1)

    初识C语言1 一. 初识C语言 1.什么是C语言? 2. 写一个简单的C语言程序 3.main函数 4.数据类型 5.不同数据类型所占内存的大小 5.1不同数据之间的大小转换关系 5.2不同数据类型创 ...

  2. Linux学习——初识Linux（超详细）

    初识Linux JunLeon--go big or go home 前言: Linux这门操作系统语言是必不可少的一门语言,是一门基础语言. 知识学习包括:Linux命令.Linux shell.高 ...

  3. [转载]Apache之Hadoop学习:初识hadoop

    原文转自:http://qa.taobao.com/blogs/qa?bid=10514 这是本人看到过的关于hadoop的比较容易理解的入门文章,在此转载过来,方便广大像我这样的初级码农. 原文如下 ...

  4. LIVE555再学习 -- 初识

    之前用过 LIVE555,资料什么的都是有的但是并没有系统的总结.现在有时间可以再看一下. 一.LIVE555 初识 首先要了解一下什么是 LIVE555. 参看:LIVE555 官网 参看:LIVE ...

  5. 深度学习——初识TensorFlow

    书籍:<深度学习--基于Python语言和TensorFlow平台> 三好学生问题的引入: 学校要评选三好学生,根据德育分.智育分和体育分3项分数来计算一个总分,然后根据总分来确定谁能够被 ...

  6. Sanic学习——初识Sanic

    一般我们学习一个新知识的时候总需要问三个问题,我是谁?我在哪?我要干什么?哦,不不不,不是这三个灵魂拷问.哈哈,应该是是什么?为什么?怎么办? Sanic是什么? 话不多说先给一个官方的解释 Sani ...

  7. reac学习之路（一） 组件之前的传值

    近期对于react比较感兴趣 因为最近想要换工作 投递简历的时候发现一些高薪的或者大点的公司 对于react的应用更多点 所以往后就抽点时间把react在看看 之前也有学过 但是好多年没有用了 都忘记 ...

  8. Reac学习笔记#01#组件定义以及props、state的管理

    React学习#01 组件的定义和 state 以及props的使用 官方文档 1. 特点 数据单项绑定,自上而下流动 支持组件封装和组件间的引用组合 JSX/TSX语法的使用 使用虚拟DOM操作(d ...

  9. cesium学习--初识

    一.Cesium 官方介绍:CesiumJS是一个开源的JavaScript库,用于世界级的3D地球仪和地图.任务是为静态和时间动态的内容创建领先的3D地球和地图,具有最好的性能.精度.视觉质量.平台 ...

最新文章

  1. 那个专攻JVM的00后求职者，薪水比我的还高···
  2. using的几种用法 C#
  3. 父级居中后，并继承子级浮动方法
  4. java链式结构_(Java)单链表Java语言链式结构实现(数据结构四)
  5. 【深度学习】搞懂 Vision Transformer 原理和代码，看这篇技术综述就够了
  6. arthas命令使用示例：watch
  7. 网站安全配置---挂载路由导航
  8. 洛谷P1007 独木桥（贪心）
  9. java之classpath到底是什么
  10. Android Studio的Model代码插件开发
  11. html5网页构成要素有哪些,网页界面的构成要素
  12. 【程序员节特别推送】搭建一个与技术无关的博客网站(Java后台)
  13. [渝粤教育] 北京理工大学 工程热力学 参考 资料
  14. 统计基础：3.3_假设检验之t检验（Student‘s t test）
  15. 互联网老辛带你了解云架构集群
  16. 水洼数dfs（java）
  17. 五险一金重要吗？还是趁年轻多赚钱比较重要？
  18. 目标函数和损失函数的区别
  19. office连接oracle,office2013怎么连接32位oracle
  20. Javaweb 聊天室

热门文章

  1. 不同颜色的LED不能直接并联
  2. Python项目实战：飞机大战（一）
  3. 一范数L1和二范数L2
  4. 远大净化器告诉你如何辨别好的空气净化器
  5. 【FFmpeg_SDL_MFC】1、FFMPEG视频解码器
  6. 解决OneNote在开启Vpn代理下无法同步、同步错误的问题
  7. 利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码 超详细
  8. 全球及中国自拍环形灯行业市场需求及未来竞争动向展望报告2022-2027年
  9. nowcoder 国庆集训排队 day 7 A 2016
  10. 学生党 白嫖之GPU Google colab 训练深度学习模型