初识React及React开发依赖介绍_react依赖包-程序员宅基地

技术标签: react.js  前端  React  javascript  

初识React

React介绍

React是什么呢?

相信每个做开发的人对它都或多或少有一些印象;

这里我们来看一下官方对它的解释:用于构建用户界面的 JavaScript 库;

目前对于前端开发来说,几乎很少直接使用原生的JavaScript来开发应用程序,而是选择一个JavaScript库(框架)

在过去的很长时间内,jQuery是被使用最多的JavaScript库;

在过去的一份调查中显示,全球前10,000个访问最高的网站中,有65%使用了jQuery,是当时最受欢迎的JavaScript库;

但是,目前甚至已经处于淘汰的边缘了;

而无论是国内外,最流行的其实是三大框架:Vue、React、Angular


React由Facebook来更新和维护,它是大量优秀程序员的思想结晶:

React的流行不仅仅局限于普通开发工程师对它的认可;

大量流行的其他框架借鉴React的思想;

Vue.js框架设计之初,有很多的灵感来自Angular和React

包括Vue3很多新的特性,也是借鉴和学习了React;

比如React Hooks是开创性的新功能(也是我们课程的重点);

Vue Composition API学习了React Hooks的思想;

Flutter的很多灵感都来自React,来自官网的一段话:(SwiftUI呢)

事实上Flutter中的Widget – Element – RenderObject;

对应React的就是JSX – 虚拟DOM – 真实DOM;

所以React可以说是前端的先驱者,它总是会引领整个前端的潮流。

React:用于构建用户界面的 JavaScript 库;

React的官网文档:https://zh-hans.reactjs.org/

在这里插入图片描述

React特点

声明式编程

声明式编程是目前整个大前端开发的模式:Vue、React、Flutter、SwiftUI;

它允许我们只需要维护自己的状态,当状态改变时,React可以根据最新的状态去渲染我们的UI界面;

组件化开发:

组件化开发页面目前前端的流行趋势,我们会将复杂的界面拆分成一个个小的组件;

如何合理的进行组件的划分和设计也是后面我会讲到的一个重点;

多平台适配

2013年,React发布之初主要是开发Web页面;

2015年,Facebook推出了ReactNative,用于开发移动端跨平台;(虽然目前Flutter非常火爆,但是还是有很多公司在使用 ReactNative);

2017年,Facebook推出ReactVR,用于开发虚拟现实Web应用程序;(VR也会是一个火爆的应用场景);

React的依赖介绍

React的开发依赖

开发React必须依赖三个库:

react:包含react所必须的核心代码

react-dom:react渲染在不同平台所需要的核心代码

babel:将jsx转换成React代码的工具, jsx语法浏览器是不识别的

第一次接触React会被它繁琐的依赖搞蒙,居然依赖这么多东西: (直接放弃?)

对于Vue来说,我们只是依赖一个vue.js文件即可,但是react居然要依赖三个包。

其实呢,这三个库是各司其职的,目的就是让每一个库只单纯做自己的事情;

在React的0.14版本之前是没有react-dom这个概念的,所有功能都包含在react里;

为什么要进行拆分呢?原因就是推出react-native

react包中包含了react web和react-native所共同拥有的核心代码。

react-dom针对web和native所完成的事情不同:

  • web端:react-dom会将jsx最终渲染成真实的DOM,显示在浏览器中
  • native端:react-dom会将jsx最终渲染成原生的控件(比如Android中的Button,iOS中的UIButton)。

Babel和React的关系

babel是什么呢?

Babel ,又名 Babel.js。

是目前前端使用非常广泛的编译器、转移器。

比如当下很多浏览器并不支持ES6的语法,但是确实ES6的语法非常的简洁和方便,我们开发时希望使用它。

那么编写源码时我们就可以使用ES6来编写,之后通过Babel工具,将ES6转成大多数浏览器都支持的ES5的语法。

React和Babel的关系:

默认情况下开发React其实可以不使用babel。

但是前提是我们自己使用 React.createElement 来编写源代码,它编写的代码非常的繁琐和可读性差。

那么我们就可以直接编写jsx(JavaScript XML)的语法,并且让babel帮助我们转换成React.createElement。

后续文章还会详细讲到;

React的依赖引入

所以,我们在编写React代码时,这三个依赖都是必不可少的

那么,如何添加这三个依赖:

方式一:直接CDN引入

方式二:下载后,添加本地依赖

方式三:通过npm管理(后续脚手架再使用)

暂时我们直接通过CDN引入,来演练下面的示例程序:

这里有一个crossorigin的属性,这个属性的目的是为了拿到跨域脚本的错误信息

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> 
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_71485750/article/details/126579940

智能推荐

2021年江苏省职业院校技能大赛中职 “网络信息安全”赛项(超详细)_2021年江苏省职业院校技能大赛网络信息安全赛项中职组-程序员宅基地

文章浏览阅读2.1k次,点赞3次,收藏6次。2021年中职组“网络空间安全”赛项一.江苏省竞赛任务书二.任务书解析:三.不懂的可以私信博主!一.江苏省竞赛任务书一、竞赛时间8:00—11:00 共计3小时二、竞赛阶段竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值第①阶段:单兵模式系统渗透测试任务一:攻击日志分析任务二:系统漏洞利用与提权任务三:代码审计任务四:web安全渗透测试任务五:Linux操作系统渗透测试任务六:端口扫描Python渗透测试备战阶段 休息20分钟第②阶段:分组对抗 系统加固 15分钟_2021年江苏省职业院校技能大赛网络信息安全赛项中职组

Python3爬取猫眼电影信息-程序员宅基地

文章浏览阅读1k次。Python3爬取猫眼电影信息import jsonimport requestsfrom requests.exceptions import RequestExceptionimport reimport time#爬取猫眼电影信息def get_one_page(url): #增加了User-Agent识别,需要在headers中添加User-Agent参数。 ..._python3爬取猫眼

初识Docker(基本概念)_if [ type docker]-程序员宅基地

文章浏览阅读620次。文章目录前言什么是Docker&为什么用它Docker基本概念Docker镜像Docker与虚拟机的差别DockerHub容器总结前言兄弟们,明天我就期末考试了,给我来一波祝福~!!!老规矩,什么是Docker,这玩意能干嘛,有什么用,为什么要用它,有什么优势。在学习一个新东西之前我们都需要带着这些疑问开始进入学习,那么今天的这篇博客主要就是讲解一些基本的概念,这样一来对于Docker的学习就非常快了,同时这也是我本人的笔记整理。那么接下来就开始一一解答上面提到的问题。本章节为纯理论,后面才是_if [ type docker]

将datatable转化为list_datatable杞塋ist-程序员宅基地

文章浏览阅读1.3k次。定义一个person类,声明属性id,name.addresspublic class Person { private int id; public int Id { get { return id; } set { id = value; } } _datatable杞塋ist

ARM Cortex-M0(1)---浅谈ARM Cortex-M0_m0的体系结构-程序员宅基地

文章浏览阅读6.2k次。浅谈ARM Cortex-M0 一、引言  ARM公司在2009年初发布了其嵌入式处理器系列中最小型、最低功耗的CortexM0处理器。CortexM0低功耗、高性能与极精简程序代码的特性,能应用于各种微控制器(MCU)中,并可让研发业者以8位的价位创造32位的效能,并进一步将传统的8位和16位的处理器推进至更高效能、更低功耗的32位处理器。二、关于CortexM0  AR..._m0的体系结构

Flash外部配置器件在SOPC中的应用_sopc中为什么加上flash就什么现象也没了-程序员宅基地

文章浏览阅读728次。1 Flash在SOPC中的作用   Flash在SOPC中的作用主要表现在两方面:一方面,可用Flash来保存FPGA的配置文件,从而可以省去EPCS芯片或解决EPCS芯片容量不够的问题。当系统上电后,从Flash中读取配置文件,对FPGA进行配置。另一方面,可用Flash来保存用户程序。对于较为复杂的SOPC系统,用户程序一般较大,用EPCS来存储是不现实的。系统完成配置后,将Flash中的用户程序转移到外接RAM或片内配置生成的RAM中,然后系统开始运行。  2 Flash编程_sopc中为什么加上flash就什么现象也没了

随便推点

使用Unity的50个建议_unity游戏中的一些规范和优化建议-程序员宅基地

文章浏览阅读491次。关于这些建议这些建议并不适用于所有的项目这些建议是基于我与3-20人的小团队项目经验总结出来的结构、可重复使用性、明晰度都是有价的——团队规模和项目规模决定了是否值得付这个价。一些建议也许公然违抗了传统的Unity开发。例如:使用专业化的组合而不是使用实例就很不像Unity的作风,价格也很高。即使看上去挺疯狂的,但我还是看到了这些建议给开发者带来了利益。 过程方面_unity游戏中的一些规范和优化建议

iOS与前端交互WKWebViewJavascriptBridge-程序员宅基地

文章浏览阅读2.5k次。废话不多说,直接进入正题~~~首先引入 pod 'WKWebViewJavascriptBridge'这部分代码是写死的主要用的是这部分代码 主要用的是这部分代码 主要用的是这部分代码 可以直接放在script标签下,也可以创建一个bridge.js function setupWKWebViewJavascriptBridge(callback) { if (window.WKWebViewJavascriptBridge..._wkwebviewjavascriptbridge

提高ASP.Net应用程序性能的十大方法-程序员宅基地

文章浏览阅读69次。转自:http://www.xiedaima.cn/read.php/72.htm提高asp.net应用程序性能的常说的神话 有用的提高asp.net应用程序性能的技巧 Asp.net应用程序操作数据库的建议 Asp.net中的缓存与后台处理进程 现在写一个asp.net的web应用程序变得非常的简单,许多的程序员都不愿花时间去构建一个性能良好的应用程序。本文将要讨论...

java reduce 求和_Java Stream流之求和的实现-程序员宅基地

文章浏览阅读2.2k次。BigDecimal:BigDecimal bb =list.stream().map(Plan::getAmount).reduce(BigDecimal.ZERO,BigDecimal::add);int、double、long:double max = list.stream().mapToDouble(User::getHeight).sum();补充:java8-Stream流之数值函数..._java reduce求和

aes_descryptoserviceprovider 中的密钥是8位; rijndaelmanaged -程序员宅基地

文章浏览阅读132次。Cannot find any provider supporting AES/CBC/PKCS7Padding关于“Cannot find any provider supporting AES/ECB/PKCS7Padding”问题的解决方案commons-codec-1.7.jarCommons Codec 1.14 Download bcprov-ext-jdk16-1.4..._descryptoserviceprovider 中的密钥是8位; rijndaelmanaged 中的密钥是32位。

AI一分钟 | 别了老司机!深圳无人驾驶公交车霸气上路;乌镇上演最强饭局,丁磊王兴刘强东大宴宾客-程序员宅基地

文章浏览阅读986次。一分钟AI美剧《硅谷》再现NIPS大会,英特尔请来Flo Rida暖场AI演讲互联网大佬的乌镇饭局刷爆朋友圈博通正式启动恶意收购:周一提交高通新董事提名深圳无人驾驶公交车上路试运营李彦宏称无人驾驶将会消灭酒驾雷军:AI将全面赋能小米的各项场景和服务刘强东乌镇发言:要在四川建185个无人机机场工信部:中国人工智能产业初步

推荐文章

热门文章

相关标签