ReactJS 入门

ReactJS 是一个用于构建用户界面和单页应用程序的流行前端库。在本文中，我们将探讨 ReactJS 的基础知识，并从零开始创建一个完整的项目。

设置项目

首先，我们需要在计算机上安装 Node.js 和我们选择的代码编辑器。在这个例子中，我们将使用 Visual Studio Code。我们创建一个名为 "react-youtube" 的新文件夹，并直接在 Visual Studio Code 中打开它。

设置项目

然后，我们在 Visual Studio Code 中直接打开终端，并使用 Vite（比 Create React App 更快）来运行以下命令：npm create vite@latest my-react-app。这将创建一个新 React 项目。

创建第一个组件

我们从创建一个名为 WelcomeMessage.jsx 的新组件开始。我们在 components 文件夹中创建这个文件夹，用于存放所有组件。在 WelcomeMessage.jsx 文件中，我们导出一个返回 JSX 代码片段的函数。

创建第一个组件

然后，我们打开 App.jsx 文件并导入 WelcomeMessage 组件。我们在 App.jsx 文件中调用 WelcomeMessage 组件，并传递一个 message 属性。

向组件传递 Props

我们介绍了 Props 的概念，它允许我们向同一个组件传递不同的参数。我们向 WelcomeMessage 组件传递一个 message 属性，并使用它来显示动态消息。

向组件传递 Props

创建计数器组件

我们创建一个名为 Counter.jsx 的新组件，并使用 useState 钩子来创建一个状态变量 count。然后，我们使用 setCount 函数在点击按钮时递增 count 变量。

创建计数器组件

使用 useState 钩子

我们介绍了 useState 钩子，它允许我们创建一个状态变量和一个更新该变量的函数。我们使用 useState 钩子来创建一个状态变量 count 和一个更新它的函数 setCount。

使用 useState 钩子

从 API 获取数据

我们介绍了 useEffect 钩子，它允许我们在组件挂载时从 API 获取数据。我们使用 useEffect 钩子从 Random User API 获取数据并显示用户的姓名和图像。

从 API 获取数据

结论

总之，我们从零开始创建了一个完整的 React 项目。我们学习了如何创建组件、向组件传递 props、使用 useState 钩子以及使用 useEffect 钩子从 API 获取数据。

结论

作为最终项目，我们创建了一个允许用户添加和删除任务的待办事项列表组件。我们使用 useState 钩子创建了一个状态变量 tasks 和一个更新它的函数 setTasks。

最终项目

希望本文对您有所帮助。如果您有任何问题或想了解更多关于 React 的内容，请在下面留言。