如何创建 React 应用程序

React 是 Facebook 开发的一个用于构建用户界面的强大 JavaScript 库。它简化了创建动态、交互式 Web 应用程序的过程。本指南将引导您从头开始创建 React 应用程序。

先决条件

开始之前，请确保您的系统上已安装以下软件：

1. Node.js 和 npm：

   • 下载并安装 Node.js（Node.js 中包含 npm）。
   • 验证安装：

    node -v
    npm -v
   

2. 文本编辑器：
   
   使用您选择的任何代码编辑器，例如 Visual Studio Code.

第 1 步：安装 create-react-app

create-react-app 是 React 团队的官方工具，用于快速设置一个具有良好默认配置的新 React 项目。

• 打开终端或命令提示符并全局安装 create-react-app：

  npm install -g create-react-app

第 2 步：创建一个新的 React 应用

1. 导航到您的项目目录： 选择您希望项目驻留的位置。例如：

   cd Desktop

1. 创建 React 应用程序： 将 todolist 替换为您想要的项目名称：

   npx create-react-app todolist

• 此命令创建一个新文件夹 (todolist)，其中包含所有必需的文件和依赖项。

1. 导航到项目文件夹：

   cd todolist

第3步：启动开发服务器

运行以下命令启动开发服务器：

npm start

• 您的默认浏览器应该自动打开，并在 http://localhost:3000 显示 React 应用程序。
• 如果没有，请手动打开浏览器并转到该地址。

第 4 步：探索项目结构

以下是 create-react-app 创建的文件和文件夹的概述：

 node -v
 npm -v

第 5 步：修改你的 React 应用

1. 编辑主组件（App.js）： 在文本编辑器中打开 src/App.js 并自定义 JSX 来更改内容：

  npm install -g create-react-app

1. 保存更改并查看更新： 保存后，浏览器会自动刷新以反映您的更改。

结论

恭喜！您已成功创建并运行您的第一个 React 应用程序。此设置为构建强大的、基于组件的 Web 应用程序提供了坚实的基础。探索 React 组件、状态管理和钩子以进一步提高您的技能！

以上是如何创建 React 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！