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>
}
相关推荐
We་ct19 分钟前
LeetCode 148. 排序链表:归并排序详解
前端·数据结构·算法·leetcode·链表·typescript·排序算法
TON_G-T32 分钟前
day.js和 Moment.js
开发语言·javascript·ecmascript
IT_陈寒38 分钟前
JavaScript开发者必看:5个让你的代码性能翻倍的隐藏技巧
前端·人工智能·后端
Irene199144 分钟前
JavaScript 中 this 指向总结和箭头函数的作用域说明(附:call / apply / bind 对比总结)
javascript·this·箭头函数
2501_921930831 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-appearance(更推荐自带的Appearance)
javascript·react native·react.js
还是大剑师兰特1 小时前
Vue3 中 computed(计算属性)完整使用指南
前端·javascript·vue.js
井川不擦1 小时前
前端安全通信方案:RSA + AES 混合加密
前端
孜孜不倦不忘初心1 小时前
Ant Design Vue 表格组件空数据统一处理 踩坑
前端·vue.js·ant design
AD_wjk1 小时前
Android13系统集成方案
前端
Joyee6911 小时前
RN 的新通信模型 JSI
前端·react native