React入门：初学者指南

React，这个风靡开发界的JavaScript库，简化了构建交互式用户界面的过程，适用范围涵盖网页、移动端和桌面平台。全球众多公司，包括Netflix和Airbnb等巨头，都在使用React。

本指南将带您快速入门React，并讲解其核心概念。我们将利用Create React App工具快速搭建项目，并逐步构建一个简单的React应用。学习结束后，您将掌握React基础知识，并为进一步学习做好准备。

前提条件

学习React之前，最好具备HTML、CSS和JavaScript的基础知识。了解Node.js和npm包管理器也有助于学习。

本教程需要在您的机器上安装Node和npm。您可以访问Node.js下载页面下载所需版本（npm与Node捆绑在一起）。或者，您可以参考我们的教程，使用版本管理器安装Node。

关键要点

• React是一个专注于构建用户界面的JavaScript库，被Netflix和Airbnb等公司广泛使用。
• 开始学习React之前，需要具备HTML、CSS、JavaScript、Node.js和npm的基础知识。
• React应用围绕可复用的组件构建，组件可以是基于类的，也可以是基于函数的，后者由于Hooks的出现而越来越流行。
• React的虚拟DOM通过根据UI组件状态的变化高效地更新HTML DOM来提高性能。
• JSX是React中使用的语法扩展，允许在JavaScript文件中编写类似HTML的代码，从而增强开发体验和可读性。
• React组件可以直接使用内联样式或外部CSS进行样式设置，它们可以是无状态（展示型）组件或有状态（容器型）组件。

什么是React？

React是一个用于构建UI组件的JavaScript库。与Angular或Vue等更完整的框架不同，React只处理视图层，因此您需要其他库来处理路由、状态管理等方面。本指南将重点介绍React的开箱即用功能。

React应用使用可复用的UI组件构建，这些组件可以相互交互。React组件可以是基于类的组件，也可以是所谓的函数组件。基于类的组件使用ES6类定义，而函数组件是基本的JavaScript函数。这些函数通常使用箭头函数定义，但也可以使用function关键字。基于类的组件将实现一个render函数，该函数返回一些JSX（React对常规JavaScript的扩展，用于创建React元素），而函数组件将直接返回JSX。如果您从未听说过JSX，也不用担心，我们稍后会详细介绍。

React组件还可以分为有状态组件和无状态组件。无状态组件的工作只是显示它从父React组件接收的数据。如果它接收任何事件或输入，它可以简单地将这些事件或输入传递给其父组件来处理。

另一方面，有状态组件负责维护某种应用程序状态。这可能涉及从外部来源获取数据，或跟踪用户是否登录。有状态组件可以响应事件和输入来更新其状态。

根据经验，您应该尽可能编写无状态组件。这些组件更容易在您的应用程序和其它项目中重用。

理解虚拟DOM

在开始编码之前，您需要知道React使用虚拟DOM来处理页面渲染。如果您熟悉jQuery，您知道它可以通过HTML DOM直接操作网页。在许多情况下，这种直接交互几乎不会产生任何问题。但是，对于某些情况，例如运行高度交互的实时Web应用程序，性能可能会受到很大的影响。

为了解决这个问题，发明了虚拟DOM（真实DOM的内存表示），目前许多现代UI框架（包括React）都在使用它。与HTML DOM不同，虚拟DOM更容易操作，并且能够在毫秒内处理大量操作而不会影响页面性能。React定期比较虚拟DOM和HTML DOM。然后计算差异，并将其应用于HTML DOM以使其与虚拟DOM匹配。通过这种方式，React确保您的应用程序以稳定的60帧每秒的速度渲染，这意味着用户几乎不会遇到任何延迟。

启动一个空白的React项目

根据前提条件，我假设您已经设置了Node环境，并安装了最新版本的npm（或可选的Yarn）。

接下来，我们将使用Create React App构建我们的第一个React应用程序，这是一个创建单页React应用程序的官方实用程序脚本。

现在让我们安装它：

<code>npm i -g create-react-app</code>

然后用它创建一个新的React应用。

<code>create-react-app message-app</code>

根据您的互联网连接速度，如果这是您第一次运行create-react-app命令，这可能需要一段时间才能完成。在此过程中会安装许多包，这些包是设置方便的开发环境所必需的——包括Web服务器、编译器和测试工具。

如果您不想全局安装太多包，也可以使用npx，它允许您下载并运行包而无需安装它：

<code>npx i -g create-react-app</code>

运行这两个命令中的任何一个都应该输出类似以下内容：

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

项目设置过程完成后，执行以下命令启动您的React应用程序：

<code>cd message-app
npm start</code>

您应该看到以下输出：

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

您的默认浏览器应该自动启动，您应该看到这样的屏幕：

现在我们已经确认了我们的入门React项目运行没有错误，让我们来看看幕后发生了什么。您可以使用您喜欢的代码编辑器打开文件夹message-app。让我们从package.json文件开始：

<code>npm i -g create-react-app</code>

如您所见，Create React App已经为我们安装了几个依赖项。前三个与React测试库有关，它（正如您可能猜到的那样）使我们能够测试我们的React代码。然后我们有react和react-dom，这是任何React应用程序的核心包，最后是react-scripts，它设置开发环境并启动服务器（您刚才已经看到）。

然后是四个npm脚本，用于自动化重复性任务：

• start 启动开发服务器
• build 创建应用程序的生产就绪版本
• test 运行上面提到的测试
• eject 将暴露应用程序的开发环境

最后一条命令值得详细说明。Create React App工具在您的实际代码和开发环境之间提供了清晰的区分。如果您运行npm run eject，Create React App将停止隐藏它在幕后所做的工作，并将所有内容转储到项目的package.json文件中。虽然这使您可以更精细地控制应用程序的依赖项，但我建议您不要这样做，因为您必须管理构建和测试项目中使用的所有复杂代码。如果需要，您可以使用customize-cra来配置构建过程，而无需弹出。

Create React App还支持ESLint（从eslintConfig属性可以看出），并使用react-app ESLint规则进行配置。

package.json文件的browserslist属性允许您指定应用程序将支持的浏览器列表。此配置由PostCSS工具和Babel等转换器使用。

Create React App最酷的功能之一是它开箱即用地提供热重载。这意味着我们对代码所做的任何更改都会导致浏览器自动刷新。对JavaScript代码的更改将重新加载页面，而对CSS的更改将更新DOM而无需重新加载。

现在，让我们首先通过按Ctrl C停止开发服务器。服务器停止后，删除src文件夹中serviceWorker.js和setupTests.js文件以外的所有内容。如果您有兴趣了解服务工作者的作用，可以在这里了解更多信息。

除此之外，我们将从头开始创建所有代码，以便您可以理解src文件夹中的所有内容。

介绍JSX语法

React文档将JSX定义为“JavaScript的语法扩展”，它使编写React组件变得容易。使用JSX，我们可以像处理标准JavaScript值一样传递HTML结构或React元素。

这是一个简单的例子：

<code>create-react-app message-app</code>

注意这一行const message = <h1>I'm a heading</h1>;。这就是JSX。如果您尝试在Web浏览器中运行它，它会给您一个错误。但是，在React应用程序中，JSX由转换器（例如Babel）解释，并渲染为React可以理解的JavaScript代码。

注意：您可以在我们的教程“JSX入门”中了解更多关于JSX的信息。

过去，React JSX文件曾经使用.jsx文件扩展名。现在，Create React App工具使用.js文件扩展名生成React文件。虽然仍然支持.jsx文件扩展名，但React维护者建议使用.js。但是，还有一组反对的React开发人员（包括我自己），他们更喜欢使用.jsx扩展名，原因如下：

• 在VS Code中，Emmet可以开箱即用地用于.jsx文件。但是，您可以配置VS Code将所有.js文件视为JavaScriptReact，以使Emmet能够在这些文件上工作。
• 标准JavaScript和React JavaScript代码有不同的棉绒规则。

但是，在本教程中，我将遵守Create React App提供的内容，并坚持使用.js文件结尾。

React中的“Hello, World！”

让我们开始编写一些代码。在新建的message-app的src文件夹中，创建一个index.js文件并添加以下代码：

<code>npm i -g create-react-app</code>

再次使用npm start或yarn start启动开发服务器。您的浏览器应该显示以下内容：

这是最基本的“Hello World”React示例。index.js文件是项目的根目录，React组件将在其中呈现。让我解释一下代码是如何工作的：

• 第1行：导入React包以处理JSX处理。
• 第2行：导入ReactDOM包以呈现根React组件。
• 第3行：调用render函数，传入：
  • <h1>Hello World</h1>：一个JSX元素
  • document.getElementById('root')：一个HTML容器（JSX元素将在此处呈现）。

HTML容器位于public/index.html文件中。在第31行，您应该看到<div></div>。这被称为根DOM节点，因为其中的所有内容都将由React虚拟DOM管理。

虽然JSX看起来很像HTML，但有一些关键区别。例如，您不能使用class属性，因为它是一个JavaScript关键字。相反，使用className代替。此外，诸如onclick之类的事件在JSX中拼写为onClick。现在让我们修改我们的Hello World代码：

<code>npm i -g create-react-app</code>

我已经将JSX代码移到名为element的常量变量中。我还将h1标签替换为div标签。为了使JSX工作，您需要将元素包装在一个父标签中。

看看下面的例子：

<code>create-react-app message-app</code>

上面的代码不起作用。您将收到一个语法错误，指示您必须将相邻的JSX元素包含在封闭标签中。像这样：

<code>npx i -g create-react-app</code>

如何在JSX中计算JavaScript表达式？很简单。只需使用花括号，如下所示：

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

……或者像这样：

<code>cd message-app
npm start</code>

更新您的代码并确认浏览器显示“Hello, Jane Doe”。尝试其他示例，例如{5 2}<code>{5 2}。既然您已经掌握了JSX的基础知识，让我们继续创建一个React组件。

声明React组件

上面的例子是一种简单的方法，向您展示了ReactDOM.render()是如何工作的。通常，我们将所有项目逻辑封装在React组件中，然后将其传递给ReactDOM.render函数。

在src文件夹中，创建一个名为App.js的文件并键入以下代码：

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

在这里，我们通过定义一个JavaScript类来创建一个React组件，该类是React.Component的子类。我们还定义了一个render函数，该函数返回一个JSX元素。您可以将其他JSX代码放在<div><code><div>标签中。接下来，使用以下代码更新src/index.js，以便在浏览器中看到反映的更改： <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-json&quot;&gt;{ &quot;name&quot;: &quot;message-app&quot;, &quot;version&quot;: &quot;0.1.0&quot;, &quot;private&quot;: true, &quot;dependencies&quot;: { &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;, &quot;@testing-library/react&quot;: &quot;^9.3.2&quot;, &quot;@testing-library/user-event&quot;: &quot;^7.1.2&quot;, &quot;react&quot;: &quot;^16.13.1&quot;, &quot;react-dom&quot;: &quot;^16.13.1&quot;, &quot;react-scripts&quot;: &quot;3.4.3&quot; }, &quot;scripts&quot;: { &quot;start&quot;: &quot;react-scripts start&quot;, &quot;build&quot;: &quot;react-scripts build&quot;, &quot;test&quot;: &quot;react-scripts test&quot;, &quot;eject&quot;: &quot;react-scripts eject&quot; }, &quot;eslintConfig&quot;: { &quot;extends&quot;: &quot;react-app&quot; }, &quot;browserslist&quot;: { &quot;production&quot;: [ &quot;&gt;0.2%&quot;, &quot;not dead&quot;, &quot;not op_mini all&quot; ], &quot;development&quot;: [ &quot;last 1 chrome version&quot;, &quot;last 1 firefox version&quot;, &quot;last 1 safari version&quot; ] } }&lt;/code&gt;</pre> <p>首先，我们导入App组件。然后我们使用JSX格式呈现App，如下所示：<code><app></app><code><app></app>。这是必需的，以便JSX可以将其编译为可以推送到React DOM的元素。保存更改后，查看您的浏览器以确保它呈现正确的消息。

接下来，我们将了解如何应用样式。

设置JSX元素的样式

有各种方法可以设置React组件的样式。在本教程中，我们将介绍两种方法：

1. JSX内联样式
2. 外部样式表

以下是我们如何实现JSX内联样式的示例：

<code class="language-javascript">import React from 'react';

export default function App() {
  const message = <h1>I'm a heading</h1>;  //JSX FTW!
  return ( message );
}</code>

React样式看起来很像常规CSS，但有一些关键区别。例如，headerStyle是一个对象文字。我们不能像平时那样使用分号。此外，为了使它们与JavaScript语法兼容，许多CSS声明已经更改。例如，我们使用textDecoration代替text-decoration。基本上，对于所有CSS键都使用驼峰式命名法，但供应商前缀（如WebkitTransition）除外，供应商前缀必须以大写字母开头。

我们也可以这样实现样式：

<code>npm i -g create-react-app</code>

第二种方法是使用外部样式表。默认情况下，已经支持外部CSS样式表。如果您想使用Sass等预处理器，请查阅文档以了解如何配置它。

在src文件夹中，创建一个名为App.css的文件并键入以下代码：

<code>create-react-app message-app</code>

在src/App.js文件顶部的添加以下导入语句：

<code>npx i -g create-react-app</code>

保存后，您应该会看到浏览器上的文本内容大小发生了巨大变化。您也可以使用CSS类，如下所示：

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

按如下方式更新src/App.js：

<code>cd message-app
npm start</code>

我们不能使用HTML的class属性，因为它是一个保留的JavaScript关键字。相反，我们使用className。以下是您预期的输出：

既然您已经学习了如何向React项目添加样式，让我们继续学习无状态和有状态React组件。

无状态与有状态组件

无状态组件，也称为哑组件，只是一个显示信息的组件。它不包含任何操作数据的逻辑。它可以接收来自用户的事件，然后将其传递给父容器进行处理。

创建文件message-view.js并将以下示例代码复制到其中。这是一个哑组件的完美示例（尽管从技术上讲它更像是一个静态组件）：

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

接下来，使用以下代码向src/App.css添加一些基本样式：

<code class="language-json">{
  "name": "message-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}</code>

最后，修改src/App.js，使整个文件如下所示：

<code class="language-javascript">import React from 'react';

export default function App() {
  const message = <h1>I'm a heading</h1>;  //JSX FTW!
  return ( message );
}</code>

到目前为止，代码应该非常容易理解，因为我已经解释了到目前为止涉及的概念。现在查看您的浏览器，您应该得到以下结果：

我们之前提到过，React同时提供基于类和基于函数的组件。我们可以使用函数语法重写MessageView，如下所示：

<code class="language-javascript">import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));</code>

请注意，我已经删除了Component导入，因为在函数语法中不需要它。这种样式一开始可能会令人困惑，但您很快就会了解到，这样编写React组件的速度更快。

此外，随着React Hooks的出现，这种编写React组件的样式越来越流行。

通过Props传递数据

您已经成功创建了一个无状态React组件。但是，它还不完整，因为它还需要做一些额外的工作才能与有状态组件或容器正确集成。目前，MessageView显示的是静态数据。我们需要修改它，以便它可以接受输入参数。我们使用所谓的props来实现这一点——我们将从父组件传递下来的数据。

首先，像这样更改MessageView组件：

<code>npm i -g create-react-app</code>

这里需要注意的主要内容是我们如何定义message变量。我们将其赋值为this.props.message，我们将从有状态的父组件传递下来。然后，在我们的JSX中，我们可以引用我们的message变量并将其输出到页面。

现在让我们为MessageView创建一个父组件。创建一个名为message-list.js的新文件并添加以下代码：

<code>create-react-app message-app</code>

在这里，我们使用state来存储一个包含我们消息的对象。React的魔力在于，当state对象发生变化时，组件将重新渲染（从而更新UI）。

然后，在我们的JSX中，我们将state对象的message属性传递给MessageView组件。

最后一步是更新我们的App组件以呈现新的有状态MessageList组件，而不是无状态的MessageView组件：

<code>npx i -g create-react-app</code>

保存更改后，检查您的浏览器以查看结果。

花点时间确保您理解发生了什么。我们在（有状态）MessageList组件中声明一个state对象。该对象的message属性包含我们的消息。在我们的render函数中，我们可以使用所谓的props将该消息传递给我们的（无状态）子组件。

在（无状态）MessageView组件中，我们可以使用this.props.message访问该消息。然后，我们可以将此值传递给我们的JSX以渲染到页面。

呼！

Prop检查

随着应用程序的增长以及数据作为props来回传递，验证组件是否接收了它们期望的数据类型将非常有用。

幸运的是，我们可以使用prop-types包来实现这一点。要快速查看它的实际示例，请按如下方式更改我们的MessageView组件：

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

如果缺少message prop，这将导致您的React应用程序报错。如果组件接收的对象不是对象，它也会导致报错。

您可以通过像这样更改父组件的状态来尝试：

<code>cd message-app
npm start</code>

返回您的浏览器并打开控制台。您应该看到以下内容记录在控制台中：

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

组件重用

现在让我们看看如何使用MessageView实例显示多条消息。这就是React开始闪光的地方，因为它使代码重用变得非常容易（您将看到）。

首先，我们将state.message更改为数组并将其重命名为messages。然后，我们将使用JavaScript的map函数生成多个MessageView组件实例，每个实例对应于state.messages数组中的一个消息。

我们还需要使用一个名为key的特殊属性填充一个唯一值，例如id。React需要这个来跟踪列表中哪些项目已更改、添加或删除。

按如下方式更新MessageList代码：

<code class="language-json">{
  "name": "message-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}</code>

检查您的浏览器以查看结果：

如您所见，使用React定义构建块以创建功能强大且复杂的UI界面很容易。

重构为使用React Hooks

Hooks是React的最新版本，但它们正在席卷React世界。简单来说，它们使将React函数组件添加状态（以及其他功能）成为可能。

我将通过将MessageView组件重构为函数组件来结束本教程，该组件使用React Hooks管理其状态。请注意，只有在使用React v16.8及更高版本时才有可能。

<code>npm i -g create-react-app</code>

在上面的示例中，我已经用useState React Hook替换了state对象。顾名思义，这允许您管理组件的状态。

使用Hooks将帮助您在处理大型项目时避免所谓的prop drilling。Prop drilling会让您将props传递给多个组件（最终不需要这些数据），只是为了到达一个深度嵌套的组件。

我们还可以将MessageView组件转换为函数组件：

<code>create-react-app message-app</code>

请注意，我们现在如何在组件中接收message prop：

<code>npx i -g create-react-app</code>

这利用了一种称为对象解构的技术，它允许您从数组或对象中提取单个项目，并将它们使用简写语法放入变量中。

我们在这里也采用同样的技术，从message对象中获取我们需要的值，并避免在所有内容前加上message：

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

就是这样！

我不打算在本篇文章中进一步介绍React Hooks，只是让您知道它们的存在，并且它们在React社区中越来越受欢迎。如果您想了解更多关于Hooks的信息，请阅读我们的React Hooks入门指南。

演示

这是一个您可以使用的实时演示：

CodePen演示链接

后续学习

我们现在已经完成了本入门指南。还有很多React概念我没有涵盖，例如数据获取、错误处理、路由、使用表单、调试等等。列表还在继续……

好消息是，我们在SitePoint Premium上有很多很棒的React内容，以及我们博客上的许多优秀文章。我鼓励您查看它们并构建一些很棒的东西。

关于React入门的常见问题解答 (FAQs)

学习React的前提条件是什么？

在开始学习React之前，掌握扎实的JavaScript知识非常重要，因为React是一个JavaScript库。您应该熟悉ES6特性、闭包、异步编程和this关键字等概念。HTML和CSS知识也是必不可少的，因为您将使用JSX，这是一种类似于HTML的JavaScript语法扩展。熟悉Node.js和npm（Node包管理器）也很有益，因为它们通常用于React开发中的包管理和执行脚本。

如何为React设置开发环境？

要为React设置开发环境，您首先需要安装Node.js和npm。安装完成后，您可以使用Create React App命令行工具创建一个新的React应用程序。它设置您的开发环境，以便您可以使用最新的JavaScript特性，提供良好的开发体验，并优化您的应用程序以用于生产。您还需要一个文本编辑器，如Visual Studio Code和一个Web浏览器来测试您的应用程序。

什么是JSX，为什么它在React中很重要？

JSX代表JavaScript XML。它是Facebook开发的JavaScript语法扩展，允许我们在React中编写HTML。JSX使在React中编写和添加HTML变得更容易。没有它，您的JavaScript代码将难以阅读和编写。它还有助于使代码模块化，更容易理解和维护。

React中的组件是什么？

组件是任何React应用程序的构建块。React中的组件是一段可重用的代码，它控制UI的一部分。每个组件都是独立的，可以组合起来创建复杂的UI。React组件通常用JSX编写，并且可以维护自己的状态和props。

React中的状态和props有什么区别？

在React中，状态和props都是JavaScript对象。虽然它们都保存影响render输出的信息，但在组件方面，它们的功能不同。Props（属性的缩写）是将数据从父组件传递到子组件的一种方式，它们是只读的，不应由子组件更改。另一方面，状态是在组件内部管理的，可以在组件内部更改。

React如何处理事件？

React事件使用camelCase命名，而不是小写。使用JSX时，您将函数作为事件处理程序传递，而不是字符串。例如，HTML click事件在JSX中写为onClick。React还有一个合成事件系统，这意味着它有自己的事件系统，与W3C事件系统完全兼容。

React中键的意义是什么？

React中的键用于识别其对应的驱动渲染数据的唯一虚拟DOM元素。它们帮助React通过循环使用现有的DOM元素来优化渲染。键必须是唯一的数字或字符串，使用重复的键可能会破坏您的应用程序。

React中的上下文API是什么？

上下文API是React提供的组件结构，它使我们能够在应用程序的所有级别共享特定形式的数据。它的目标是解决prop drilling的问题。

Redux是什么，它与React有什么关系？

Redux是一个可预测的状态容器，旨在帮助您编写JavaScript应用程序，这些应用程序在客户端、服务器和原生环境中都能始终如一地运行，并且易于测试。虽然它主要用作React的状态管理工具，但您可以将其与任何其他JavaScript框架或库一起使用。

React中的Hooks是什么？

Hooks是React 16.8中新增的功能，允许您在不编写类的情况下使用状态和其他React功能。Hooks是函数，允许您从函数组件“钩入”React状态和生命周期功能。它们不能在类中工作——它们允许您在没有类的情况下使用React。

请注意，以上内容对原文进行了改写和润色，力求在不改变原意的情况下提高可读性和流畅性。 图片格式保持不变。 由于无法直接访问网络图片，图片链接保持原样。