初识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

智能推荐

STM32个人笔记-系统定时器Systick_stm32f091 systick-程序员宅基地

文章浏览阅读605次。Systick:系统定时器,24位,只能递减,存在于内核,嵌套在NVIC中,所有的Cortex-M内核的单片机都具有这个定时器。Systick是24位的,重装载寄存器也为24位,递减计数器也是24位,所以它们最大可为2的24次方。counter在时钟的驱动下,从reload初值开始_stm32f091 systick

交换上的FLAPPING事件 (zhuan)-程序员宅基地

文章浏览阅读6.5k次。今天在学校的一个三层交换上看到持续的日志信息:Host 00:E0:FC:09:BC:F9is flapping between fa0/x and fa0/y.思科对此官方的解释是:Error Message SW_MATM-4-MACFLAP_NOTIF: Host [enet] in [chars] [dec] is flapping between port [chars] and..._cisco switch port-channel mac flapping

一堂精彩的全息教学公开课!_教学全息记录-程序员宅基地

文章浏览阅读926次。转载http://www.sohu.com/a/226364907_4154662018年3月21日,上海市松江区新桥中学迎来了一节别开生面的生物公开课,授课内容使用了最先进的全息教学系统。系统采用了上海域圆信息科技最新的技术,营造全息教学环境,让学生领略全息教学的魅力。全息教学系统是域圆科技自主研发的一套多人全息交互教学系统,采用最先进的虚拟现实和增强现实技术,打破传统教学格局,以生动的..._教学全息记录

HTML基础(body标签属性)_html body class-程序员宅基地

文章浏览阅读3.2k次。text:整个网页中文字的颜色link: 设置一般超链接文本的颜色alink:鼠标移动到超链接上时的颜色vlink:访问过的超链接颜色background:背景图片bgcolor:背景色leftmargin:左边距topmargin:上边距class :类name:名称id:编号style:类型 第一个网页程序 O_html body class

计算机全真模拟试题五,2015年计算机二级《MSOffice》全真模拟试题(5)-程序员宅基地

文章浏览阅读697次。三、电子表格题(共30分)22请在【答题】菜单下选择【进入考生文件夹】命令,并按照题目要求完成下面的操作。注意:以下的文件必须保存在考生文件夹下。小蒋是一位中学教师,在教务处负责初一年级学生的成绩管理。由于学校地处偏远地区,缺乏必要的教学设施,只有一台配置不太高的Pc可以使用。他在这台电脑中安装了MicrosoftOffice,决定通过Exce1来管理学生成绩,以弥补学校缺少数据库管理系统的不足。..._"复制工作表\"第一学期期末成绩\",将副本放置到原表之后;改变该副本表标签的颜色为红"

如何让织梦网站内页中的文章显示浏览多少次 ?-程序员宅基地

文章浏览阅读3.2k次。织梦dedecms内容页调用点击量的方法:曾庆平虽然用织梦好几年了,也做了N多网站了,但是这么多网站中从来都没有用过内容页调用点击率的方法,这一点也很汗颜,虽然很简单,但是对大家应该也有帮助。有朋友会说:可以再百度里 搜浏览数量代码,你找一个叫代码站的点进去会有相关的代码,这样等于没有说。使用DedeCMS建站时,在文章页的信息页面,官方给出的调用文章浏览次数的标签是:{dede:field.cl...

随便推点

Scala基础知识(个人总结)-程序员宅基地

文章浏览阅读1.4k次。 声明: 1. 本文为我的个人复习总结, 并非那种从零基础开始普及知识 内容详细全面, 言辞官方的文章 2. 由于是个人总结, 所以用最精简的话语来写文章 _scala基础

Oracle Scheduler Jobs 基本使用_oracle scheduler$_job_run_details 清除-程序员宅基地

文章浏览阅读1.5k次。创建Jobs语法:通过DBMS_SCHEDULER包来创建Jobs,是使用其CREATE_JOB过程。例如:SQL> BEGIN DBMS_SCHEDULER.CREATE_JOB ( job_name => 'INSERT_TEST_TBL', job_type => 'STO..._oracle scheduler$_job_run_details 清除

The Oracle Background Processes for Sybase Pros-程序员宅基地

文章浏览阅读153次。The Oracle Background Processes for Sybase Pros a introduce document of oracle[@more@]Page 1The Oracle Bac..._plc flusher命令

halcon读取图片的4种方法-程序员宅基地

文章浏览阅读9.8k次,点赞2次,收藏8次。HALCON读取图片共有4种方式,接下来将逐一进行介绍。1 halcon读取图片方式一1、选择菜单栏中的【文件】→【读取图像】,弹出新界面“读取图像”2、选择“图像读取”界面中的文件夹标识,弹出新的界面“选择一个文件”,选择想要展示的图片,确认【打开】。图片显示于”读取界面”中,同时说明了图片的信息,宽373像素,高296像素,颜色类型byte,通道数值3,数值3表示1个像素在内存..._halcon读取图片

ps抠头发丝教程图解:ps抠图抠头发丝的方法-程序员宅基地

文章浏览阅读6.4k次,点赞4次,收藏11次。本篇为大家分享的是ps抠头发丝教程图解:ps抠图抠头发丝的方法,我平时非常喜欢给家里人拍照,无论是孩子还是父母,喜欢记录成长,记录生活。ps抠头发丝教程图解:ps抠图抠头发丝的方法,喜欢拍照的朋友看过来,毕竟不是每一次拍照都去影楼,有师傅精修,自己多少会一点,也可以根据自己的需求修图啦,网上看见一个博主拍自己女儿,每一张都是大片的感觉,超羡慕!!!PS中的滤镜跟通道抠图都有自己的小缺点。 抽出滤镜不够准,通道太慢。 今天庞姿姿教大家用【调整边缘】高速度高效率扣头发丝。首先点击快速蒙板然后按【B】 _ps抠头发丝教程图解

函数外delete_delete ma-程序员宅基地

文章浏览阅读254次。#include "stdafx.h"#include <windows.h>#include<iostream>namespace newSpace{ char *str = new char[20]; void deleteStr() // 其实没有什么用 { delete[] str; }}char..._delete ma

推荐文章

热门文章

相关标签