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>
}
相关推荐
哆啦A梦15882 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_2 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD2 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
要加油哦~3 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
哆啦A梦15883 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫3 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo4 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li4 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐4 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
qq_398586545 小时前
Threejs入门学习笔记
javascript·笔记·学习