首页 > 其他分享 >React笔记(一)

React笔记(一)

时间:2024-04-13 17:44:36浏览次数:27  
标签:文件 标签 笔记 js React 存放 组件 JSX

基础型

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
  )
}
默认	
export default function Button() {}	
import Button from './Button.js';
具名	
export function Button() {}	
import { Button } from './Button.js';

react项目基本结构

src文件

components,存放可复用的React组件,每个组件通常包含一个单独的文件夹,其中包含组件的JSX文件、样式文件和可能的
测试文件。
containers,存放容器组件,这些组件负责管理数据和状态,并将它们传递给展示组件。
assets,存放项目所需的静态资源,如图片、字体文件等。
styles,存放全局样式文件或者样式变量文件。
utils,存放项目所需的工具函数或者帮助类。
services,存放与后端交互的服务文件。
routes,存放路由配量文件,用于管理页面之间的跳转关系。
App.js,项目的主组件,通常包含路由配置和全局状态管理的Provider。
index. js,项目的入口文件,通常用于渲染根组件并挂载到DOM上。

其他

public目录,这是存放静态资源的目录,如HTML文件、favicon. ico等。
config目录,存放项目的配置文件,如webpack配置、eslint配置 等。
tests目录,存放项目的测试文件。
node_ modules目录, 存放项目依赖的第三方模块。

JSX: 将标签引入 JavaScript

将一个按钮的渲染逻辑和标签放在一起可以确保它们在每次编辑时都能保持互相同步。反之,彼此无关的细节是互相隔离的,例如按钮的标签和侧边栏的标签。这样我们在修改其中任意一个组件时会更安全。
JSX 规则:只能返回一个根元素 
如果你不想在标签中增加一个额外的 <div>,可以用 <> 和 </> 元素来代替:

由于渲染逻辑和标签是紧密相关的,所以 React 将它们存放在一个组件中。
JSX 类似 HTML,不过有一些区别。如果需要的话可以使用 转化器 将 HTML 转化为 JSX。
错误提示通常会指引你将标签修改为正确的格式。

在 JSX 中通过大括号使用 JavaScript

想要动态地指定 src 或 alt 的值呢?你可以 用 { 和 } 替代 " 和 " 以使用 JavaScript 变量

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

在 JSX 中,只能在以下两种场景中使用大括号:

用作 JSX 标签内的文本:
<h1>{name}'s To Do List</h1> 是有效的,但是 
<{tag}>Gregorio Y. Zara's To Do List</{tag}> 无效。
用作紧跟在 = 符号后的 属性:
src={avatar} 
会读取 avatar 变量,但是 
src="{avatar}" 
只会传一个字符串 {avatar}。

注意项

  1. React 组件是常规的 JavaScript 函数,但 组件的名称必须以大写字母开头,否则它们将无法运行!
  2. 组件可以渲染其他组件,但是 请不要嵌套他们的定义:
export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}
  1. 无论是 './Gallery.js' 还是 './Gallery',在 React 里都能正常使用,只是前者更符合 原生 ES 模块。
  2. 因为react其实是通过js的reader函数渲染的页面,所以直接写src=“路径”是无法引入图片
我们可以像引入模块一样引入图片
1
import img from './../../../../asset/img/user.png'
需要用下面的方式引入
1
<img src={require('../images/picture.png')} alt="标签"/>

标签:文件,标签,笔记,js,React,存放,组件,JSX
From: https://www.cnblogs.com/cth0/p/18132861

相关文章

  • React状态与引用(Refs)- 差异和使用场景
    在本文中,我们将深入比较React的state和refs,探讨它们在特定场景下的适用性。当需要在React应用程序中存储数据时,首先要考虑的问题是:“数据是否在组件的生命周期内的某个时刻发生变化?”如果不会,那么普通的const变量非常适合。然而,如果数据会发生变化,那么就需要使用useState和useR......
  • 苍穹外卖学习笔记——第五天
    店铺营业状态设置Redis入门Redis简介Redis是一个基于内存的key-value结构数据库。Redis的特点基于内存存储,读写性能高。适合存储热点数据(热点商品、资讯、新闻)。企业应用广泛。Redis的网站官网:https://redis.io中文网:https://www.redis.net.cn/Redis的下载与安装......
  • FFmpeg开发笔记(十三)Windows环境给FFmpeg集成libopus和libvpx
    ​MP4是最常见的视频封装格式,在《FFmpeg开发实战:从零基础到短视频上线》一书的“1.2.3 自行编译与安装FFmpeg”介绍了如何给FFmpeg集成x264和x265两个库,从而支持H.264和H.265两种标准的编解码。视频的封装格式除了悠久的MP4和ASF之外,还有较新的WebM格式,该格式的音频编码主要采......
  • FFT 与 NTT 学习笔记
    【概念】点值:给定多项式\(f(x)=a_0+a_1x+\cdots+a_{n-1}x^{n-1}\)和\(x_1\simx_m\),求\(f(x_1),f(x_2),\dots,f(x_m)\)。(\(m=n\))求点值的算法一般是\(O(n^2)\)的,但对于特殊的多项式,可以做到更快。插值:给定\((x_0,y_0),(x_1,y_1),\dots,(x_{n-1},y_{n-1})\),其中\(x_0\s......
  • 杜教筛学习笔记
    杜教筛学习笔记杜教筛被用于求解某一数论函数\(f\)的前缀和,即对于形如\(S(n)=\sum_{i=1}^nf(i)\)形式的函数\(S\),杜教筛能够在小于线性复杂度的复杂度内求解。算法思想尝试构造一个函数\(S\)的递推式。选择一个数论函数\(g\),那么根据狄利克雷卷积可以得到:\[\begin{ali......
  • 读所罗门的密码笔记18_大宪章
    1. 大宪章1.1. 1215年会议开启了一个艰难的谈判过程,充满了紧张和对权力与道德权威的争夺1.1.1. 这部宪章会赋予各方一系列的权力,对国王的自由裁量权进行制衡1.2. 《大宪章》还需要300多年的时间和多次迭代,才能成为财产权、公平税收、司法程序和政府最高法律的参考文件1.3......
  • SeleniumBase 制作WEB用户使用导览,并导出 JS-使用笔记(三)
    自动化福音(爬虫、办公、测试等)SeleniumBase使用笔记(三)SeleniumBase制作WEB用户使用导览,并导出JSSeleniumBase包含强大的JS代码生成器,用于将Python转换为JavaScript,而制作用户导览,就是其中的应用之一,用户导览能将SaaS产品采用率提高10倍或更多目录创建导览......
  • 2023 国庆 清北学堂笔记
    2023国庆QBXT未完结,勿喷Day0被GSS6卡了一整天/kkDay1挂大分膜你赛125pts原因是T1100pts->50pts被卡常力啊啊啊啊其实也不是被卡常了我写的\(\mathcal{O(n^3\logn)}\)然而标算\(\mathcal{O(n^3)}\)但有人\(\mathcal{O(n^4)}\)也过去......
  • 2023 暑假 正睿笔记
    Day1"基础"数据结构并查集每次合并集合,就在两个点之间连上边,询问就是看两个点是否在同一连通块但是朴素的并查集复杂度没有保证所以考虑优化路径压缩改变树的结构不会改变它的连通性我们考虑为什么我们之前复杂度会退化很重要一个原因就是有可能路径太长所以我们把......
  • 筛法学习笔记
    埃氏筛枚举质数\(p_i\),每次去除所有是\(p_i\)倍数的数,总效率大概是\(O(n\log\logn)\)。int_prm=0,prm[M];boolisprm[M];voidGet_phi(intn){ for(inti=2;i<=n;i++){ if(isprm[i])continue; prm[++_prm]=i; for(intj=i*i;j<=n;j+=i)isprm[j]=1; }}值......