react学习(一)--JSX简介
2024-10-02 06:46:37
由于在中国银联实习的项目要用到react,所以不得不硬着头皮把react学习一下。这是要往全栈发展吗0.0
正文:
- 一个最简单的React例子如下,
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
); - 我们来观察一下声明的这个变量:
const element = <h1>Hello, world!</h1>;
- 这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。
- 它被称为 JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言,但事实上它完全是在 JavaScript 内部实现的。
- JSX 用来声明 React 当中的元素。在下一章节里面我们会详细介绍元素是如何被渲染出来的,接下来呢,我们先来看看 JSX 的基本使用方法。
在 JSX 中使用表达式
- 你可以任意地在 JSX 当中使用 JavaScript 表达式,在 JSX 当中的表达式要包含在大括号里。
function formatName(user) {
return user.firstName + ' ' + user.lastName;
} const user = {
firstName: 'Harper',
lastName: 'Perez'
}; const element = (
<h1>
Hello, {formatName(user)}!
</h1>
); ReactDOM.render(
element,
document.getElementById('root')
); JSX 本身其实也是一种表达式
在编译之后呢,JSX 其实会被转化为普通的 JavaScript 对象。这也就意味着,你其实可以在
if
或者for
语句里使用 JSX,将它赋值给变量,当作参数传入,作为返回值都可以:function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}JSX 属性
- 你可以使用引号来定义以字符串为值的属性:
const element = <div tabIndex="0"></div>
- 也可以使用大括号来定义以 JavaScript 表达式为值的属性:
const element = <img src={user.avatarUrl}></img>;
切记你使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式。
JSX 嵌套
- 如果 JSX 标签是闭合式的,那么你需要在结尾处用
/>
, 就好像 XML/HTML 一样:const element = <img src={user.avatarUrl} />;
- JSX 标签同样可以相互嵌套:
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
修改于2019.7.25
最新文章
- swing with transformjs
- Java界面设计 Swing(1)
- 理解领域模型Domain Model
- WebApi深入学习--概述+路由查找
- 关于ScrollView和listview的冲突关于的滑动和宽度
- hmt5初学小技巧
- 使用SharePoint CSOM 编写高效的程序
- 使用std::function 把类成员函数指针转换为普通函数指针
- javascript 事件处理
- JAVA读取propertise配置文件
- gcc #define 学习记录
- checkbox全选、全不选实现
- 把ABP框架部署到Docker中
- 服务器SSH连接时间设置
- .NET Core 添加Java 服务引用(WebService) 曲折历程(二)
- 【原创】Python第二章——标识符命名规则
- C# MVC EF框架 用事务
- JS事件覆盖问题和触发问题
- Linux Timer定时器【转】
- pycharm 里面引用pymysql
热门文章
- 小代介绍Spring Boot
- Django项目的创建和管理
- 《ASP.NET Core 高性能系列》致敬伟大的.NET斗士甲骨文!
- 《An Attentive Survey of Attention Models》阅读笔记
- Bzoj 2281 [Sdoi2011]黑白棋 题解
- CDQZ集训DAY7 日记
- python通过TimedRotatingFileHandler按时间切割日志
- Java编程思想:XML
- 五分钟了解Zabbix
- .NET Core 3.0之深入源码理解HttpClientFactory(一)