React技术栈-react的基本使用

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

  
　　网上有网友统计AngularJS在印度使用的较多，React在欧美使用的较多，而VUE在中国使用的较多，那我们到底该学哪个呢？其实我也很纠结这个问题，最终决定还是每个框架都去了解一下，先来学习一下React框架。
 
一.React概述
1>.官网地址
英文网站：

    https://reactjs.org/

中文网站:

    https://react.docschina.org/
2>.React简介
　　由Facebook开源的用于构建用户界面的JavaScript库(只关注于View)。
3>.React的特点
声明式:

    React使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时React能有效地更新并正确地渲染组件。

    以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化:

    创建拥有各自状态的组件，再由这些组件构成更加复杂的UI。

    组件逻辑使用JavaScript编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与DOM分离。

一次学习，随处编写:

    无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

    React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

高效:

    减少更新的次数:

        虚拟(virtual)DOM(是真实的DOM的一种映射关系), 不总是直接操作DOM,当页面需要修改时优先修改的是虚拟(virtual)DOM，间隔一段时间后，React的虚拟(virtual)DOM会自动批量修改真实的DOM。

    减少更新的区域:

        DOM Diff算法(计算页面哪些地方变化了哪些地方没有发生变化，从而确定了需要修改的区域), 避免整个页面变更，只修改发生变化的区域，即最小化页面重绘
二.react的基本使用案例
1>.准备下载React的JS相关库
下载地址：

　　https://www.bootcdn.cn/react/
2>.编写代码
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Hello React</title>

    </head>

    <body>

        <div id="box1">666</div>

    </body>

    <!--在页面中导入JS-->

    <!--导入 React的核心库-->

    <script type="text/javascript" src="../js/react.development.js"></script>

    <!--导入提供操作DOM的react扩展库-->

    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <!--导入解析JSX语法代码转为纯JS语法代码的库-->

    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!--'type="text/babel"'表示告诉"../js/babel.min.js"解析里面的JSX的代码-->

    <script type="text/babel">

        //创建虚拟DOM元素对象,不是字符串

        var vDom = <h1>Hello React!</h1>

        //将虚拟DOM渲染到页面真实DOM容器中

        ReactDOM.render(vDom,document.getElementById("box1"))

    </script>

</html>
3>.打开浏览器查看效果

 
 

BS开发扫盲篇-前端技术风云录的更多相关文章

  1. web前端技术与原生技术的竞争, 及未来的发展

    用户界面领域: web技术与原生技术之争 除了浏览器中运行之外, html5的技术也在app领域和移动端的安卓, iOS, 以及桌面端的window, linux以及OS X展开了竞争. 同样属于用户 ...

  2. 【技术博客】基于vue的前端快速开发(工具篇)

    一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...

  3. 解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）

    进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...

  4. 解密国内BAT等大厂前端技术体系-百度篇（长文建议收藏）

    1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...

  5. 【大厂】389- 解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）

    进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...

  6. 解密国内BAT等大厂前端技术体系-携程篇（长文建议收藏）

    1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第四篇,前三篇已经讲述了阿里.腾讯.百度在前端技术这几年的技术发展. 这一 ...

  7. 解密国内BAT等大厂前端技术体系-腾讯篇（长文建议收藏）

    1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第三篇,前两篇已经讲述了阿里和百度在前端技术这几年的技术发展.这一篇从腾讯 ...

  8. 【基于WinForm+Access局域网共享数据库的项目总结】之篇一：WinForm开发总体概述与技术实现

    篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...

  9. iOS开发——高级技术精选&底层开发之越狱开发第一篇

    底层开发之越狱开发第一篇 做越狱开发也有一些时间了,有很多东西想总结一下,希望给他人一些借鉴,也是自己对过去开发经历的一些总结.个人不推荐使用盗版,这里主要以技术介绍为主. 这个系列里面主要介绍怎样进 ...

随机推荐

  1. (原)关于音频onset detection算法的阅读

    Orgin:Using Audio Onset Detection Algorithms 本文档只记录了部分的内容,主要以aubio相关内容为主,并非整个文档的完整内容,记录人:lihaiping16 ...

  2. （十）redis源码解读

    一.redis工作机制 redis是 单线程,所有命令(set,get等)都会加入到队列中,然后一个个执行. 二.为什么redis速度快? 1.基于内存 2.redis协议resp 简单.可读.效率高 ...

  3. ros 源码安装

    版本lunar, 系统版本debian 9.8 参考: http://wiki.ros.org/lunar/Installation/Source 1. Installing bootstrap de ...

  4. AIOps基本概念以及能力分级

    AIOps 自从 Gartner 于2016年提出至今已有一段时间,虽然在顶级互联网及电信企业,已有较多落地,但至今仍无基于生产实践的理论体系及实施指南. 高效运维社区和云计算开源产业联盟(OSCAR ...

  5. C# FluentFTP类上传下载文件

    前言:最近要实现从FTP服务器下载和上传文件,在网上搜了一下据说 FluentFTP 是个客户端FTP功能的实现,使用还比较顺畅,所以对此展开研究,无奈网上给出的案例并没有想象中的那么简洁,所以想着自 ...

  6. jdk7中hashmap实现原理和jdk8中hashmap的改进方法总结

    1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端. 数组 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1 ...

  7. 【C++】static关键字有哪些用法？其主要作用是什么？

    static关键字的用法: 1)将全局变量修饰为静态全局变量 存储在静态存储区,整个程序运行期间一直存在 静态全局变量在声明它的文件之外是不可见的,只要声明它的文件可见,而普通的全局变量则是所有文件可 ...

  8. 21 Oracle 数据库的安装教程

    1.百度网盘中下载oracle 11g的安装包 win64_11gR2_database 解压后: 2.安装过程 <1>双击setup.exe,等待一会(2分钟左右),跳出如下界面. 点击 ...

  9. [BZOJ4382][POI2015]Podział naszyjnika （神奇HASH）

    [问题描述]    长度为n 的一串项链,每颗珠子是K 种颜色之一.第i 颗与第i-1,i+1 颗珠子相邻,第n 颗与第1 颗也相邻.    切两刀,把项链断成两条链.要求每种颜色的珠子只能出现在其中 ...

  10. 洛谷--P1028 数的计算（递推）

    题意:链接:https://www.luogu.org/problem/P1028 先输入一个自然数n (n≤1000) , 然后对此自然数按照如下方法进行处理: 不作任何处理; 在它的左边加上一个自 ...