📅  最后修改于: 2023-12-03 14:43:35.588000             🧑  作者: Mango
JSX is a syntax extension for JavaScript, used to write HTML-like structures in JavaScript code. It is used mainly with React, a popular front-end library built on top of JavaScript.
import React from 'react';
function MyComponent(props) {
return (
<div className="my-component">
<h1>{props.title}</h1>
<p>{props.subtitle}</p>
{props.items.map((item, idx) => <span key={idx}>{item}</span>)}
</div>
);
}
In the above example, we define a React component called MyComponent
that takes in some props (title
, subtitle
, and items
). The JSX code defines a div
element with a class name of my-component
, with a h1
element that displays the title prop, a p
element that displays the subtitle prop, and a list of span
elements that display each item in the items prop array.
JSX is a powerful and intuitive tool for writing UI components in JavaScript, particularly in conjunction with React. Its HTML-like syntax makes it easier to write and understand complex UI code.