React 导入与导出
React 组件 

React JSX

JSX 是 React 中使用的一种 JavaScript 语法扩展，它允许我们在 JavaScript 代码中编写类似 XML 的结构，用于描述用户界面的结构。

JSX 的特点和优势：

  • XML-like 语法：JSX 允许开发者使用类 XML 的语法编写 React 元素。这使得代码更加清晰和易于理解。

  • JavaScript 表达式：在 JSX 中可以嵌入 JavaScript 表达式，通过 {} 将表达式包裹起来，例如 {variable}、{2 + 2}、{functionName()} 等。

  • 表达力：JSX 支持所有的 HTML 标签（如 <div>、<h1> 等）和自定义 React 组件，使得构建复杂 UI 变得更加直观和灵活。

  • 类型安全：JSX 在编译时会被转换为普通的 JavaScript 函数调用，并进行类型检查，有助于发现代码中的错误。


JSX 的基本语法：

1、HTML 标签：可以直接在 JSX 中使用 HTML 标签，如 <div>、<span>、<h1> 等。

const element = <div>
  <h1>Hello, JSX!</h1>
  <p>This is a paragraph.</p>
</div>;


2、JavaScript 表达式：可以在 JSX 中使用 {} 包裹 JavaScript 表达式。

const name = 'Jerry';
const element = <h1>Hello, {name}!</h1>;


3、属性：可以在 JSX 元素上使用属性，属性值可以是字符串或表达式。

const imgUrl = 'https://example.com/img.jpg';
const element = <img src={imgUrl} alt="Example Image" />;


4、样式：使用对象形式的 style 属性来定义内联样式。

const style = {
  color: 'red',
  fontSize: '20px'
};
const element = <p style={style}>Styled paragraph</p>;


5、条件渲染：使用 JavaScript 的条件语句（如 if、else）或三元表达式来进行条件渲染。

const isLoggedIn = true;
const element = isLoggedIn ? <p>Welcome, user!</p> : <p>Please log in.</p>;


注意事项：

  • JSX 不是必须的，你可以完全使用纯 JavaScript 来构建 React 应用，但 JSX 通常能够提升代码的可读性和开发效率。

  • JSX 并不是真正的 HTML，它会被 Babel 等工具编译为普通的 JavaScript 函数调用，这些函数会创建真实的 DOM 元素。

  • JSX 的语法比 HTML 更严格。类似 <br /> 这样的标签是必须要关闭的。并且，组件也不能返回多个并列最高层级的 JSX 标签，你必须为所有最高层级的标签添加一个共同的父标签，例如使用 <div>...</div> 或 <>...</> 作为父标签。


React 开发中广泛使用 JSX，它简化了与 JavaScript 结合使用的 UI 开发过程，使得组件的构建更加直观和灵活。