https://zh-hans.react.dev/learn/describing-the-ui

组件导入导出

使用 JSX 书写标签语言

JSX → JavaScriptReact

JSX

1. 只能返回一个根元素 <div> ，如果不想莫名其妙多一个 div 可以使用 <></>

   这东西叫 Fragment

2. 标签必须闭合

   <ul> </ul> <li> </li> <img />

3. 使用驼峰命名法给 大部分属性命名

   className

JSX 中使用 JavaScript

• 使用引号传递字符串

• 在 JSX 的大括号内引用 JavaScript 变量

  只能在标签内和紧跟着= 后面

  export default function Avatar() {
    const avatar = '<https://i.imgur.com/7vQD0fPs.jpg>';
    const description = 'Gregorio Y. Zara';
    return (
      <img
        className="avatar"
        src={avatar}
        alt={description}
      />
    );
  }
  

• 在 JSX 的大括号内调用 JavaScript 函数

• 在 JSX 的大括号内使用 JavaScript 对象

将 Props 传递给组件

props → property properties

// 不要忘记 ( 和 ) 之间的一对花括号 { 和 }  ：
function Avatar({ person, size = 100 }) {
  // ...
}

在 children prop 中传递 JSX 代码

function Card({ children }) {
  return (
    <div className="card">
      <div className="card-content">
        {children}
      </div>
    </div>
  );
}

export default function Profile() {
	return (
		<>
			<Card>
				<h1>this is a children content.</h1>
				<p>nothing here.</p>
			</Card>
		</>
	);
}