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…

解决使用torch.cuda.empty_cache()仍然GPU显存无法释放的问题

在开发的过程中,程序已经关闭,但是GPU显存无法释放,在使用pytorch写程序的时候, 有时候会在控制台终止掉正在运行的程序,但是有时候程序已经结束了,nvidia-smi也看到没有程序了,但是GPU的内存并没有释放&a…

记录一次大厂面试题

回流和重绘 浏览器渲染页面步骤: 处理HTML标记并构建DOM树处理css标记并构建CSSOM树将DOM和CSSOM合并成一个渲染树根据渲染树来布局以计算每个节点的几何信息将各个节点绘制到屏幕上 回流:当Render树中部分或全部元素的尺寸、布局、隐藏等改变&#xf…

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…

代码随想录 二叉树—二叉树的层序遍历Ⅱ

思路&#xff1a;就是在上一个题的基础上将result最后翻转了一下&#xff0c;这样就可以实现自下而上的层序遍历。 知识点&#xff1a;stack和queue&#xff0c;也就是栈和队列&#xff0c;是push&#xff1b; 栈stack&#xff1a;push()&#xff0c;pop()&#xff0c;top()&a…

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;通过现金返还机制为购物赋予了新的定义。这一…

vue中表单数据规则验证

1、使用:rules属性&#xff0c;如后h5代码 <template> <div class"dialog-box"> <el-scrollbar> <el-form ref"service" :model"serviceForm" :rules"rules" label-width"100px" > <el-row styl…

【微服务】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…

nacos配置更新错误并不会导致已经启动的服务宕机

nacos配置更新错误并不会导致已经启动的服务宕机 但是可能会导致异常

QML GridView 网格视图

作者: 一去、二三里 个人微信号: iwaleon 微信公众号: 高效程序员 和 ListView 一样,GridView 也是基于 Flickable 的视图组件,它们的用法非常相似。不同的是,ListView 中的元素被存储在线性链表中,并以单列(或单行)的形式进行展示的,因此适用于垂直(或水平)列表的…

生成哈夫曼树(100%用例)C卷(JavaPythonC++Node.jsC语言)

给定长度为n的无序的数字数组,每个数字代表二叉树的叶子节点的权值,数字数组的值均大于等于1。请完成一个函数,根据输入的数字数组,生成哈夫曼树,并将哈夫曼树按照中序遍历输出。 为了保证输出的二又树中序遍历结果统一,增加以下限制:二叉树节点中,左节点权值小于等于右…

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

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

第十三届蓝桥杯省赛C++ C组《全题目+题解》

填空题一般都是找规律题目&#xff0c;耐下心来慢慢分析即可。 第一题《排列字母》 【问题描述】 小蓝要把一个字符串中的字母按其在字母表中的顺序排列。 例如&#xff0c;LANQIAO 排列后为AAILNOQ。 又如&#xff0c;GOODGOODSTUDYDAYDAYUP 排列后为AADDDDDGGOOOOPSTUUYYY。…

CommandInvokationFailure: Failed to update Android SDK package list. 报错的解决方法

将Unity升级到2021.3.36f1&#xff0c; 再次打开项目&#xff0c;结果出现“CommandInvokationFailure: Failed to update Android SDK package list. ”这样的警告&#xff0c;查看SDK版本最高只有到30&#xff0c;这应该就是Unity自动升级SDK的时候出现了错误&#xff0c;导致…