当前位置: 首页 > 开发杂谈 >

[Day5][笔记] React Component (上)

前言

昨天我们认识了 JSX 语法,透过 JSX 语法我们可以方便地在 JavaScript 中轻松撰刻画 UI 介面。
而今天我们要来认识 React 元件,了解 React 为何要使用元件概念、以及如何实作。

备注:写了几天後,决定把每篇的内容控制在阅读时间 5~10 分钟内,一方面阅读起来更为轻松,一方面也能兼顾之後我下班後写文的品质跟效率。

那我们就开始吧!

何谓 Component ?

从字面上我们得知是 元件 的意思,而元件就是我们网页上可以被重复利用的区块。
例如下图中红色圈起来部份,像 影片区块 不仅会在首页使用、也会在节目、电影等分页上使用。我们可以注意到仅有区块内影片内容不同而已!外框、滑动 Hover 效果等等都是一样的。
截图

优点跟特色

  1. 可重复利用
  2. 每个元件职责单一,只负责一件事

所以我们才会说 React is all about Components,开发网页时我们只是在将不同元件做组合动作,端看你想要呈现什麽样的 UI 给使用者看。

范例

function Expensive() {
  const money = "10";
  const string = `${money}块钱`;
  return (
    <div>
      <h2>{money}</h2>
      <h2>{string}</h2>
      <p>{1+3}</p>
    </div>
  );
}

在这个范例中,我们可以先知道在 React 中,每个 function 其实就是个元件!

下一篇,我们会来介绍在 Component 中使用表达式、以及如何客制化撰写 Component

参考资料


相关文章:

  • [FGL] 程序开发(3) - 输入用的INPUT系指令与DIALOG
  • 出口美国要注意这七点事情
  • [Day 21] 调整模型超参数利器 - Optuna
  • Day 06 - Lenses (Basic)
  • 电子发现参考模型(Electronic Discovery Reference Model)
  • 东南亚电商市场哪个平台值得做??shopee如何及开店要什么条件?
  • [2021铁人赛 Day27] Reverse Engineering 逆向工程 01
  • Day 22:Spinner 下拉选单结合县市乡镇小工具
  • eBay增加了三种新方式,让卖家销量大增
  • 【Day 04】String Methods
  • Day 17 -资料查询语言 CASE 关键字!
  • [Day17] Cloud Run
  • Day 30:Ansible Role
  • [PoEAA] Data Source Architectural Pattern - Data Mapper
  • 杭州到俄罗斯的货运公司怎么选?
  • 2021年10个全球电子商务趋势[信息图] ,所有电商人员都该了解一下
  • HD钱包是什么?比特币钱包原理
  • 数字人民币是什么?什么是数字人民币
  • 国外VPS服务器主机为什么比较便宜?
  • Pinterest的商业指南(信息图):为什么以及如何在在Pinterest上推广你的业务
  • MovoCash虚拟信用卡教程:美国虚拟信用卡申请教程
  • 搬瓦工VPS优惠码/ 促销码 、最新BandwagonHost官网促销
  • WordPress禁用古腾堡编辑器全屏模式
  • Linux运维命令大全:Linux运维要掌握哪些命令
  • 搬瓦工VPS注册购买教程 – 支付宝BandwagonHost购买方法教程
  • Hostinger主机如何添加一个新的域名(网站),如何更改主机的主域名(Main Domain)
  • 虚拟信用卡是什么?虚拟信用卡安全吗?怎么用?怎么申请教程
  • 微信小程序搭建教程:怎么用CentOS搭建小程序服务器
  • 美国花旗银行虚拟信用卡申请教程【国内怎么申请美国信用卡】
  • 如何引导用户快速购买下单的冲动?引导用户购买行为的方法(Call To Action)