jsx的语法规则

JSX 是 React 框架中用于定义组件视图的一种语法，它的语法规则如下：

1. HTML 标签和 React 组件名都必须以大写字母开头，否则会被认为是 HTML 标签。

2. 在 JSX 中可以插入 JavaScript 表达式（不是语句），表达式要用花括号 {} 括起来。例如：<div>{(1 + 2) * 3}</div>

3. 可以使用任何 JavaScript 表达式作为 props 的值，包括字符串、数字、布尔值、函数等。

4. 在 JSX 中可以使用内联样式，样式名需要采用驼峰命名法，例如：style={{color: 'red', fontSize: '12px'}}。

5. 如果 JSX 元素有子元素，应该将子元素放在开始标签和结束标签之间，例如：<span>Hello <strong>World</strong></span>。

6. 在 JSX 中使用注释需要用 {/* ... */} 的形式来包裹。

7. JSX 中不能使用 class 属性，应该用 className 代替。

8. 必须要有返回值，如果只是想渲染一个空元素，可以使用 <></> 或者 <React.Fragment></React.Fragment>。

示例代码：

import React from 'react';

function App() {
  const user = { name: 'Tom', age: 20 };
  const renderHello = () => {
    return <span>Hello, React!</span>;
  };
  return (
    <div className="App" style={{ textAlign: 'center' }}>
      { renderHello() }
      <h1>My name is {user.name}</h1>
      <p>I am { user.age } years old.</p>
      <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
      </ul>
    </div>
  );
}

export default App;