React是一个流行的JavaScript库,用于构建用户界面。它使用一种名为JSX的语法扩展来描述组件的结构和样式。JSX是React的核心语言之一,它允许开发人员在JavaScript中编写HTML,从而使代码更加简洁和易于阅读。
JSX是一种语法扩展
,它允许开发人员在JavaScript中编写类似于HTML的代码。它使用类似XML的标记来描述组件的结构和样式。例如,下面是一个简单的JSX组件:
const MyComponent = () => {
return (
<div>
<h1>Hello, World!</h1>
<p>This is a JSX component.</p>
</div>
);
};
在这个例子中,我们定义了一个名为MyComponent
的函数组件,它返回一个包含HTML标记的JSX元素。这个元素包含一个<div>
标记,其中包含一个<h1>
标记和一个<p>
标记。这些标记被称为“元素”,它们可以包含属性和子元素。
JSX的语法非常类似于HTML,但有一些重要的区别。首先,JSX元素必须使用尖括号< >
来包围。其次,JSX属性必须使用双引号"
来包围。最后,JSX元素必须以分号;
结尾。
除了HTML标记外,JSX还支持JavaScript表达式
。这意味着我们可以在JSX中使用变量、函数和算术运算符等JavaScript语法。例如,下面是一个使用JavaScript表达式的JSX组件:
const MyComponent = () => {
const name = "John";
const age = 30;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old.</p>
</div>
);
};
在这个例子中,我们定义了两个变量name
和age
,然后在JSX中使用它们来显示用户的姓名和年龄。我们使用花括号{ }
来将JavaScript表达式嵌入到JSX中。
JSX还支持JavaScript的条件语句和循环语句
。例如,下面是一个使用条件语句的JSX组件:
const MyComponent = ({ isLoggedIn }) => {
return (
<div>
{isLoggedIn ? (
<p>Welcome back!</p>
) : (
<p>Please log in.</p>
)}
</div>
);
};
在这个例子中,我们定义了一个名为isLoggedIn
的属性,它表示用户是否已登录。然后,我们使用条件运算符? :
来根据用户是否已登录显示不同的消息。
JSX还支持JavaScript的循环语句
。例如,下面是一个使用循环语句的JSX组件:
const MyComponent = ({ items }) => {
return (
<ul>
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};
在这个例子中,我们定义了一个名为items
的属性,它是一个包含多个对象的数组。然后,我们使用Array.map()
方法来遍历数组,并为每个对象创建一个<li>
元素。我们还使用key
属性来指定每个元素的唯一标识符,以提高性能。
jsx的{}能够放什么—表达式—值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--使用react的环境-->
<script src="./js/babel.min.js"></script>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<!--
babel的作用就是把 react的语法转为 js语言
react-dom的作用就是把 虚拟dom转为dom
react.development 开发环境下的react源码
-->
</head>
<body>
<!--真是的dom-->
<div id="app"></div>
<script type="text/babel">
let classNameVal = "content"
let text="刘明飞快的在回你眼前的这个未婚妻是什么情况"
function add(){
return "真的让人无法自拔啊!!!"
}
let list=["心海","甘雨","艳菲","八重"]
let VDOM = (
<div className={classNameVal}>
<p style={{color:"red",fontSize:"29px"}}>你好{classNameVal}</p>
<img src="./1.jpg" alt="" width="239" height="159"/>
{
//这里是注释
/*
多行注释
多行注释
* */
}
<p>{text}</p>
<p>{text+"看着他布灵布灵的大眼睛"}</p>
<p>{add()}</p>
<div>
我的老婆们:
{
list.map(ele=>{
return <h2>{ele}</h2>
})
}
</div>
</div>
)
ReactDOM.render(VDOM, document.querySelector("#app"))
/*
在 {} 里能写什么 ---表达式---也就是值
js代码 和 js表达式
a. 表达式: 一个表达式会产生一个值,可以在任意需要值的地方 使用
a
a+520
fn()
list.map
b. 流程控制语句
if
for
switch
*/
</script>
</body>
</html>
总之,JSX是一种非常强大和灵活的语法扩展,它使React开发人员能够更轻松地编写和组织代码。通过使用JSX,我们可以将HTML、JavaScript和CSS等不同类型的代码组合在一起,从而创建出美观、灵活和易于维护的用户界面。