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>
}
相关推荐
小小小小宇4 分钟前
React useMemo 深度源码解析
前端
tiany5245 分钟前
养虾记录-如何配置多agent和多个飞书机器人独立对话
java·前端·飞书
踩着两条虫9 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(十四):扩展与定制之插件系统开发指南
前端·vue.js·ai编程
我命由我1234511 分钟前
Element Plus - 在 el-select 的每个选项右侧添加按钮
前端·javascript·vue.js·前端框架·ecmascript·html5·js
别看我只是一直狼14 分钟前
🚀 程序员高效 Prompt 实战速查手册
前端·后端
前端付豪14 分钟前
AI Math Tutor v3:题目知识点自动分类
前端·python·llm
weixin1997010801616 分钟前
衣联网商品详情页前端性能优化实战
前端·性能优化
技术钻石流19 分钟前
面向“传统程序员”的端到端 10x Vibe Coding 指南(大型需求) - 从面向业务开发转向面向“Agent 员工”开发
前端·后端·ai编程
codingWhat19 分钟前
Electron 入门实战:用一个加法计算器吃透 Electron 核心概念
前端·javascript·electron
Easonmax22 分钟前
ReactNative for OpenHarmony项目鸿蒙化三方库:react-native-pager-view — 流畅的页面滑动体验
react native·react.js·harmonyos