React JSX基础语法教程示例

// react17版本之前
const children1 = React.createElement("li", null, "第一个组件内容！");
const children2 = React.createElement("li", null, "第二个组件内容！");
const root = React.createElement(
  "ul",
  { className: "list" },
  children1,
  children2
);
// react17版本之后
import { 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",
    }),
  ],
});

const root = (
  <ul className="list">
    <li>Hello</li>
    <li>World</li>
  </ul>
);

const root = (
  <div className="list">
    <div>第一个组件内容！</div>
    <img src="xxx.jpg" />
    {1 === 1 && <div>第二个组件内容！</div>}
  </div>
);

<ul className="list">
  {/* 1、单行注释 */}
  <li>第一个组件内容！</li> // 2、行尾注释
  <li>第二个组件内容！</li>
  {/*
        3、多行注释
        1
        2
        3
        */}
</ul>

const MyComponent = () => {
  const text = "Hello World！";
  return <div>{text}</div>;
};
export default MyComponent;

const MyComponent = () => {
  const isFinish = true;
  const calc = () => {
    const a = 1;
    const b = 2;
    return a + b;
  };
  return (
    <div>
      {/*1.运算符表达式*/}
      <span>2 + 3 的和为：{2 + 3}</span>
      {/*2.三元表达式*/}
      <span>家庭作业是否完成：{isFinish ? "是" : "否"}</span>
      {/*3.进行函数调用*/}
      <span>{calc()}</span>
    </div>
  );
};
export default MyComponent;

const MyComponent = () => {
  const title = "我是标题的全部内容！";
  const url = "https://www.baidu.com";
  const className = "span";
  return (
    <div>
      {/* 1、绑定普通属性 */}
      <h2 title={title}>我是标题...</h2>
      <a href={url}>百度一下</a>
      {/* 2.绑定class */}
      <span className={className}>我是span标签</span>
      <span className={["tag", "span"].join(" ")}>我是span标签2</span>
      {/* 3.绑定style */}
      <span style={{ color: "red", fontSize: 16 }}>我的字体颜色是红色</span>
    </div>
  );
};
export default MyComponent;

const MyComponent = () => {
  const onClick = () => {
    window.alert("您点击了按钮1");
  };
  return (
    <div>
      <button onClick={onClick}>按钮1</button>
      <button
        onClick={() => {
          window.alert("您点击了按钮2");
        }}
      >
        按钮2
      </button>
    </div>
  );
};
export default MyComponent;

const MyComponent = () => {
  const renderTitle = (key) => {
    if (key > 1) {
      return <span>我是标题1</span>;
    }
    return <span>我是标题2</span>;
  };
  return (
    <div>
      {renderTitle(2)}
      {2 > 1 ? <span>我会显示出来</span> : <span>我会隐藏</span>}
      {2 > 1 && <span>我会显示出来</span>}
    </div>
  );
};
export default MyComponent;

const MyComponent = () => {
  const array = ["1", "2", "3", "4"];
  return (
    <ul>
      {array.map((i) => (
        <li key={i}>{i}</li>
      ))}
    </ul>
  );
};
export default MyComponent;