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>
}
相关推荐
辰风沐阳1 分钟前
JavaScript 的 WebSocket 使用指南
开发语言·javascript·websocket
逆光如雪6 分钟前
控制台快速查看自己的log,提高开发效率
前端
用户47949283569157 分钟前
年薪百万的 React 功底怎么“装进”AI?Vercel 的这个 Skill 给了标准答案
前端·aigc·ai编程
jason_yang7 分钟前
这5年在掘金的感想
前端·javascript·vue.js
一人の梅雨8 分钟前
亚马逊SP-API商品评论接口实战:情感分析+商业洞察挖掘的差异化方案
运维·前端·数据库
掘金一周10 分钟前
Dart 官方再解释为什么放弃了宏编程,并转向优化 build_runner ?| 掘金一周 1.15
前端
魔术师卡颂23 分钟前
提问量暴跌 80% ,Stack Overflow 却赚翻了?
前端·后端·ai编程
rocky19124 分钟前
什么,你还没用 claude,out 了吧!
前端·程序员
冰暮流星29 分钟前
javascript如何转换为字符串与布尔型
java·开发语言·javascript
2501_9481226338 分钟前
React Native for OpenHarmony 实战:Steam 资讯 App 个人中心页面
javascript·react native·react.js·游戏·ecmascript·harmonyos