前端学习(2219):react之jsx小案例
2024-05-10 10:49:21
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { tsPropertySignature } from '@babel/types';//<app/>js的普通对象
/*let app = < App / >let root = document.getElementById('root')let h1=<h1>helloworld<span>我是</span></h1>
{ ReactDOM.render(h1, root
); }*/
//实现时刻的变化
/* function clock() {let time = new Date().toLocaleTimeString()let element = ( < div > < h1 > 现在的时间 { time } < /h1></div > )let root = document.querySelector('#root')ReactDOM.render(element, root)
}
clock()setInterval(clock, 1000) *//* function Clock(props) {return (<div ><h1 > 现在的时间是 { props.date.toLocaleTimeString() } < /h1> <h2 > 这是副标题 < /h2> < /div >)}function run() {ReactDOM.render( <Clock date = { new Date }/>, document.querySelector('#root'))
}setInterval(run, 1000) */
let time = new Date().toLocaleTimeString()
let str = '当前时间是:'
let element = ( <div ><h1 > helloworld < /h1> <h2 > { str + time } < /h2> < /div >
)
let man = "发热"
let element2 = ( <div ><h1 > 今天是否隔离 < /h1> <h2 > { man == "发热" ? "隔离" : "躺床上" } < /h2> < /div >
)/* ReactDOM.render(element, document.querySelector('#root')
) */
ReactDOM.render(element2, document.querySelector('#root')
)
运行结果
前端学习(2219):react之jsx小案例相关推荐
- 【前端学习】React学习资料
React 是一种开源的 JavaScript 库,用于构建用户界面.它由 Facebook 开发并维护,已经成为了当今最流行的前端库之一.与其他框架不同,React 主要专注于视图层(View),旨 ...
- 【前端学习】React学习笔记-事件、生命周期、虚拟DOMdiffing
跟着尚硅谷的天禹老师学习React 看视频可以直接点击 b站视频地址 React中的事件处理 补充ref 上面的ref在React官网中提到不要被过度使用,在一些情况下可以使用其他方法来获取数据,比如 ...
- 前端学习之React篇-(1)最简React——Html直接引用React
当新手想看看React是什么样的,语法是什么样的,那么这里给出了一个最简单的使用React的方法--就是在html页面中直接引入React的js文件,然后在这个html中直接写react的js即可,简 ...
- Moment.js插件学习:制作一个时间显示小案例
插件地址:http://momentjs.cn/ Moment.js是一个原生JavaScript 日期处理类库,使用起来也非常简单.但是注意它所得到的结果都是一个字符串,并且可以改变时间显示的格式. ...
- 前端学习笔记(注册页面综合案例html5)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- Web前端学习笔记——JavaScript之面向对象游戏案例:贪吃蛇
面向对象游戏案例:贪吃蛇 案例相关源码以上传到 GitHub :https://github.com/lipengzhou/new-snake 案例介绍 游戏演示 在线演示地址:贪吃蛇 案例目标 游戏 ...
- 前端学习(3104):react-hello-react案例
- 前端学习(2935):v-for案例
- 前端学习(2835):小程序中使用less
安装插件 自动生成wxss
最新文章
- SAXReader解析xml繁体字乱码问题
- Mini 容器学习笔记4——组件的生命周期(应用篇)
- PHP 脚本文件使用 “#!/usr/bin/env php” 并执行时提示 No such file or directory
- Opportunity search in backend for status - some default system status
- 程序员修神之路--redis做分布式锁可能不那么简单
- Java修炼之路——基础篇——Java集合类详解1
- 基于java+springboot+mybatis 网上商城项目设计和实现
- CentOS 6.7安装gcc4.8.2
- 【JavaScript学习-红宝书】1.语言基础
- 我们为什么要推广经方?
- python注释快捷_python注释快捷键
- 香港服务器防攻击能力好吗
- InputBox接收数字,并将该数字转成int型
- 什么是Promise?Promise有什么好处
- Mac虚拟机连接局域网网线的路由配置
- 阿里云服务器接入云盾Web应用防火墙教程
- 遥感图像处理:最小噪声分离变换(Minimum Noise Fraction Rotation,MNF Rotation)
- 地图无限放大服务器软件,BIGEMAP离线地图服务器
- win10电脑发现不了华为share_电脑发现不了华为分享?
- 三星 android,三星S系列盘点:安卓阵营风向标 机皇的前世今生
热门文章
- Unity WebGL 窗口自适应
- Debian 9 strech 安装 ROS lunar
- 关于spring中util:/的配置
- Eclipse换常用的快捷键
- 2008年12月31日,博客园开博
- 打印速度快点的打印机_SLM推出了功能强大的新型金属3D打印机,速度快20倍
- 声卡突然听不到监听_音乐人/键盘手伴侣物问题之:专业监听音箱的音质必须用独立声卡...
- python入门心得_记初学python的一些心得
- macos sierra 引导镜像_真想不到,在win10上可以制作苹果macOS启动U盘
- java 上传远程图片,java上传图片到另一台服务器上,怎么解决