React快速入门

最近需要学到react,这里进行一个快速的入门,参考react官网

1.创建和嵌套组件

react的组件封装是个思想,我这里快速演示代码,自己本身也不太熟悉。
代码的路径是src底下的App.js
在这里插入图片描述

function MyButton() {return (<button>I'm a Yeapt's Button</button>);
}function MyApp() {return (<div className={"myApp"}><h1>hello</h1><MyButton/></div>);
}export default MyApp;

小结:这里我对他的理解就是封装一个自定义的按钮,然后在使用的时候包在div里面。

2.使用 JSX 编写标签

刚刚那种包裹式的标签语法被称为JSX,这个必须闭合标签,也不能return多个jsx标签,必须在贡献的父级中,比如 div 或者 空标签包裹

<div></div>
<></>

小结:算是一个对规范的要求,官网很贴心,说:有大量的 HTML 需要移植到 JSX 中,就用在线转换器。

3.添加样式

react设计到样式的修改跟css类似,也是搞个className,然后创建个css样式文件区操作。

我这里试着把按钮改成蓝色,直接创建一个css文件夹,然后在里面写样式,最后引入

import './css/myButton.css';function MyButton() {return (<button className={"myButton"}>I'm a button</button>);
}function MyApp() {return (<div className={"myApp"}><h1>hello</h1><MyButton/></div>);
}export default MyApp;
/* In your CSS */
.myButton {background: cornflowerblue;
}

在这里插入图片描述
小结:目前来看很简单学过css的都会,不知道后续有没有别的引入方式,link应该也是可以的。

4.显示数据

就是一个变量传递,创建对象,显示对象数据,直接上代码。

const user = {name: 'new_baby',imgUrl: 'https://www.baidu.com/img/baidu_sylogo1.gif',imgSize: 90,}function MyButton() {return (<button className={"myButton"}>I'm a button</button>);
}function MyApp() {return (<div className={"myApp"}><h1>hello {user.name}</h1><img src={user.imgUrl} sizes={user.imgSize}/><br/><MyButton/></div>);
}export default MyApp;

在这里插入图片描述
小结:其实就是通过对象去赋值,这种写法更加灵活,涉及前后端交互的时候,数据由后端获取往前端赋值。

5.条件渲染

其实就是if的用法,react没有像vue那样有v-if,但是写法都类似。官网提供了三种表现形式,这里简单展示:

IF语句引入JSX

function MyApp() {let LoginStatus = true;if (LoginStatus) {return (<div className={"myApp"}><h1>hello {user.name}</h1><img src={user.imgUrl} sizes={user.imgSize}/><br/><MyButton/></div>);} else {return (<div>请登录</div>);}
}

下面是两种判断下的界面
在这里插入图片描述
在这里插入图片描述

条件运算符(JSX内部)

直接在div里面进行条件运算,工作与JSX内部。但是在测试过程中f发现有个问题,if或else后只能跟一个组件。

function MyApp() {let loginStatus = false;return (<div className={"myApp"}>{loginStatus ? (<MyButton/>) : (<h1>请登录</h1>)}</div>);
}

逻辑 运算符(内部不需要else)

当你不需要 else 分支时,可以直接用这个,估计用的比较少。

function MyApp() {let loginStatus = false;return (<div className={"myApp"}>{loginStatus && (<MyButton/>)}</div>);
}

小结:if的用法,预计第一种和第二种会用的多一点。第一种好理解,第二种写法简便。

6.渲染列表

这里是后台的重点,一定会用到,就是渲染列表,id作为唯一标识是为了方便做特殊处理,搭配if增加点高级玩法。下面直接展示代码:

const users = [{name: 'Jack', id: 1},{name: 'Hobby', id: 2},{name: 'Tom', id: 3},
]const userItems = users.map(users =><li key={users.id}>{users.name}</li>
);function MyApp() {return (<div className={"myApp"}><ul>{userItems}</ul></div>);
}

改造下定义 userItems

const userItems = users.map(users =><li key={users.id}style={{color:users.isBoy?'black':'red',}}>{users.name}</li>
);

小结:这里在写代码的时候要注意2点:
1.特殊的操作尽可能在组件中即const中完成,不要在return去操作,这样可以低耦合。
2.主键id一定要带上,即使你只是展示。

6.响应事件

简单说就是一些函数,比如按钮的点击事件,这里简单示范下:

function MyButton() {function handleClick(){alert('被你点到了');}return (<button onClick={handleClick}>点我</button>);
}

小结:就注意下事件后面不要加(),并且都是在组件内自己完成的。

7.更新界面

先介绍下这个useState(),是改变状态的开关,将状态添加到函数组件需要4个步骤:启用状态、初始化、读取和更新。

import { useState } from 'react';
function MyButton() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1)}return (<button className={"myButton"} onClick={handleClick}>点击了{count}</button>);
}

小结:useState是react自带的属性后续需要深入了解Hook,count属性每个组件都自己管控不会干扰。

8.组件间共享数据

两个组件之间的数据同步,感觉有点像消息传递,定义局部变量。
官网称之为:按这种方式传递下来的信息被称作 prop。

这里看看代码:

function MyButton({count, onClick, user}) {return (<button className={"myButton"} onClick={onClick}>{user}点击了{count}</button>);
}function MyApp() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1)}return (<div className={"myApp"}><MyButton user={'张三'} count={count} onClick={handleClick}/><MyButton user={'李四'} count={count} onClick={handleClick}/></div>);
}export default MyApp;

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/97584.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GAN!生成对抗网络GAN全维度介绍与实战

目录 一、引言1.1 生成对抗网络简介1.2 应用领域概览1.3 GAN的重要性 二、理论基础2.1 生成对抗网络的工作原理2.1.1 生成器生成过程 2.1.2 判别器判别过程 2.1.3 训练过程训练代码示例 2.1.4 平衡与收敛 2.2 数学背景2.2.1 损失函数生成器损失判别器损失 2.2.2 优化方法优化代…

git错误记录

露id没有影响&#xff0c;搞得微软不知道我ip一样 git fatal: 拒绝合并无关的历史的错误解决(亲测有效)

Vue elementui 实现表格selection的默认勾选,翻页记录勾选状态

需求&#xff1a;当弹出一个列表页数据&#xff0c;对其进行筛选选择。 列表更新&#xff0c;填充已选数据 主要使用toggleRowSelection 代码如下&#xff1a; <el-table v-loading"loading" :data"drugList" selection-change"handleSelection…

非常适合大学附近的校园跑腿和自习室订座小程序

推荐两款非常适合在大学内和大学周边的项目 这两款小程序分别是校园跑腿系统和自习室在线订座系统 1、校园跑腿系统&#xff0c;第一张图所示&#xff0c;支持多校运营、快递代取、校园跑腿、租借服务、代理中心、跑腿中心、人员管理、订单抽成、数据统计、众包接单、消息通…

软考A计划-系统集成项目管理工程师-法律法规-上

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

春秋云镜 CVE-2020-13933

春秋云镜 CVE-2020-13933 Shiro < 1.6.0 验证绕过漏洞 靶标介绍 Apahce Shiro 由于处理身份验证请求时出错 存在 权限绕过漏洞&#xff0c;远程攻击者可以发送特制的HTTP请求&#xff0c;绕过身份验证过程并获得对应用程序的未授权访问。 启动场景 漏洞利用 exp /admin…

区块链碎碎念

现在的区块链早已过了跑马圈地的时代&#xff0c;现在还按照以前承接项目的方式做区块链只能是越来越艰难。经过几年的技术沉淀&#xff0c;做区块链项目的公司都已经没落的七七八八了。 区块链不是一个能够快速显现盈利能力的行业&#xff0c;相反这个行业目前的模式还是处于…

对话音视频牛哥:开发RTSP|RTMP直播播放器难不难?难在哪?

我关注的播放器指标 好多开发者跟我交流音视频相关技术的时候&#xff0c;经常问我的问题是&#xff0c;多久可以开发个商业级别的RTMP或RTSP播放器&#xff1f;你们是怎样做到毫秒级延迟的&#xff1f;为什么一个播放器&#xff0c;会被你们做到那么复杂&#xff1f;带着这些…

使用 HTML、CSS 和 JavaScript 创建实时 Web 编辑器

使用 HTML、CSS 和 JavaScript 创建实时 Web 编辑器 在本文中&#xff0c;我们将创建一个实时网页编辑器。这是一个 Web 应用程序&#xff0c;允许我们在网页上编写 HTML、CSS 和 JavaScript 代码并实时查看结果。这是学习 Web 开发和测试代码片段的绝佳工具。我们将使用ifram…

nodejs+vue古诗词在线测试管理系统

一开始&#xff0c;本文就对系统内谈到的基本知识&#xff0c;从整体上进行了描述&#xff0c;并在此基础上进行了系统分析。为了能够使本系统较好、较为完善的被设计实现出来&#xff0c;就必须先进行分析调查。基于之前相关的基础&#xff0c;在功能上&#xff0c;对新系统进…

通过请求头传数据向后端发请求

axios &#xff08;get post请求、头部参数添加&#xff09;傻瓜式入门axios_axiospost请求参数_web_blog的博客-CSDN博客

【Ubuntu】简洁高效企业级日志平台后起之秀Graylog

简介 Graylog 是一个用于集中式日志管理的开源平台。在现代数据驱动的环境中&#xff0c;我们需要处理来自各种设备、应用程序和操作系统的大量数据。Graylog提供了一种方法来聚合、组织和理解所有这些数据。它的核心功能包括流式标记、实时搜索、仪表板可视化、告警触发、内容…

【图论】最短路的传送问题

一.分层图问题&#xff08;单源传送&#xff09; &#xff08;1&#xff09;题目 P4568 [JLOI2011] 飞行路线 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) &#xff08;2&#xff09;思路 可知背景就是求最短路问题&#xff0c;但难点是可以使一条路距离缩短至0&#xf…

抓包工具Fiddler下载与安装

一、Fiddler介绍 1.Fiddler简介 Fiddler 是一款免费、灵活、操作简单、功能强大的 HTTP 代理工具&#xff0c;是目前最常用的 HTTP 抓包工具之一。可以抓取所有的 HTTP/HTTPS 包、过滤会话、分析请求详细内容、伪造客户端请求、篡改服务器响应、重定向、网络限速、断点调试等…

【IMX6ULL驱动开发学习】06.DHT11温湿度传感器驱动程序编写与测试

一、DHT11简介 DHT11是一款可测量温度和湿度的传感器。比如市面上一些空气加湿器&#xff0c;会测量空气中湿度&#xff0c;再根据测量结果决定是否继续加湿。 DHT11数字温湿度传感器是一款含有已校准数字信号输出的温湿度复合传感器&#xff0c;具有超小体积、极低功耗的特点…

JQuery快速入门教程

1、JQuery快速入门 1.1、JQuery介绍 jQuery 是一个 JavaScript 库。所谓的库&#xff0c;就是一个 JS 文件&#xff0c;里面封装了很多预定义的函数&#xff0c;比如获取元素&#xff0c;执行隐藏、移动等&#xff0c;目的就 是在使用时直接调用&#xff0c;不需要再重复定义…

【Unity开发必备】100多个 Unity 学习网址 资源 收藏整理大全【持续更新】

Unity 相关网站整理大全 众所周知&#xff0c;工欲善其事必先利其器&#xff0c;有一个好的工具可以让我们事半功倍&#xff0c;有一个好用的网站更是如此&#xff01; 但是好用的网站真的太多了&#xff0c;收藏夹都满满的(但是几乎没打开用过&#x1f601;)。 所以本文是对…

开源ChatGPT系统源码 采用NUXT3+Laravel9后端开发 前后端分离版本

开源ChatGPT系统源码 采用NUXT3Laravel9后端开发 前后端分离版本 ChatGPT是一种基于AI的聊天机器人技术&#xff0c;它可以帮助用户与聊天机器人进行自然语言交流&#xff0c;以解决用户的问题或满足用户的需求。ChatGPT的核心技术是使用自然语言处理&#xff08;NLP&#xff…

Linux/Ubuntu 的日常升级和安全更新,如何操作?

我安装的是Ubuntu 20.04.6 LTS的Windows上Linux子系统版本&#xff0c;启动完成后显示&#xff1a; Welcome to Ubuntu 20.04.6 LTS (GNU/Linux 5.15.90.4-microsoft-standard-WSL2 x86_64) * Documentation: https://help.ubuntu.com * Management: https://landscape.c…

P6685 可持久化动态仙人掌的直径问题

思路1&#xff1a;二分快速幂 #include<bits/stdc.h> using namespace std; #define int long long int n,m; bool check(int a,int b){int ans1;while(b){if(a>n)return false;if(b&1)ans*a;if(ans>n)return false;aa*a;b>>1;}return ans<n; } voi…