React制作简易小名片

  • 1 案例描述
  • 2 编写html与JavaScript代码
  • 3 编写CSS样式
  • 4 全部代码

1 案例描述

使用React制作简易的小名片,效果图如下:

制作时将小名片分成两部分,第一部分图片与昵称,第二部分基本信息。

2 编写html与JavaScript代码

创建card.html文件,首先引入核心库:react.development.js、DOM相关的库:react-dom.development.js、babel编译器库babel.min.js。

    <script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script>

编写一个div,用来放置整体的名片,在div下面编写JavaScript代码:

    <div id="root"></div><script type="text/babel">// 编写JavaScript代码</script>

定义第一部分图片与昵称的数据,写入图片的路径、图片加载失败时的信息与昵称的信息:

        // 定义第一部分数据const part1 = {url: "../images/me.png",alt: "loading...",nikeName: "橘猫吃不胖"}

定义基本信息的数据,学号、姓名、性别、年龄、邮箱等信息:

        // 定义基本信息const basicInfo = {id: "20220101",name: "张三",gender: "男",age: 10,email: "zhangsan@163.com"}

获取当前的日期作为名片的日期:

        // 定义日期格式化函数function formatDate(date) { // 传入日期参数// toLocalDateString()方法将日期变成 年/月/日 的形式return date.toLocalDateString();}// 定义今天的日期const nowDate = {// new Date()传入今天的日期date: formatDate(new Date())}

编写第一部分组件,在编写时使用props获取传入的的参数,代码如下:

        // 定义第一部分组件function Part1(props) {return (<span className="cssPart1"><img className="cssImg" src={props.part1.url} alt={props.part1.alt} /><p className="p-nikeName">昵称:{props.part1.nikeName}</p></span>)}

编写第二部分组件,显示基本信息,代码如下:

        // 定义第二部分基本信息组件function Basic(props) {return (<span className="cssBasicInfo"><p>学号:{props.basicInfo.id}</p><p>姓名:{props.basicInfo.name}</p><p>性别:{props.basicInfo.gender}</p><p>年龄:{props.basicInfo.age}</p><p>邮箱:{props.basicInfo.email}</p></span>)}

将上面的两个组件以及日期合并到一个组件中,代码如下:

        // 将两个组件与日期合并到一起function Card(props) {return (<div className="cssCard">{/* 合并第一部分组件,传入参数personImg */}<Part1 part1={props.personImg} />{/* 合并第二部分组件,传入参数bbasicInformation */}<Basic basicInfo={props.basicInformation} />{/* 合并日期 */}<span className="cssDate"><p>日期:{props.today.date}</p></span></div>)}

最后将组件渲染到已经定义好的div中

        // 渲染const demo = <Card personImg={part1} basicInformation={basicInfo} today={nowDate} />let root = document.getElementById("root"); // 获取div元素ReactDOM.render(demo, root);

渲染完成后在浏览器中查看,效果如下:

在目前的代码中,组件参数的传递逻辑比较复杂,下面进行一个说明。

3 编写CSS样式

首先给名片设置宽高,为最外面加上一个边框,<Card/>是整合起来的组件,其类名是cssCard,因此为其编写样式。

    .cssCard {width: 430px;height: 260px;padding: 4px;border: 1px solid black;}


将图片和昵称显示在名片的左边,宽度占比32%,这部分的类名是cssPart1,为其编写样式。

    .cssPart1 {width: 32%;float: left;}


将图片缩小一些,将昵称在图片下方居中:

    .cssImg {height: 180px;}.p-nikeName {text-align: center;}


将个人基本信息靠右一些:

    .cssBasicInfo {float: right;width: 50%;}


将日期显示在名片的右下角:

    .cssDate {float: right;}

4 全部代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人名片</title><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script>
</head>
<style>.cssCard {width: 430px;height: 260px;padding: 4px;border: 1px solid black;}.cssPart1 {width: 32%;float: left;}.cssImg {height: 180px;}.p-nikeName {text-align: center;}.cssBasicInfo {float: right;width: 50%;}.cssDate {float: right;}
</style><body><div id="root"></div><script type="text/babel">// 定义第一部分数据const part1 = {url: "../images/me.png",alt: "loading...",nikeName: "橘猫吃不胖"}// 定义基本信息const basicInfo = {id: "20220101",name: "张三",gender: "男",age: 10,email: "zhangsan@163.com"}// 定义日期格式化函数function formatDate(date) { // 传入日期参数// toLocaleDateString()方法将日期变成 年/月/日 的形式return date.toLocaleDateString();}// 定义今天的日期const nowDate = {// new Date()传入今天的日期date: formatDate(new Date())}// 定义第一部分组件function Part1(props) {return (<span className="cssPart1"><img className="cssImg" src={props.part1.url} alt={props.part1.alt} /><p className="p-nikeName">昵称:{props.part1.nikeName}</p></span>)}// 定义第二部分基本信息组件function Basic(props) {return (<span className="cssBasicInfo"><p>学号:{props.basicInfo.id}</p><p>姓名:{props.basicInfo.name}</p><p>性别:{props.basicInfo.gender}</p><p>年龄:{props.basicInfo.age}</p><p>邮箱:{props.basicInfo.email}</p></span>)}// 将两个组件与日期合并到一起function Card(props) {return (<div className="cssCard">{/* 合并第一部分组件,传入参数personImg */}<Part1 part1={props.personImg} />{/* 合并第二部分组件,传入参数bbasicInformation */}<Basic basicInfo={props.basicInformation} />{/* 合并日期 */}<span className="cssDate"><p>日期:{props.today.date}</p></span></div>)}// 渲染const demo = <Card personImg={part1} basicInformation={basicInfo} today={nowDate} />let root = document.getElementById("root"); // 获取div元素ReactDOM.render(demo, root);</script>
</body></html>

React制作简易小名片相关推荐

  1. 用python制作简易小游戏

    那是一个***--***的日子,在打游戏的时候,我有了一个不太成熟的想法,要不要做一个游戏玩玩? 在看了一天的视频资料后(当时感觉就那样:cry:),但是做的时候,感觉夸大了:sob: so--放弃* ...

  2. python做飞机大战游戏单机_Python制作简易版飞机大战小游戏

    开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块. 相关文件 欢迎与我交流 环境搭建 安装Python并添加到环境变量,pip安装需要的相关模块即 ...

  3. 利用Unity3D制作简易2D计算器

    利用Unity3D制作简易2D计算器 标签(空格分隔): uiniy3D 1. 操作流程 在unity3DD中创建一个新项目 注意选择是2D的(因为默认3D) 在Assets框右键新建C#脚本 在新建 ...

  4. python random.random 缩短小数点儿后位数_Python random模块制作简易的四位数验证码...

    先给大家介绍下python中random模块 random与numpy.random对比: 1.random.random():生成[0,1)之间的随机浮点数: numpy.random.random ...

  5. Luat Inside | 致敬经典,使用Air724UG制作简易贪吃蛇

    作者简介: 打盹的消防车--活跃于Luat社群的新生代全能开发者,东北小伙儿爽朗幽默.好学敏思,更是实力行动派.幼年曾手握火红炽铁而后全然无恙,堪称魔幻经历:如今热衷于各类嵌入式软硬件研究,快意物联江 ...

  6. APP Designer 制作简易英汉词典的回调函数书写

    APP Designer 制作简易英汉词典的回调函数书写 在学习MATLAB 的App Designer 时看到的一个有意思的小项目,主要步骤参考了slandarer 的MATLAB 手把手带你制作第 ...

  7. 一张小名片引发的地球大危机

    玛雅人所预言的世界末日就要到了?专家的权威辟谣声明丝毫敌不过玛雅预言,末日的担忧依旧凝重:到了12月21日那一天,地球真的会和往常一样平静? 实际上,现代科学已经证明玛雅预言不会成为现实,但地球因环境 ...

  8. 纯css3制作简易钟表时钟

    使用css3制作简易钟表 效果 html代码 <div class="clock" ><!-- 指針 --><div class="hour ...

  9. 免费IP代理池定时维护,封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池,并制作简易流量爬虫...

    前言 我们之前的爬虫都是模拟成浏览器后直接爬取,并没有动态设置IP代理以及UserAgent标识,这样很容易被服务器封IP,因此需要设置IP代理,但又不想花钱买,网上有免费IP代理,但大多都数都是不可 ...

  10. 利用jQuery制作简易弹幕效果

    利用jQuery制作简易弹幕效果 实现步骤: 1.制作样式 2.逻辑,思路 实现步骤: 1.制作样式 我们先来看看body中的代码: <body><div class="b ...

最新文章

  1. 高效学习方法论的学习笔记
  2. 90 后女科学家,四年完成清华大学硕博连读,解决多个世界级难题
  3. Jboss启动报错之8083 already in use
  4. Codeforces Global Round 1 晕阙记
  5. 拼接字符串 新增数据方法
  6. 查看docker运行状态_docker商业版受限?请了解下crio
  7. Syncd - 开源自动化部署工具
  8. angular 获取ng-repeat完成状态 $last
  9. leetcode 三数之和 python_16.leetcode题目讲解(Python):最接近的三数之和
  10. fastdfs-配合nginx-麻烦的
  11. [恢]hdu 2087
  12. Linux 命令(34)—— vim 命令
  13. 哈尔滨举办冰雪动漫节 coser演绎《王者荣耀》英雄
  14. AI模型的大一统!浅析微软的BEIT3:多模态领域乱杀的十二边形战士
  15. 北京市海淀区踢球场地指南
  16. 业界 | 阿里获杭州首张无人驾驶路测牌照,打造“智能高速公路”
  17. 第七章·【第一次上岗:核桃编程】
  18. ASWEET项目实施日志
  19. vue导出excel加一个进度条_Vue实现在前端导出Excel
  20. MySQL 两张表数据合并

热门文章

  1. linux中package什么文件夹,PACKAGE 文件扩展名: 它是什么以及如何打开它?
  2. 如何使用navicat premium打开外部.sql文件
  3. 36. linux系统日志在哪里看
  4. 电脑WIFI密码获取
  5. isis学不到looback口的路由_光纤猫接D-Link无线路由器,怎么设置上网
  6. DhtmlxGrid第一次接触,jsp页面
  7. debian7系统设置固定IP
  8. WordPress .htaccess 安全配置15个
  9. Apache的Rewrite知识点梳理(mod_rewrite、RewriteCond、RewriteRule)
  10. linux系统etc什么意思,etc.是什么意思 linux下的etc是什么意思