JSX基础语法

每个 React 组件都是一个 JavaScript 函数，可能包含 React 渲染到浏览器中的一些标记。React 组件使用名为 JSX 的语法扩展来表示该标记。JSX 看起来很像 HTML，但它更严格一些，可以显示动态信息。理解这一点的最佳方法是将一些 HTML 标记转换为 JSX 标记。

JSX 语法

JSX 是 JavaScript 的语法扩展，它允许你在 JavaScript 代码中编写类似 HTML 的标记。JSX 语法允许你在 JavaScript 代码中编写类似 HTML 的标记，并且可以嵌入 JavaScript 表达式。

JSX 语法规则

1. 元素必须闭合：

​ 所有的标签都必须闭合，即使是自闭合的标签，也需要用 / 结束，例如 <img /> 或 <br />

2. JavaScript表达式：

​ 在 JSX 中，可以使用大括号 {} 包裹 JavaScript 表达式。例如：

const name = "John";
const element = <h1>Hello, {name}!</h1>;

3. css 类名：

​ 在 JSX 中，使用 className 而不是 class 来指定 CSS 类：

<div className="my-class"></div>

4. 条件渲染：

可以使用 JavaScript 表达式进行条件渲染，例如三元运算符：

const isLoggedIn = true;
const element = <div>{isLoggedIn ? "Welcome back!" : "Please log in."}</div>;

5. 内联样式：

const style = { color: 'blue', fontSize: '16px' };
const element = <div style={style}>This is styled text</div>;

6. 组件：

const MyComponent = () => {
  return <h1>Hello, world!</h1>;
};

7. 嵌套组件：

组件可以嵌套使用，父组件可以包含子组件：

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent />
    </div>
  );
};

const ChildComponent = () => {
  return <h2>This is a child component</h2>;
};

createElement 方法

JSX 是一种 JavaScript 的语法扩展，Babel 会把 JSX 转译成一个名为 React.createElement 函数调用。

React.createElement(
  type,      //创建的 *React* 元素类型 (字符串标签名称（如 'div', 'span'）或 React 组件) 
  props,     //可选 - React属性对象（如 { className: 'my-class', id: 'my-id' }）
  ...children //可选 - 子元素，可以是字符串或其他 React 元素
);

使用jsx语法：

<div className="my-class" id="my-id">Hello, world!</div>

使用 createElement 方法：

React.createElement(
  'div',
  { className: 'my-class', id: 'my-id' },
  'Hello, world!'
);

这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。

可以看出，JSX 的本质其实就是 React.createElement 方法的一种语法糖。