学习 React 的基础知识：踏上构建动态 Web 应用程序的旅程

React 学习笔记（基础篇）

在现代 Web 开发领域中，React 以其强大的功能、可扩展性和广泛的社区支持而备受推崇。作为一名初学者，学习 React 的基础知识至关重要，这将为您踏上构建动态和交互式 Web 应用程序的旅程奠定坚实的基础。

了解 React 的核心概念

React 是一个开源的 JavaScript 库，由 Facebook 创建并维护。它基于一种称为“组件”的理念，组件是可复用的代码块，用于构建用户界面。

组件 可以是函数式组件（使用 JavaScript 函数定义）或类组件（使用 ES6 类定义）。它们接受输入（称为“props”）并返回 React 元素，这些元素了要渲染到 DOM 中的 UI。

React 遵循“单向数据流”原则，这意味着数据从组件的父级向子级流动。通过这种方式，可以轻松维护应用程序的状态并进行更改跟踪。

认识 JSX

JSX（JavaScript XML）是一种语法扩展，允许您在 JavaScript 代码中编写 HTML 标记。它使创建 React 元素变得更加容易，因为您可以直接在 JavaScript 中编写 UI 标记。

但是，使用 JSX 时需要记住一些重要事项：

• 不要在 JavaScript 表达式的大括号外再加引号。
• React 元素是创建开销极小的普通对象，与浏览器的 DOM 元素不同。

实践组件构建

让我们构建一个简单的 React 组件，它将显示一个带有标题和的卡片：

import React from "react";

const Card = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
};

export default Card;

在这个组件中，props.title 和 props.description 存储了标题和描述数据，它们通过组件的父级传递。

使用 Hooks

Hooks 是 React 16.8 版本中引入的一个强大特性。它们允许您在函数式组件中使用状态和生命周期方法，而无需编写类组件。

例如，以下代码使用 useState hook 来管理一个名为 count 的状态：

import React, { useState } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;