1. What is JSX
JSX is a syntax extension of JavaScript. The UI interface can be assembled and can be used in conjunction with JavaScript syntax.
2. Why use JSX
- Define HTML elements using familiar syntax, provide more semantic tags, and writing templates with JSX is easier and faster
- More intuitive: JSX makes components simpler, clearer, and more intuitive
- Abstract the creation process of React elements, making writing components easier
An example is as follows:
//Before react17 versionconst children1 = ("li", null, "First component content!");
const children2 = ("li", null, "Second component content!");
const root = (
"ul",
{ className: "list" },
children1,
children2
);
// After react17 versionimport { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const root = _jsxs("ul", {
className: "list",
children: [
_jsx("li", {
children: "Hello",
}),
_jsx("li", {
children: "World",
}),
],
});JSX equivalents are as follows:
const root = (
<ul className="list">
<li>Hello</li>
<li>World</li>
</ul>
);Obviously, JSX writing is easier to write and maintain pages, and is simple and intuitive.
3. JSX writing specifications
- The outermost layer of JSX can only have one root element, and you can use div, span and other tags.
- Under normal circumstances, I can wrap a small bracket() on the outermost layer to facilitate our better formatting of the code.
- Tags in JSX can be single or double tags; note: If it is a single tag, it must end with />
- When using variables, we can put them in a brace where any valid JavaScript expression can be placed inside the braces.
The code example is as follows:
const root = (
<div className="list">
<div>The first component content！</div>
<img src="" />
{1 === 1 && <div>The second component content！</div>}
</div>
);4. JSX comments
There are usually three comments
<ul className="list">
{/* 1. Single line comment */}
<li>The first component content！</li> // 2. End of line comments <li>The second component content！</li>
{/*
3. Multi-line comments
1
2
3
*/}
</ul>5. JSX embed variables
When variables are used in JSX, they need to be wrapped in braces { }; note: the variables used need to be defined in advance. as follows.
const MyComponent = () => {
const text = "Hello World！";
return <div>{text}</div>;
};
export default MyComponent;6. JSX embedded expressions
- Operator expression
- Tripartite Expressions
- Function Calls
const MyComponent = () => {
const isFinish = true;
const calc = () => {
const a = 1;
const b = 2;
return a + b;
};
return (
<div>
{/*1. Operator expression*/}
<span>2 + 3 The sum of：{2 + 3}</span>
{/*2. Tripartite Expression*/}
<span>Is the homework completed?：{isFinish ? "yes" : "no"}</span>
{/*3. Make function calls*/}
<span>{calc()}</span>
</div>
);
};
export default MyComponent;7. JSX binding properties
Note: When binding the element to style, the braces on the outer layer indicate that variables or expressions can be passed in. The braces inside are an object, which are key-value pairs that represent the style attributes and attribute values of the element. In addition, when the attribute is composed of multiple words, it needs to be expressed by camel nomenclature, for example: fontSize
const MyComponent = () => {
const title = "I'm the whole of the title!";
const url = "";
const className = "span";
return (
<div>
{/* 1. Bind normal attributes */}
<h2 title={title}>I'm the title...</h2>
<a href={url}>Take it on Baidu</a>
{/* 2.Binding class */}
<span className={className}>I amspanLabel</span>
<span className={["tag", "span"].join(" ")}>I amspanLabel2</span>
{/* 3.Binding style */}
<span style={{ color: "red", fontSize: 16 }}>My font color is red</span>
</div>
);
};
export default MyComponent;8. JSX binding event
It can be seen that the event processing of React elements is very similar to that of DOM elements, but there are some syntax differences:
- React events are named in camel rather than purely lowercase
- When using JSX syntax, you need to pass in a function as an event handler instead of a string
- You cannot add brackets when using functions, otherwise it will be executed directly
- If the function is too simple, you can directly write the function content in JSX
const MyComponent = () => {
const onClick = () => {
("You clicked button 1");
};
return (
<div>
<button onClick={onClick}>Button1</button>
<button
onClick={() => {
("You clicked button 2");
}}
>
Button2
</button>
</div>
);
};
export default MyComponent;9. JSX conditional rendering
There are three common conditions for rendering:
- Method 1: Conditional judgment statements, suitable for situations with more logic
- Method 2: Tripartite operator, which is relatively simple to suit logic
- Method 3: With operator &&, if the condition is true, render the components behind &&; if the condition is not true, none of them will be rendered.
const MyComponent = () => {
const renderTitle = (key) => {
if (key > 1) {
return <span>I'm the title1</span>;
}
return <span>I'm the title2</span>;
};
return (
<div>
{renderTitle(2)}
{2 > 1 ? <span>I'll show it</span> : <span>I'll hide</span>}
{2 > 1 && <span>I'll show it</span>}
</div>
);
};
export default MyComponent;10. JSX list rendering
We usually use Javascript's map function to handle JSX array list rendering; as follows
const MyComponent = () => {
const array = ["1", "2", "3", "4"];
return (
<ul>
{((i) => (
<li key={i}>{i}</li>
))}
</ul>
);
};
export default MyComponent;Note: In rendering, we need to add a key to the rendering item, otherwise an error will be reported: warning: Each child in a list should have a unique "key" prop.
Key and diff algorithms in React are closely related.
The above is the detailed content of the React JSX basic syntax tutorial example. For more information about React JSX basic syntax, please follow my other related articles!