X 基础语法（三）：React、JSX、渲染和样式

React 是一个流行的 JavaScript 库，用于构建用户界面。它使用 JSX（JavaScript XML）来创建声明式 UI，使开发人员能够编写更简洁、更易于维护的代码。本指南将引导您了解 React、JSX、渲染和样式的基础知识，让您能够使用 X 基础语法构建动态 Web 应用程序。

React 简介

React 是一种声明式、组件化的 JavaScript 库，用于创建交互式用户界面。它使用虚拟 DOM（文档对象模型）来有效地更新 UI，仅重新渲染发生更改的部分，从而提高性能。React 还支持服务器渲染，允许在服务器上生成 HTML，以提高初始页面加载速度。

JSX

JSX 是 JavaScript 的语法扩展，允许您使用类似于 XML 的语法编写 React 组件。它使您能够将 HTML 和 JavaScript 混合在一起，创建声明式 UI。在 JSX 中，组件表示为带有属性的元素。例如：

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

React 渲染

React 使用 ReactDOM.render() 方法将组件渲染到 DOM 中。该方法将组件作为第一个参数，目标元素作为第二个参数。例如：

ReactDOM.render(<MyComponent />, document.getElementById("root"));

React 样式

可以通过多种方式向 React 组件添加样式：

• 内联样式： 使用 style 属性直接向组件添加样式。
• CSS 类： 将 CSS 类应用于组件元素。
• CSS 模块： 使用 CSS 模块生成唯一的类名，以避免样式冲突。
• 外部样式表： 将外部样式表链接到应用程序中，并使用 CSS 选择器选择组件。

实践示例

让我们创建一个简单的 React 应用程序，显示一条消息：“Hello, world!”。

import React from "react";
import ReactDOM from "react-dom";

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

ReactDOM.render(<MyComponent />, document.getElementById("root"));

保存此文件为 index.js 并使用 npm start 或 yarn start 运行它。您应该会在浏览器中看到消息：“Hello, world!”。

结论

本指南为您提供了 React、JSX、渲染和样式的基础知识。通过了解这些概念，您可以使用 X 基础语法构建动态和交互式 Web 应用程序。继续探索 React 的文档和教程，以进一步扩展您的知识并创建强大的用户界面。