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.mzph.cn/news/742128.shtml

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

相关文章

个人博客系列-后端项目-用户注册功能(7)

介绍 用户注册API的主要流程:1.前端用户提交用户名,密码 2. 序列化器校验用户名,密码是否合法。3.存入数据库。4.签发token 创建序列化器 from rest_framework import serializers from rest_framework_simplejwt.serializers import Toke…

Map接口

Map接口 Map接口,双列集合(每个元素,包含一个键(key),一个值对象(Value),键与值之间的对应关系叫做映射),Map中每个元素的键不允许重复&#xff…

C++知识点总结(24):栈的真题

概览 P1044 ★★★☆☆ [NOIP2003 普及组] 栈1. 审题题目背景题目描述输入格式输出格式样例1 2. 思路3. 参考答案3.1 卡特兰公式3.2 前缀和 P1044 ★★★☆☆ [NOIP2003 普及组] 栈 1. 审题 题目背景 栈是计算机中经典的数据结构,简单的说,栈就是限制…

算法:数据结构顺序表表的插入、删除和查找

#include <iostream> #include <stdio.h> #define MaxSize 50 typedef int ElemType; typedef struct {ElemType data[MaxSize];int length; }SqList; bool ListInsert(SqList &L,int i,ElemType e)//插入数据 {if(i<1 || i>L.length1)//判断插入的位置是…

自动化运维利器Ansible基础(环境部署)

Ansible 介绍及安装 1. 介绍 Ansible 是⼀个 IT ⾃动化⼯具。它能配置系统、部署软件、编 排更复杂的 IT 任务&#xff0c;如连续部署或零停机时间滚动更新。 Ansible ⽤ Python 编写&#xff0c;尽管市⾯上已经有很多可供选择的 配置管理解决⽅案&#xff08;例如 Salt、Pupp…

Aigtek高压功率放大器设计参数有哪些

高压功率放大器是一种用于放大高频信号的电子设备&#xff0c;广泛应用于通信、雷达、无线电等领域。它能够将输入信号的幅度放大到较高的水平&#xff0c;以便传输或驱动其他设备。 在设计高压功率放大器时&#xff0c;需要考虑以下几个重要参数&#xff1a; 频率范围&#xf…

ELK 安装部署

文章目录 1.日志收集规划2.Elasticsearch部署2.1.Elasticsearch安装2.2.Elasticsearch-head安装2.3.Elasticsearch设置分片数2.4.elasticsearch健康检查 3.Kibana部署4.Logstash部署5.Filebeat部署 开源中间件 # Elastic Stackhttps://iothub.org.cn/docs/middleware/ https:/…

工会排队模式:引领创新消费体验的新潮流

在互联网和电子商务的浪潮下&#xff0c;消费者的购物需求与期待正在持续升级。为了迎合这一趋势&#xff0c;工会排队模式应运而生&#xff0c;以其独特的消费体验方式引领市场潮流。 工会排队模式打破了传统电商的桎梏&#xff0c;通过现金返还机制为购物赋予了新的定义。这一…

【微服务】SpringBoot整合Resilience4j使用详解

目录 一、前言 二、熔断器出现背景 2.1 几个核心概念 2.1.1 熔断 2.1.2 限流 2.1.3 降级 2.2 为什么会出现熔断器 2.3 断路器介绍 2.3.1 断路器原理 三、Resilience4j介绍 3.1 Resilience4j概述 3.1.1 Resilience4j是什么 3.1.2 Resilience4j功能特性 3.2 Resilie…

Windows系统安装OpenSSH结合VS Code远程ssh连接Ubuntu【内网穿透】

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-mEkKUraSFHLKkzIj {font-family:"trebuchet ms",verdana,arial,sans-serif;f…

使用Visual Studio创建跨平台CMake项目

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 创建跨平台项目的意义是什么&#xff1f; 跨平台CMake项目的意义在于提供一种统一的构建系统&#xff0c;使得开发者可以编写一份…

十五、软考-系统架构设计师笔记-面向服务架构设计理论与实践

1、SOA相关概念 面向服务的架构(SOA)的定义 SOA 是一个组件模型&#xff0c;它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来。接口是采用中立的方式进行定义的&#xff0c;它应该独立于实现服务的硬件平台、操作系统和编程语言。这使得构…

技术驱动校园招聘:Java+SpringBoot+Vue的实践之旅

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

【Vue3】学习命名路由和嵌套路由

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

wsl安装及Anaconda配置

文章目录 wslAnaconda下载安装包安装Anaconda配置环境写在最后 wsl 照着一步一步配置就好 wsl_update链接 Anaconda 下载安装包 找到自己所需的 在终端输入&#xff1a; wget https://repo.anaconda.com/archive/Anaconda3-2024.02-1-Linux-x86_64.sh将Anaconda3-2024.02-…

软件测试面试都问了什么?中级软件测试岗面试(4面)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 一面&#xff08;…

Pulsar消息路由深入剖析

一、概述 大数据背景下&#xff0c;分区应该是所有组件必备的基本条件&#xff0c;否则面对海量数据时无论是计算还是存储都容易遇到瓶颈。跟其他消息系统一样&#xff0c;Pulsar通过Topic将消息数据进行业务层面划分管理&#xff0c;同时也支持Topic分区&#xff0c;通过将多…

2024年信息技术与计算机工程国际学术会议(ICITCEI 2024)

2024年信息技术与计算机工程国际学术会议&#xff08;ICITCEI 2024&#xff09; 2024 International Conference on Information Technology and Computer Engineering ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 大会主题&#xff1a; 信息系统和技术…

软件应用实例分享,茶楼计时收费管理系统软件,佳易王茶社吧台计时收费软件试用版教程

软件应用实例分享&#xff0c;茶楼计时收费管理系统软件&#xff0c;佳易王茶社吧台计时收费软件试用版教程 一、前言 以下软件操作教程以 佳易王茶室计时计费软件V17.9为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 【茶楼计时计费软件&…

解决Java项目运行时错误:“Command line is too long”

在开发Java应用的过程中&#xff0c;你可能偶尔会遇到“Error running ‘Application’: Command line is too long”的问题。这是因为Java虚拟机&#xff08;JVM&#xff09;在启动时&#xff0c;如果传递给它的类路径&#xff08;classpath&#xff09;过长&#xff0c;超过了…