React入门 学习全记录(适合和我一样有Vue经验想学习react的同学~)

前端目前的三大框架:Vue、React、Angular比较

  • 都采用了组件化开发的方式,都是基于MVVM的框架有着虚拟DOM,
  • Vue 和 Angular 都采用了响应式设计的方式,当数据发生变化时会自动更新视图。
  • React 和 Angular 的复杂性也使得它们更加适合于大型和复杂的项目

Vue是一款轻量级、渐进式、灵活且易于学习的框架,适合快速构建单页面应用。

React是由Facebook开发,具有很强的扩展性。提供了一套完整的开发工具和生态系统。

Angular是由Google开发,对java和c的使用者而言,angular的静态检查、依赖注入的特性,以及面向对象的编程风格,使得angular都要更亲切一些。

React自身

官方简中文档地址
相对于Vue而言,react因为更复杂的JSX语法和社区文档,React项目代码结构相较vue不是太清晰和直观等原因,学习成本比VUE高。但也是前端必会的技术栈。
同时,React真正的在拼开发者的JS功底,如果一个开发者对于JS不精通或者熟练,也会在学习Reat时感觉比Vue难。
在学习React之前,至少要先掌握以下内容:

判断this的指向
class()
ES6语法规范
npm包管理器
原型、原型链
数组常用方法
模块化
  1. JSX 语法:React 使用 JSX 语法来描述组件的结构和行为,它是一种将 HTML 和 JavaScript 结合起来的语法,使得开发者可以在 JavaScript 中直接编写 HTML 结构和组件逻辑,降低了学习成本和开发难度。
  2. 社区支持:React 拥有一个庞大的社区,提供了大量的插件、库和工具,可以帮助开发者快速构建高质量的 Web 应用程序。
  3. 函数式编程:React 在设计时也注重函数式编程的思想,这种编程方式更加简洁、可维护和可测试,也更容易实现代码的复用和组合
  4. 特点:虚拟DOM、组件化、非双向绑定、React Native移动开发(ins facebook)、JSX
    相对应的Vue特点:虚拟DOM、组件化、双向绑定、单向数据流

React技术栈 React全家桶

  • React基础
  • React-Router 全局组件路由 对应vue-router
  • PubSub 消息管理 实现兄弟组件传值 对应props/$emit/ref
  • Redux 集中式状态管理 对应VueX 都是从Flux中衍生出来
  • Ant-Design UI库 对应element-UI

React安装

脚手架其实就是提高我们生产和开发效率的工具。
在我们的React中默认使用yarn,yarn是由facebook推出的一款新的is包管理工具,当然了我们也可以使用npm
npm install -g yarn
yarn -v查看版本 以及是否安装成功
yarn init y与npm init y一致,初始化一个pack.json文件
yarn add -D create-react-app使用本地安装
npx create-react-app [项目名]使用脚手架创建react项目
在这里插入图片描述
npx create-react-app --version查看脚手架版本

待续。。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/535667.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MongoDB黑窗口操作(CRUD)

目录 连接数据库 插入数据 for循环插入数据 根据条件查询 修改数据 删除数据 连接数据库 对应路径下cmd中输入命令mongo即可 插入数据 j{name:"mongo"} t{x:3} 提交:db.things.svae(j);db.things.svae(t); 查询:db.things.find(); …

Java后端八股文之java基础

文章目录 0.Java 中有 8 种基本数据类型1. 为什么浮点数运算会丢失精度?如何解决?2. 面向对象的三大特征2.1 封装2.2 继承2.3 多态 3. 深拷贝和浅拷贝的区别?什么是引用拷贝?4. equals方法与“”方法4.1 4.2 equals方法 5.hashcod…

数据分析之一些Excel函数

数据分析之Excel的使用 SUM()求和SUMIF()单条件求和SUMIFS()多条件求和日期函数YEAR()提取年份MONTH()提取月份DAY()提取日DATE()函数 SUBTOTAL()求和IF()函数IF嵌套 VLOOKUP()搜索取值MATCH()返回行值或列值INDEX()定位取值 SUM()求和 SUM(number1,[number2],…) 对选中的区域…

00后卷王自述,我真的很卷。。。

🍅 视频学习:文末有免费的配套视频可观看 🍅 关注公众号【互联网杂货铺】,回复 1 ,免费获取软件测试全套资料,资料在手,涨薪更快 前段时间去面试了一个公司,成功拿到了offer&#xf…

什么洗地机值得推荐?旗舰洗地机希亦、追觅、西屋、海尔实际表现如何?

洗地机这个产品相信大家已经不陌生了,它集合吸尘器和电动扫地拖把的功能,轻轻推拉便可以解决地面上的赃物,且不用我们手动清洗滚刷,深得家务人的喜爱,可是,当我们真正要去选购的时候,还是很纠结…

HarmonyOS NEXT应用开发之深色模式适配

介绍 本示例介绍在开发应用以适应深色模式时,对于深色和浅色模式的适配方案,采取了多种策略如下: 固定属性适配:对于部分组件的颜色属性,如背景色或字体颜色,若保持不变,可直接设定固定色值或…

Android 11 最终 Beta 版发布,正式版即将到来!

随着 8 月的到来,Android 11 的正式版已经呼之欲出!我们正在为新平台做最后的微调。今年预览周期 的最后一次更新——Beta 3,已经正式发布。对于开发者来说,趁着正式版还没有发布到消费者手中,是时候准备好您的应用了。…

【多智能体强化学习02---训练范式+独立学习+多智能体策略梯度算法】

文章目录 多智能体强化学习训练和执行范式CTCEDTDECTDE MARL符号表示分布式学习(Independent Learning)基于值函数的分布式学习(Independent value-based learning)基于策略梯度的分布式学习(Independent policy gradient learning) 多智能体…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Web)下篇

onRequestSelected onRequestSelected(callback: () > void) 当Web组件获得焦点时触发该回调。 示例: // xxx.ets import web_webview from ohos.web.webviewEntry Component struct WebComponent {controller: web_webview.WebviewController new web_webv…

ADO .Net操作SQL Server数据库

//ADO.NET是.NET Framework提供的数据访问服务的类库,应用程序可以使用ADO.NET连接到这些数据源,并检索、处理和更新数据 //常用的数据源包括四种:(1)Microsoft SQL Server数据源:使用System.Data.SqlClien…

nginx学习记录-nginx初步配置

1. 虚拟机安装系统并配置网络 系统网上找个能用的镜像就行,我用的是阿里的镜像,地址是centos安装包下载_开源镜像站-阿里云 (aliyun.com) 以下是我本地的虚拟机配置 配置过程中按照提示操作系统即可。 安装好系统后,配置centos的ip&#x…

探索效率:解析双指针算法

简介 双指针算法是一种常见且高效的解决问题的技巧,它通常用于在数组、链表或字符串等数据结构上进行操作。这种算法的核心思想是使用两个指针来遍历数据结构,通常这两个指针具有不同的起始位置或移动速度,从而达到特定的目的。 双指针算法通…