安装React开发者工具

我们在说组件之前,需要先安装一下React官方推出的开发者工具,首先我们分享在线安装方式

首先打开谷歌网上应用商店(针对谷歌浏览器),在输入框内搜索react,安装如下插件:

注意安装提供方为Facebook的插件,这是官方出品,非常好用

但是想要打开谷歌网上应用商店,除非你身处国外。所以我们接下来分享离线安装方式

首先打开极简插件,选择搜索:

然后我们搜索react,点开后选择推荐下载:

然后解压文件,打开,选择后缀名为.crx的文件。再回到谷歌浏览器,点击右上角三个点,选择扩展程序,管理扩展程序,把开发者模式打开:

将.crx的文件拖拽到浏览器也页面上,松开鼠标进行安装

安装成功后可以找一个用React写的网站,例如JetBrains官网

我们打开开发者工具,发现多了两个选项:

我们暂时还用不上Profiler选项,我们打开Components选项:

我们发现有许多组件,组件的定义我们下篇文章再说

我们也可以点击右上角扩展程序图标,把他钉在这:

如果是该网页使用了React且已经上线,则图标是这样:

若没上线则是这样:

看起来挺诡异的,还有一条小虫子一样的东西在上面

若没有使用React就是灰色的:

我们把开发者工具搞好了之后就要开始正式学习React了!

再见!

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

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

相关文章

排列与二进制

#include<iostream> using namespace std; int count_two(int n,int m){int count0;for(int i0;i<m;i){ //统计2的因子个数 int numn-i;while(num%20){count;num /2;}}return count; } int main(){int n,m;while(1){cin >> n >> m;if(n0 && m0)br…

鱼书--学习2

6. 与学习相关的技巧 6.1 参数的更新 &#xff08;1&#xff09; SGD的缺点&#xff1a;SGD低效的根本原因是&#xff0c;梯度的方向并没有指向最小值的方向 基于SGD的最优化的更新路径&#xff1a;呈“之”字形朝最小值(0, 0)移动&#xff0c;效率低 &#xff08;2&#x…

基于SSM框架的汽车租赁平台(源码+lw+部署文档+讲解),源码可白嫖!

摘要 时代在飞速进步&#xff0c;每个行业都在努力发展现在先进技术&#xff0c;通过这些先进的技术来提高自己的水平和优势&#xff0c;汽车租赁平台当然不能排除在外。汽车租赁平台是在实际应用和软件工程的开发原理之上&#xff0c;运用Java语言以及SSM框架进行开发&#x…

LangChain Chat Model学习笔记

Prompt templates: Few shot、Example selector 一、Few shot(少量示例) 创建少量示例的格式化程序 创建一个简单的提示模板&#xff0c;用于在生成时向模型提供示例输入和输出。向LLM提供少量这样的示例被称为少量示例&#xff0c;这是一种简单但强大的指导生成的方式&…

新配置了一台服务器+域名共178:整个安装步骤,恢复服务

买了一台服务器域名eesou.com&#xff1a; 服务器选的是99元最低配的&#xff0c;用免费的镜像&#xff1a;宝塔面板 eesou.com是一口价买的 79&#xff0c;原来wjsou.com卖了。 原来的配置全丢了。开始重新安装步骤。 域名备案才能用&#xff0c;提交就等着了 服务器配置 …

Netty——BIO、NIO 与 Netty

文章目录 1. 介绍1.1 BIO1.1.1 概念1.1.2 工作原理1.1.3 优缺点 1.2 NIO1.2.1 概念1.2.2 工作原理1.2.3 优缺点 1.3 Netty1.3.1 概念1.3.2 工作原理1.3.3 优点 2. Netty 与 Java NIO 的区别2.1 抽象层次2.2 API 易用性2.3 性能优化2.4 功能扩展性2.5 线程模型2.6 适用场景 3. 总…

我的uniapp自定义模板

uniapp自定义模板 如有纰漏请谅解&#xff0c;以官方文档为准后面这段时间我会学习小程序开发的知识&#xff0c;会持续更新可以查看我的github&#xff0c;后续我会上传我的uniapp相关练习代码有兴趣的话可以浏览我的个人网站&#xff0c;我会在上面持续更新内容&#xff0c;…

Wispr Flow,AI语言转文字工具

Wispr Flow是什么 Wispr Flow 是AI语音转文本工具&#xff0c;基于先进的AI技术&#xff0c;帮助用户在任何应用程序中实现快速语音转文字。 Wispr Flow支持100多种语言&#xff0c;具备自动编辑、上下文感知和低音量识别等功能&#xff0c;大幅提升写作和沟通效率。Wispr Fl…

美国国家数据浮标中心(NDBC)

No.大剑师精品GIS教程推荐0地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】 1Openlayers 【入门教程】 - 【源代码示例 300】 2Leaflet 【入门教程】 - 【源代码图文示例 150】 3MapboxGL【入门教程】 - 【源代码图文示例150】 4Cesium 【入门教程】…

浔川社团官方联合会维权成功

在2025.3.2日&#xff0c;我社团检测文章侵权中&#xff0c;检测出3篇文章疑似遭侵权&#xff0c;随后&#xff0c;总社团联合会立即联系CSDN版权&#xff0c;经过17天的维权&#xff0c;至今日晚&#xff0c;我社团维权成功&#xff01;侵权文章全部被设置为转载。 在此&…

linux中如何修改文件的权限和拥有者所属组

目录标题 chmod指令八进制形式权限修改文件拥有者所属组的修改umask有关内容 chmod指令 chmod指令可以用来修改人员的权限其形式如下&#xff1a; u代表的是拥有者&#xff0c;g代表的是所属组&#xff0c;o代表的是其他人&#xff0c;a表示所有人&#xff0c;如果你想增加权…

SmolVLM2: 让视频理解能力触手可及

一句话总结: SmolVLM 现已具备更强的视觉理解能力&#x1f4fa; SmolVLM2 标志着视频理解技术的根本性转变——从依赖海量计算资源的巨型模型&#xff0c;转向可在任何设备运行的轻量级模型。我们的目标很简单: 让视频理解技术从手机到服务器都能轻松部署。 我们同步发布三种规…

人工智能将使勒索软件更加危险

Ivanti 预测&#xff0c;勒索软件将成为 2025 年的最大威胁&#xff0c;这一点尤其令人担忧&#xff0c;因为 38% 的安全专家表示&#xff0c;在人工智能的帮助下&#xff0c;勒索软件将变得更加危险。 与威胁级别相比&#xff0c;只有 29% 的安全专家表示他们对勒索软件攻击做…

UE AI 模型自动生成导入场景中

打开小马的weix 关注下 搜索“技术链” 回复《《动画》》 快速推送&#xff1b; 拿到就能用轻松解决&#xff01;帮忙点个关注吧&#xff01;

Debain-12.9使用vllm部署内嵌模型/embedding

Debain-12.9使用vllm部署内嵌模型/embedding 基础环境准备下载模型部署模型注册dify模型 基础环境准备 基础环境安装 下载模型 modelscope download --model BAAI/bge-m3 --local_dir BAAI/bge-m3部署模型 vllm serve ~/ollama/BAAI/bge-m3 --served-model-name bge-m3 --t…

电子学会—2023年12月青少年软件编程(图形化)三级等级考试真题——打砖块游戏

完整题目可查看&#xff0c;支持在线编程&#xff1a; 打砖块游戏_scratch_少儿编程题库学习中心-嗨信奥https://www.hixinao.com/tiku/scratch/show-5112.html?_shareid3 程序演示可查看&#xff0c;支持获取源码&#xff1a; 打砖块游戏-scratch作品-少儿编程题库学习中心…

【Attention】SKAttention

SKAttention选择核注意力 标题&#xff1a;SKAttention 期刊&#xff1a;IEEE2019 代码&#xff1a; https://github.com/implus/SKNet 简介&#xff1a; 动机:增大感受野来提升性能、多尺度信息聚合方式解决的问题&#xff1a;自适应调整感受野大小创新性:提出选择性内核…

OceanBase 社区年度之星专访:社区“老炮”代晓磊与数据库的故事

2024年年底&#xff0c;OceanBase 社区颁发了“年度之星”奖项&#xff0c;以奖励过去一年中对社区发展做出卓越贡献的个人。今天&#xff0c;我们有幸邀请到“年度之星”得主 —— 知乎的代晓磊老师&#xff0c;并对他进行了专访。 代晓磊老师深耕数据库运维与开发领域超过14…

Androidstudio实现引导页文字动画

文章目录 1. 功能需求2. 代码实现过程1. 编写布局文件2. 实现引导页GuideActivity 3. 总结4. 效果演示5. 关于作者其它项目视频教程介绍 1. 功能需求 1、引导页具有两行文字&#xff08;“疫情在前”和“共克时艰”&#xff09;&#xff0c;和向上的 图标。 2、进入【引导页】…

【大模型理论篇】CogVLM:多模态预训练语言模型

1. 模型背景 前两天我们在《Skywork R1V: Pioneering Multimodal Reasoning with Chain-of-Thought》中介绍了将ViT与推理模型结合构造多模态推理模型的案例&#xff0c;其中提到了VLM的应用。追溯起来就是两篇前期工作&#xff1a;Vision LLM以及CogVLM。 今天准备回顾一下Cog…