React 学习之旅一

2023-10-27

React 学习之旅一

React 官网

  1. 版本要求

Node >= 8.10 和 npm >= 5.6

	node -v 
	npm -v
  1. 创建 React 项目
	npx create-react-app my-app
  1. Hook
    1. 它可以让你在不编写 Class 的情况下使用 state 以及 React 其他的特性。
    2. 版本要求
      1. React版本大于等于 v16.8.0 / React Nativev0.59开始支持
    3. 安装校验插件 eslint-plugin-react-hooks
      1. npm install eslint-plugin-react-hooks --save-dev
      2. 或者 yarn add eslint-plugin-react-hooks --dev
      3. 配置如下
// package.json 文件下
 "eslintConfig": {
   "extends": "react-app",
   "plugins": [
     "react-hooks"
   ],
   "rules": {
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn"
   }
 },

  1. CSS 样式(使用styled-components
    1. yarn add styled-components
    2. styled-components 官网
  2. 路径配置
    • 配置绝对路径(在根目录下新增jsconfig.json文件)
    • 配置如下编码
      在这里插入图片描述
// jsconfig.json
{
 "compilerOptions": {
   "baseUrl": "."
 },
 "include": [
   "src"
 ]
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React 学习之旅一 的相关文章

  • 如何在CKEditor 5中监听焦点事件

    我想听一下 CKEditor 5 中的焦点事件 我认为这样的事情会起作用 但回调从未被调用 document querySelector editable ClassicEditor create el then editor gt edi
  • ExtJS 4:克隆商店

    我正在尝试找出如何克隆Ext data Store不保留旧的参考 让我用一些代码更好地解释一下 这是源商店 var source Ext create Ext data Store fields name age data name foo
  • 从 DOM 中删除后,动态添加的 JavaScript 脚本会继续执行

    因此 我正在创建一个 SPA 并使用 AJAX 将 HTML 页面加载到我网站的索引页面中 问题是 当包含我的一个页面时 它似乎会徘 徊并执行其中的 JavaScript 代码 即使它随后从 DOM 中删除 索引 html 正文 div d
  • ref scrollIntoView 不适用于反应上的平滑行为

    我正在创建一个组件 该组件将保存动态元素列表 出于样式原因 我需要将每个部分的标题保留在粘性导航菜单中 当用户上下滚动部分列表时 我需要应用样式规则 并将菜单导航中的同一部分带入视图 因此我尝试将scrollIntoView与菜单部分引用一
  • 区分单击与 mousedown/mouseup

    我已经阅读了有关这种情况的 stackoverflow 上的几个答案 但没有一个解决方案有效 我尝试根据用户是否单击某个元素或使用 jQuery 将鼠标按住该元素来执行不同的操作 有可能做到这一点吗 onMouseDown 将在按下左侧或右
  • Chrome 扩展程序中的后台脚本到底何时运行?

    在我的 chrome 扩展中 我有一个后台脚本 它将使用XMLHttpRequest note that this code is in the global scope i e outside of any function also n
  • 为什么“dtoa.c”包含这么多代码?

    我将是第一个承认我对低级编程的整体知识有点稀疏的人 我理解许多核心概念 但我不经常使用它们 话虽这么说 我对需要多少代码感到非常惊讶dtoa c http www netlib org fp dtoa c 在过去的几个月里 我一直致力于用
  • WebDriver:更改事件未触发

    我有一个使用 KnockoutJS 的应用程序 我正在尝试编写一些测试表单的测试 如果您不了解 KnockoutJS 简单来说 它提供了从我的视图到我的数据模型的绑定 这意味着当我在输入字段中键入值时 我的基础对象会自动使用该输入字段值进行
  • React:React 如何确保在浏览器有机会绘制之后调用 useEffect?

    useLayoutEffect 的文档说 useLayoutEffect 内计划的更新将被刷新 在浏览器有机会绘制之前同步进行 useEffect 的文档说 与 componentDidMount 和 componentDidUpdate
  • django ajax post 403被禁止

    使用 django 1 4 当我尝试从我的 javascript 做我的 django 服务器上的帖子时 我收到 403 错误 我的 get 工作正常 尽管问题仅出在帖子上 也尝试过 csrf exempt但没有运气 更新 我现在可以发布我
  • 对数字和字母元素的数组进行排序(自然排序)

    假设我有一个数组 var arr 1 5 ahsldk 10 55 3 2 7 8 1 2 75 abc huds 我尝试对其进行排序 我得到了类似的东西 1 1 10 2 2 3 5 55 7 75 8 abc ahsldk huds 注
  • Web浏览器控件:如何捕获文档事件?

    我正在使用 WPF 的 WebBrowser 控件加载一个简单的网页 在这个页面上我有一个锚点或一个按钮 我想在我的应用程序后面的代码中 即在 C 中 捕获该按钮的单击事件 WebBrowser 控件是否有办法捕获加载页面元素上的单击事件
  • 如何为 ng-repeat orderBy 创建回调?

    寻找一种方法让 AngularJS 的 ng repeat orderBy 过滤器在完成渲染后执行回调 Markup div table thead tr th Name th th Age th tr thead tbody tr tr
  • Google 地图 v3 中标准缩放控件的样式

    有没有一种简单的方法可以在 Google Maps JavaScript API v3 中设置缩放控件的样式 我想要的只是改变标准图像 http maps gstatic com intl en ALL mapfiles mapcontro
  • 在 中动态添加链接样式表 [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 如何将链接
  • nvd3.js - 无法更改折线图中线条的颜色

    我正在尝试更改 nvd3 折线图不同线条的颜色here http nvd3 org livecode index html codemirrorNav但我无法理解该怎么做 我想将示例中的 2 条线的颜色更改为绿色和青色 我试过 nv add
  • 盒式捆绑包与 MVC4 捆绑包

    我目前正在开发一个原型 ASP NET MVC 3 解决方案 该解决方案将用作多个项目重写的基础 来自 Web 表单 我的目标之一是跨应用程序实现一些脚本管理 而不是我们目前没有的目标 MVC 3有一个缺陷恕我直言 如果您需要在部分视图或模
  • 使用 JavaScript 从 URL 变量读取来加载不同的 CSS 样式表

    我试图在我的 WordPress 博客上使用两个不同的样式表 以便在通过 Web 访问页面时使用一个样式表 而在通过我们的 iOS 应用程序访问博客内容时使用另一个样式表 现在 我们将 app true 附加到来自 iOS 应用程序的 UR
  • Chrome Prerender 功能每次都会被取消

    我正在尝试 Chrome 中的预渲染功能 但是当我检查网络时 我可以看到任何链接的请求都被取消 我使用以下语法 我尝试了现场演示http prerender test appspot com http prerender test apps
  • html5 canvas 使用图像作为蒙版

    是否可以使用具有形状的图像作为整个画布或画布内图像的蒙版 我想将图像放置在画布中 并在图像上添加蒙版 然后将其另存为新图像 您可以使用 source in globalCompositeOperation 将黑白图像用作蒙版 首先 将蒙版图

随机推荐

  • 银联支付、支付宝支付和微信支付有什么优势?

    不可否认 移动支付如今已经渗透到人们日常生活的方方面面 因此 如何在抓住机会 获取更多用户 中国银联 支付宝 微信支付三国鼎立时代 三者分别有怎样的优势 一 中国银联 银联是以银行卡为依托的 银联的历史较为悠久 由于四方卡组织模式 银联其实
  • PyTorch深度学习实战——使用卷积神经网络执行图像分类

    PyTorch深度学习实战 使用卷积神经网络执行图像分类 0 前言 1 Fashion MNIST 数据集图像分类 2 模型测试 相关链接 0 前言 我们已经在 卷积神经网络详解 一节中介绍了传统神经网络在面对图像平移时的问题以及卷积神经网
  • 【2024届计算机+大数据+人工智能专业毕设选题专栏讲解答疑,旨在辅助同学们顺利选题】

    http 2024届计算机 大数据 人工智能专业毕设选题专栏讲解答疑 旨在辅助同学们顺利选题 https www bilibili com video BV1H14y1k7fu share source copy web vd source
  • Vue导出JSON文件,读取本地上传JSON文件

    导出JSON文件 插件安装 import FileSaver from file saver 导出代码 const data JSON stringify 存放JS数组或者对象 const blob new Blob data type a
  • 详解VSCode中C++工程配置

    安装MinGW w64及环境变量配置 下载MinGW w64 可以通过官网直接进行下载在线安装包 然后在本地进行安装即可 但是基本都会由于网络超时等各种原因终止 因此这里建议直接下载 MinGW w64 库解压 然后在系统中指定环境变量即可
  • Verilog中条件编译的使用(`ifdef-`elsif-`else-`endif)

    Verilog中条件编译的使用 ifdef elsif else endif 目录 Verilog中条件编译的使用 ifdef elsif else endif 一 概念 二 格式 2 1条件编译格式 2 2条件语句 三 应用示例 3 1顶
  • 【DevOps核心理念基础】2. 敏捷开发与DevOps关系

    一 什么是敏捷开发 1 1 敏捷开发的核心模型 二 敏捷开发的要点 2 1 敏捷开发 gt 执行细节 2 2 敏捷开发 gt 思路的转变 客户需求 提升出行速度 三 敏捷开发 与 DevOps 四 DevOps 实践的度量标准 4 1 怎样
  • A Survey on Model Compression for Large Language Models

    本文是LLM系列文章 关于模型压缩相关综述 针对 A Survey on Model Compression for Large Language Models 的翻译 大模型的模型压缩综述 摘要 1 引言 2 方法 3 度量和基准 3 1
  • 【MySQL】唯一性约束【UNIQUE】从基础到就业

    唯一约束 unique 用来限制某个字段 某列的值不能重复 唯一约束允许出现 多个空值 同一个表可以有多个唯一约束 唯一约束可以是某一个列的值唯一 也可以多个列组合的值唯一 唯一性约束允许列值为空 在创建唯一约束的时候 如果不给唯一约束命名
  • C#异步通信概念及应用浅析

    转自夜里煞白http developer 51cto com art 200908 145381 htm C 异步通信概念及应用浅析 2009 08 20 18 47 夜里煞白 百度空间 字号 T T C 异步通信概念及应用主要向你介绍了C
  • 腾讯推出混元大模型,已接入微信搜一搜、腾讯会议等 50 多个业务及产品

    作者 宛辰编辑 郑玄 腾讯补上了大模型布局中最重要的一块拼图 9 月 7 日 在 2023 腾讯全球数字生态大会上 腾讯混元大模型正式亮相 并宣布通过腾讯云对外开放 腾讯介绍 混元大模型是由腾讯全链路自研的通用大语言模型 具备强大的中文创作
  • STM32输入捕获可用于编码器测速

    STM32输入捕获 前言 一 输入捕获功能框图 输入捕获应用 输入捕获测电平持续的时间 二 例程代码 关键功能函数说明 前言 本篇目的是解释编码器测速的输入捕获概念 即本人的这篇文章 基于树莓派ROSstm32搭载Freertos智能平衡车
  • 输入框失去焦点时,小数点前面不能以0开头及保留3位小数

    text box blur function obj this val parseFloat this val if this val length this val indexOf 1 gt 3 this val parseFloat t
  • Jenkins API 开发实战

    一 Jenkins扩展 1 共享库简介 共享库由名称 源代码检索方法 如 SCM 和可选的默认版本定义 该名称应该是一个简短的标识符 因为它将在脚本中使用 该版本可以是该 SCM 可以理解的任何内容 例如 分支 标签和提交哈希都适用于 Gi
  • 若依RuoYi-Vue隐藏首页页面

    需要修改两个地方 分别是 路由菜单 注释掉首页菜单 除了首页之外的菜单都是动态获取的 首页是写死的 所以注释掉首页菜单就不会在左边的菜单列表看到首页了 登录按钮的位置 修改路由跳转链接 具体修改如下 1 注释首页菜单 文件位置在 src r
  • C++中的仿函数functor

    引子 先考虑一个简单的例子 假设有一个vector
  • zabbix安装与使用

    安装包地址 https jaist dl sourceforge net project zabbix ZABBIX 20Latest 20Development 4 2 0alpha3 zabbix 4 2 0alpha3 tar gz
  • 区块链开发初学者编程入门指南

    我有很多问题需要了解区块链Blockchain的工作原理 重要的是 我如何在其上构建应用程序dapp 花了几个星期的时间挖掘 阅读和试验才最终了解 我找不到简短而全面的指南 现在 我有一些不错的理解 我想写一个可以帮助别人的 这是一个快速指
  • 计算机网络毕业论文ensp,eNSP实验(一)简单组网实验

    一 前言 计算机网络在很久之前学习过 最近突然对网络安全领域比较感兴趣 所以通过实验的形式重新温习一下计算机网络的相关知识 eNSP实验系列借助华为eNSP软件完成相关实验的组网设计 实验所需的工具包括eNSP软件 Wireshark抓包工
  • React 学习之旅一

    React 学习之旅一 React 官网 版本要求 Node gt 8 10 和 npm gt 5 6 node v npm v 创建 React 项目 npx create react app my app Hook 它可以让你在不编写