React第一个项目

运行效果:

知识讲解:

组件:先定义后使用,用户界面的构成要素(标签、css和JavaScript)

定义组件

导出组件:export default 前缀是JavaScript标准语法

定义函数:function Title() {} 定义为Title的JavaScript函数,注意:函数名一定要大写字母开头和HTML标签做个区别

添加标签:return语句可以一行显示,若多行显示需要一对括号包裹()

使用组件:

在导出函数中return中使用即可

App.js 代码:

javascript 复制代码
// 在下面写你的组件
function Title(){
  return (
    <div>
      <span>你好!!</span>
      <br/>
      <span>我好!!!</span>
    </div>
  )  //组件返回标签的JavaScript语法被称 JSX
}

export default function MyBotton(){
  return <Title></Title>
}
相关推荐
無名路人几秒前
用 codex AI 更新了下之前写的浏览器云书签标签页扩展
前端·openai·ai编程
月弦笙音6 分钟前
【pnpm 】pnpm 执行 xxx 的 底层原理
前端
玄空z15 分钟前
通俗理解 RAG 与微调:给大模型“翻书”还是“洗脑”
javascript
Devin_chen26 分钟前
单例模式渐进式学习指南
前端·javascript
苏西的网络日志39 分钟前
基于 Element Plus 的企业级主题定制方案:SCSS 变量覆盖 + Vite 全局注入实战
前端
吴声子夜歌42 分钟前
Vue3——计算属性和监听属性
前端·vue.js
苏西的网络日志44 分钟前
小程序 web-view 内嵌 H5 的会话管理:Token 失效跳转登录的完整方案
前端
小满zs1 小时前
Next.js精通SEO第一章(引言)
前端·seo·next.js
Joyee6911 小时前
RN 的新模块系统 Turbo module
前端·react native
阿民_armin1 小时前
使用 IntersectionObserver + 哨兵元素实现长列表懒加载
前端·javascript·vue.js