React从基础入门到高级实战：React 基础入门 - JSX与组件基础

JSX 与组件基础

引言

在 React 开发中，JSX 和组件是两个最基础且核心的概念。JSX 是一种独特的语法，让你在 JavaScript 中编写类似 HTML 的代码，而组件则是 React 应用的基本构建块，帮助你将复杂的界面拆分为可复用的模块。本文将带你深入理解 JSX 的语法规则，并学习如何创建和使用 React 组件。通过本文，你将能够编写自己的组件，为后续的 React 开发打下坚实基础。

1. 什么是 JSX？

JSX（JavaScript XML）是 JavaScript 的语法扩展，允许你在代码中直接编写类似 HTML 的标签结构。它让 React 组件的 UI 编写变得直观且易读。

通俗比喻 ：

想象 JSX 是 JavaScript 的"画笔"，你可以用熟悉的 HTML 标签"画"出界面，而 React 会把这些"画"变成真实的网页元素。

基本示例：

jsx 复制代码

const element = <h1>Hello, React!</h1>;

这段 JSX 会在页面渲染一个 <h1> 标题。

2. JSX 语法规则

尽管 JSX 看起来像 HTML，但它有自己的规则：

标签必须闭合 ：所有标签都需要闭合，比如 <img> 要写成 <img />。
属性命名 ：使用 camelCase，例如 className（代替 HTML 的 class）、onClick（代替 onclick）。
嵌入表达式 ：用 {} 将 JavaScript 表达式嵌入 JSX，比如 {name} 或 {1 + 1}。
不支持 if-else ：不能直接在 JSX 中写 if-else，但可以用三元运算符或逻辑运算符。

示例：

jsx 复制代码

const name = "React";
const element = <p className="greeting">Hello, {name}!</p>;

渲染结果：<p> 标签显示 "Hello, React!"，并应用 greeting 类样式。

3. JSX 中的表达式

JSX 支持在 {} 中嵌入 JavaScript 表达式，比如变量、函数调用或运算。

示例：

jsx 复制代码

const user = { firstName: 'Jane', lastName: 'Doe' };
const fullName = () => user.firstName + ' ' + user.lastName;

const element = <p>欢迎, {fullName()}!</p>;

渲染结果："欢迎, Jane Doe!"。

注意：

{} 内只能放表达式，不能放语句（比如 if 或 for）。
可以嵌入数组，React 会自动展平渲染。

4. React 组件基础

React 应用由多个组件组成，每个组件负责渲染一小块 UI，可以组合成复杂界面。组件分为函数组件 和类组件，现代 React 更推荐使用函数组件。

4.1 函数组件

函数组件是一个返回 JSX 的 JavaScript 函数。

示例：

jsx 复制代码

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

props：父组件传递的数据对象。
组件名需大写开头，如 Welcome。

4.2 类组件（了解即可）

类组件使用 ES6 类语法，包含 render 方法返回 JSX。

示例：

jsx 复制代码

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

趋势：有了 Hooks，函数组件更简洁，已成为主流。

5. 组件的创建与复用

组件可以通过嵌套和复用构建复杂 UI。父组件通过 props 向子组件传递数据。

示例：

jsx 复制代码

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

function Welcome(props) {
  return <p>欢迎, {props.name}!</p>;
}

渲染结果：显示两条欢迎消息，分别是 "欢迎, Alice!" 和 "欢迎, Bob!"。

6. 实践：用户卡片组件

让我们通过一个简单的 UserCard 组件实践 JSX 和组件的使用。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React JSX 与组件基础</title>
  <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/babel-standalone@6/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function UserCard(props) {
      return (
        <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
          <h2>{props.name}</h2>
          <p>年龄: {props.age}</p>
          <p>职业: {props.job}</p>
        </div>
      );
    }

    function App() {
      return (
        <div>
          <UserCard name="Alice" age={25} job="工程师" />
          <UserCard name="Bob" age={30} job="设计师" />
        </div>
      );
    }

    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>
</html>

说明：

UserCard 组件接收 name、age 和 job 三个 props，渲染用户信息。
App 组件嵌套两个 UserCard，展示不同用户。
打开浏览器开发者工具，粘贴以上代码到 HTML 文件运行，即可看到效果。

7. 总结

本文介绍了 JSX 的语法规则和 React 组件的基本创建与使用。通过实践，你已经能编写简单的组件并组合它们。掌握这些基础将帮助你在 React 开发中更进一步。

有任何疑问，欢迎交流，一起进步！