AI工具能帮助我编写React代码吗？

是的。像 GitHub Copilot 和 ChatGPT 这样的助手可以生成组件、解释错误，并将类组件转换为 Hooks。务必检查生成的代码，因为 AI 可能会建议使用过时的 API，例如 ReactDOM.render。

ReactJS 初学者教程

⚡ 智能摘要

ReactJS 为无数现代网站和移动应用程序的用户界面提供支持。本页面将解释 ReactJS 库是什么、如何配置它，以及组件、JSX、状态、属性和事件如何协同工作。

⚛️ Foundation: ReactJS 是一个开源的、基于组件的框架。 JavaFacebook（现为 Meta）创建的脚本库，用于构建快速、交互式用户界面。
🧩 组件： 可重用的构建模块，以函数或类的形式编写，将 UI 逻辑拆分成独立、易于维护的部分。
📝 JSX： A Java脚本语法扩展允许您在同一个文件中编写类似 HTML 的标记和表达式。
🔄 州和提案： State 存储组件内部的私有、可变数据，而 props 将只读数据传递给组件。
⚙️ 设置路径： CDN脚本标签适合快速实验；npm包或Vite适合实际项目。
🚀 现代实践： 使用 Hooks 和 React 18+ createRoot API 的函数组件现在是推荐的标准。
💼 职业影响： React技能仍然是全球前端开发人员招聘信息中最受欢迎的技能之一。

什么是 ReactJS？

ReactJS 是一个开源前端 Java用于构建用户界面的脚本库。 ReactJS 它由 Meta（前身为 Facebook）以及众多开发者和公司组成的社区维护。它被广泛用作构建单页应用程序和移动应用程序的基础框架。它非常易于使用，并允许用户创建可重用的 UI 组件。

在编写第一行 React 代码之前，了解该库与普通 React 的区别很有帮助。 Java脚本。下一节将详细介绍其核心功能。

ReactJS 的功能

JSX： JSX 是……的扩展 Java脚本。虽然在 React 中使用 JSX 并非强制性的，但它是 React 的一个优点，而且易于使用。

组件成分就像纯 Java脚本函数通过将逻辑拆分成可重用的独立代码，简化了代码编写。我们可以将组件用作函数，也可以将组件用作类。组件还拥有状态和属性，这使得开发更加便捷。在类组件内部，状态和属性都得到了维护。

虚拟 DOM： React 会创建一个虚拟 DOM，也就是一个内存中的数据结构缓存。只有最终的更改才会更新到浏览器的 DOM 中，从而保持快速渲染。

Java脚本表达式： JS 表达式可以在 JSX 文件中使用花括号，例如 {}。

ReactJS 的优势

以下是使用 ReactJS 的一些重要优点/好处：

ReactJS 使用虚拟 DOM，它利用内存中的数据结构缓存，只有最终的更改才会更新到浏览器的 DOM 中。这使得应用程序运行速度更快。
您可以使用 React 组件功能创建所需的组件。这些组件可以重复使用，并且有助于代码维护。
ReactJS 是一个开源软件 Java脚本库，因此很容易上手。
ReactJS 在短时间内迅速流行起来，并为 Facebook 等产品提供支持。 Instagram它被许多知名公司使用，例如苹果公司。 Netflix等等。
Meta 负责维护 ReactJS 库，因此该库维护良好并保持更新。
ReactJS 可用于为桌面和移动应用程序开发丰富的 UI。
易于调试和测试，因为大多数编码都是在 JavaScript 而不是用HTML。

ReactJS 的缺点

以下是使用 ReactJS 的一些缺点/不足：

大部分代码是用JSX编写的，也就是说，HTML和CSS只是其中的一部分。 Java脚本。这可能会让人很困惑，因为大多数其他框架更喜欢 keeping HTML 与此分开 Java脚本代码。
ReactJS的文件大小相对较大。

了解了各种利弊之后，你就可以开始配置 React 了。最快捷的尝试方法是直接从 CDN 安装，我们首先介绍这种方法；基于 npm 的实际项目配置方法随后会介绍。

从 CDN 使用 ReactJS

要开始使用 React，我们首先需要将 ReactJS 添加到我们的页面中。借助 CDN，您可以轻松地开始使用 ReactJS。 Java脚本文件，如下所示。

请访问旧版 React 文档网站获取 CDN 链接，例如： https://legacy.reactjs.org/docs/cdn-links.html您将获得下图所示的所需文件。

对于开发者

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

对于产品

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

更换版本你需要为 react.development.js 和 react-dom.development.js 选择所需的 React 版本。本页使用的是版本 16，因此以下示例无需修改即可运行。

💡注意： 这些 UMD/CDN 构建版本是一种旧方法，适用于 React 18 及更早版本，并且仍然适合学习。React 19 不再提供 UMD 构建版本，React 18 及更高版本已取代了它们。 ReactDOM.render - createRoot — 请参阅本页末尾附近的 React 版本部分。

如果您计划使用 CDN 文件，请务必保留 crossorigin 属性以避免跨域问题。ReactJS 代码不能直接在浏览器中执行，需要使用 Babel 转译成纯文本。 Java在浏览器中执行脚本之前。

以下是可以使用的 BabelJS 脚本：

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

这是一个使用 CDN 文件和 BabelJS 脚本的 ReactJS 工作示例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

输出：

我们将在下一章深入探讨代码细节；现在让我们先看看它是如何与 CDN 文件配合使用的。直接使用 Babel 脚本并非最佳实践，新手目前应该只将其用于学习 ReactJS。在生产环境中，您需要使用 npm 包来安装 React。

使用 NPM 包

请确保您已安装 Node.js。如果尚未安装，请按照此 Node.js 教程进行操作（https://www.guru99.com/node-js-tutorial.html）安装。

安装好 Node.js 后，创建一个文件夹 反应项目/.

要开始项目设置，运行命令 npm初始化.

文件夹结构如下所示：

reactproj\
package.json

现在我们将安装我们需要的软件包。

以下是 ReactJS 的软件包列表。我们将 React 版本锁定在 16，因此 ReactDOM.render 本页示例的运行方式与所示完全相同：

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

打开命令提示符，并在 reactproj/ 文件夹中运行上述命令。

建立资料夹 src / 所有JS代码都将放在这里。ReactJS项目的所有代码都将位于src/文件夹中。创建一个名为index.js的文件，并导入react和react-dom，如下所示。

index.js

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

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

我们已经编写了 ReactJS 的基础代码。下一章将详细解释其细节。我们想要显示 你好， Guru99 教程同样，id 为“root”的 DOM 元素也采用了相同的设置。该设置取自 index.html 文件，即起始文件，如下所示。

创建一个名为 public/ 的文件夹，并在其中添加 index.html 文件，如下所示。

index.html的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

react-scripts 包会负责编译代码并启动服务器来显示 HTML 文件，即 index.html。您需要在 package.json 文件中添加相应的命令，以便使用 react-scripts 编译代码并启动服务器，如下所示：

 "scripts": {
    "start": "react-scripts start"
  }

安装完所有包，并添加上述命令后，最终的package.json如下：

包.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

要开始测试 ReactJS，请运行以下命令：

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

它会打开浏览器。 URL http://localhost:3000/ 如下图所示：

公共/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

我们将使用相同的流程来执行 Java后续章节中也会用到脚本文件。请将所有 .js 和 .jsx 文件添加到 src/ 文件夹中。文件结构如下：

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

如何创建你的第一个 React 项目设置

本 ReactJS 教程将一步步指导您如何开始创建第一个 React 应用程序。

步骤1） 导入反应包。
1. 要开始使用 ReactJS，我们需要首先导入 react 包，如下所示。

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

2. 将文件另存为 src/ 文件夹中的 index.js 文件。

步骤2） 写简单的 Code.
我们将在本教程中编写一段 React JS 简单代码，在其中显示消息 “你好，来自 Guru99 个教程！

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render 将添加将标签添加到 id 为 root 的元素上。以下是我们使用的 HTML 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

步骤3） 编译 Code.

接下来在本 React.js 教程中，我们需要编译代码以在浏览器中获取输出。

文件夹结构如下：

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

我们在package.json中添加了编译最终文件的命令如下：

"scripts": {
    "start": "react-scripts start"
  },

要编译最终文件，请运行以下命令：

npm run start

运行上述命令后，它将编译文件，并在出现任何错误时通知您。如果一切正常，它将打开浏览器并运行页面。 http://localhost:3000/

命令：npm run start：

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

步骤4） 检查输出。
此 URL http://localhost:3000 代码编译完成后，将在浏览器中打开，如下所示：

如何使用 Vite 配置 React（现代方法）

上述 react-scripts 配置来自 Create React App (CRA)，它曾是多年的标准启动器。React 团队已于 2025 年 2 月正式弃用 Create React App，因此新项目应该改用现代构建工具。目前最流行的选择是螺丝钉启动速度更快，生成的文件更小。

以下是如何使用 Vite 创建一个全新的 React 项目：

步骤1） 在终端中运行脚手架命令：

npm create vite@latest my-react-app -- --template react

步骤2） 进入文件夹并安装依赖项：

cd my-react-app
npm install

步骤3） 启动开发服务器：

npm run dev

Vite 提供该应用程序的服务 http://localhost:5173/ 默认情况下会重新加载，保存文件时会立即重新加载。

与此页面上的旧版本相比，主要区别如下：

条目文件是 src/main.jsx 而不是 src/index.js。
它安装了最新的 React，该 React 使用 创建根 而不是 ReactDOM.render。
index.html 文件位于项目根目录，而不是 public/ 目录。
构建过程使用以下方式进行： npm run build 放入 dist/ 文件夹。

对于路由和服务端渲染等全栈需求，React 团队还推荐了诸如以下框架： Next.js以下章节中你学到的所有内容——JSX、组件、状态和属性——都可以在 Vite 或 Next.js 项目中原封不动地应用。

什么是 JSX？

JSX 是……的扩展 Java脚本。这是一个模板脚本，您可以使用 HTML 和 Java共同编写剧本。

这是一个 JSX 代码的简单示例。

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

为什么我们需要 React 中的 JSX?

对于用户界面，我们需要 HTML，而 DOM 中的每个元素都需要处理事件、状态更改等。

以 React 为例，它允许我们使用 HTML 和 Java在同一个文件中编写脚本，并以高效的方式处理 DOM 中的状态更改。

JSX 中的表达式

这是一个如何在 JSX 中使用表达式的简单示例。

在之前的 ReactJS 示例中，我们曾编写过类似这样的代码：

index.js

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

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

现在我们将修改上面的代码以添加表达式。表达式用花括号 {} 括起来，并在运行时展开。React 中的表达式与……相同 Java脚本表达式。

index.js

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

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

现在让我们在浏览器中测试一下。

从上面的截图中可以看到，{display}表达式并没有被替换。当表达式在.js文件中使用时，React不知道该如何处理。

现在让我们添加更改并创建一个.jsx 文件，如下所示：

测试.jsx

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

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

我们已经添加了所需的代码，并将在 index.js 中使用 test.jsx 文件。我们希望 h1标签 该变量将在 index.js 中使用，因此与 test.jsx 中所示的变量相同，并已导出。

以下是 index.js 中的修改代码：

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

要在 index.js 中使用 test.jsx，我们必须先将其导入，如下所示：

import h1tag from './test.jsx';

我们现在可以在 ReactDOM.render 中使用 h1tag，如下所示：

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

以下是我们在浏览器中检查的输出：

ReactJS 中的组件是什么？

成分就像纯 Java脚本函数通过将逻辑拆分成可重用的独立代码，简化代码编写。

组件作为函数

测试.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

我们创建了一个名为您好该函数返回一个 h1 标签，如上所示。函数名充当一个元素，如下所示：

const Hello_comp = <Hello />;
export default Hello_comp;

组件您好用作 HTML 标签，例如：分配给 你好_comp 变量，并且使用 export 命令导出该变量。

现在让我们在 index.js 文件中使用此组件，如下所示：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

以下是浏览器中的输出：

类作为组件

这是一个使用类作为组件的 ReactJS 示例。

测试.jsx

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

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

我们可以在 index.js 文件中按如下方式使用 Hello 组件：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

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

Hello 组件用作 HTML 标签，例如：。

以下是相同的输出。

类组件与函数组件和钩子

现在您已经了解了编写组件的两种方法，那么应该使用哪一种呢？本页讲解类组件，因为它们明确地表达了状态和生命周期概念，这对初学者来说很有价值，而且在一些遗留代码库中仍然常见。然而，自从 React 16.8 引入 Hooks 以来，函数组件也可以管理状态，并且我们推荐所有新代码都使用函数组件。

方面	类组件	带钩子的函数组件
州	this.state 和 this.setState()	useState() 钩子
生命周期	componentDidMount、componentDidUpdate、componentWillUnmount	useEffect() 钩子涵盖了所有三个方面
句法	更多样板代码（构造函数、绑定、this）	更短，没有这个关键词
状态	支持传统样式	推荐用于新代码

以下是使用 useState Hook 重写的此页面中的状态示例：

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

两种版本输出结果相同。请学习以下章节中使用的类语法，然后练习将每个示例转换为 Hooks。

ReactJS 中的状态是什么？

一个州是 Java脚本对象，类似于 props，用于保存 ReactJS 渲染时要使用的数据。状态数据是一个私有对象，在类中的组件内使用。

州示例

以下是一个如何在类中使用状态的示例。

测试.jsx

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

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

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

这是我们在浏览器中测试的结果：

ReactJS 中的 Props 是什么？

props是组件内部可以使用的属性。它们充当全局对象或变量，可以在组件内部使用。

函数组件的 Props

下面是将 props 传递给函数组件的示例。

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

如上所示，我们已经添加了味精归因于组件。也可以通过以下方式访问：道具在 Hello 函数内部，这是一个将包含以下内容的对象：味精属性详情，同样作为表情使用。

该组件在index.js中的使用如下：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

以下是浏览器中的输出：

类组件的属性

要访问类中的 props，我们可以按如下方式操作：

测试.jsx

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

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

此味精在index.js中将属性传递给组件如下：

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

这是浏览器中的输出：

还检查： - AngularJS 初学者教程：逐步学习 AngularJS

组件的生命周期

了解了组件、状态和属性之后，下一步是理解 React 何时调用组件的方法。组件的生命周期分为初始化、挂载、更新和卸载四个阶段。

以下是对每个阶段的详细说明。

ReactJS 中的组件包含以下几个阶段：

初始化：这是组件生命周期的第一阶段。

这里将具有默认的道具和初始级别的状态。

安装在此阶段，组件会在 DOM 中渲染。我们可以在组件挂载状态下使用以下方法：

render()：所有创建的组件都有一个此方法。它返回 HTML 节点。
componentDidMount(): 此函数在组件添加到 DOM 后立即调用。

更新在这种状态下，用户与 DOM 进行交互，DOM 会随之更新。例如，当您在文本框中输入内容时，状态属性就会更新。

以下是更新状态下可用的方法：

shouldComponentUpdate()：在重新渲染之前调用；它允许您决定组件是否应该更新。返回 true 会重新渲染组件。
componentDidUpdate()：组件更新后调用。

卸载： 当组件不再需要或被移除时，就会出现这种状态。

以下是卸载状态下可用的方法：

componentWillUnmount(): 在组件被移除或销毁之前调用。

生命周期方法的工作实例

以下是一个工作示例，展示了每个阶段调用的方法。

例如：complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

当你在浏览器中查看输出时：

在浏览器控制台中，您会看到：

当用户在文本框中输入时：

控制台将显示以下消息：

现在您已经了解了组件何时渲染和更新，让我们将状态和事件应用到一个实际用例中：通过表单处理用户输入。

使用表单

在 ReactJS 中，HTML 输入元素，例如， <select /> 和 <select /> 都有自己的状态，需要在用户交互时使用 setState() 方法进行更新。

本章我们将学习如何在 ReactJS 中使用表单。

这是一个有效的例子：

表单.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

对于输入字段，我们需要维护状态，为此 React 提供了一个特殊的方法，名为 设置状态这有助于在状态发生变化时维护状态。在实际应用中，也需要调用 event.preventDefault() 在 formSubmit 中阻止浏览器在提交时重新加载页面。

我们在文本框和提交按钮上使用了 onChange 和 onClick 事件。当用户在文本框中输入内容时，会调用 onChange 事件，并更新状态对象中的 name 字段，如下所示：

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

浏览器中的输出如下：

步骤1） 请在文本框中输入您的姓名：

步骤2） 点击提交按钮：

在 ReactJS 中使用事件

表单只是用户交互的一种方式。在 ReactJS 中处理事件的方式与在其他平台相同。 Java脚本中，您可以使用所有事件处理程序。 Java脚本。setState() 方法用于在用户与任何 HTML 元素交互时更新状态。

以下是一个如何在 ReactJS 中使用事件的示例。

事件.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

对于输入字段，我们需要维护状态，为此 React 提供了…… 设置状态 该方法有助于在发生更改时维护状态。

我们利用了这些事件 onChange 和 的onClick 在文本框和按钮上。当用户在文本框中输入内容时， onChange 事件被调用，状态对象中的 name 字段被更新，如下所示：

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

以下是浏览器中的输出：

当用户输入姓名时：

当用户点击“单击此处”按钮时：

在 ReactJS 中使用内联 CSS

组件处理完数据和事件后，最后一步就是设置样式。我们将通过一个实际示例来理解 ReactJS 中的内联 CSS。

添加样式.jsx

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

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

我已将颜色：'red' 样式添加到 h1 标签中。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

浏览器中的输出如下：

您可以创建一个对象，并为其添加所需的样式，然后使用表达式来添加样式，如上面的示例所示。

在 ReactJS 中使用外部 CSS

让我们创建一个外部CSS文件。为此，请创建一个名为css/的文件夹，并将style.css文件添加到该文件夹中。

style.css文件

.h1tag {
color:red;
}

将 style.css 添加到 index.html 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

现在让我们把这个类添加到 .jsx 文件中的 h1 标签中。

添加样式.jsx

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

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

className 属性用于指定类的详细信息。请注意，JSX 使用 班级名称 而不是使用 HTML 的 class 属性，因为 class 是 HTML 中的保留关键字。 Java脚本已编写完成。现在让我们在浏览器中测试一下。

这是你在浏览器中检查 h1 标签时看到的内容：

您可以看到 class=”h1tag” 已成功添加到 h1 标签中。

为什么 ReactDOM.render 被 createRoot 取代了

本页上的所有示例都使用 `ReactDOM.render` 挂载应用程序，这对于 React 16 和 17（本课程的目标版本）来说是正确的。2022 年 3 月发布的 React 18 将该入口点替换为 `createRoot` API，而 React 19 则完全移除了 `ReactDOM.render`。原因在于并发性：`createRoot` 使 React 能够同时准备多个版本的 UI，中断低优先级渲染，并保持渲染的一致性。ping 动画流畅。自动批处理、useTransition 和基于 Suspense 的流媒体播放等功能都依赖于它。

本页面中使用的 index.js 的现代版本如下所示：

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

你在这里学到的其他所有内容——组件、JSX、状态、属性和事件——在入口点进行这一行代码更改后，都能以相同的方式工作。像这样的版本差异在很多情况下都会出现。 React JS面试题因此，了解这两个 API 是很有必要的。

常见问题

ReactJS 是一个库，而不是一个完整的框架。它只专注于构建用户界面。对于路由、数据获取和服务端渲染，开发者需要将其与 React Router 等工具或类似框架结合使用。 Next.js.

具有固体 Java掌握脚本基础知识后，大多数学习者只需两到四周的规律练习即可掌握组件、JSX、状态和属性。而要达到工作所需的水平，包括 Hooks、路由和 API 调用，通常需要两到三个月的时间来完成一些小型项目。

ReactJS 通过渲染到浏览器 DOM 来构建网站，而 React Native 使用相同的组件模型来构建原生 iOS 和 iOS 应用。 Android 应用程序之间可以进行技能迁移，但 React Native 用原生 UI 组件替换了 HTML 标签。

是的。例如助理。 GitHub 副驾驶和 ChatGPT 可以生成组件、解释错误，并将类组件转换为 Hooks。务必检查生成的代码，因为 AI 可能会建议使用过时的 API，例如 ReactDOM.render。

短期内不太可能。人工智能可以加速日常编码，但仍然需要开发人员来设计组件架构、管理应用程序状态、审查可访问性以及调试生产环境中的问题。学习 React 和人工智能辅助工作流程会让你更有价值，而不是更糟。

还检查： - 70 个最热门的 React 面试问题及答案（已更新）

ReactJS 初学者教程

什么是 ReactJS？

ReactJS 的功能

ReactJS 的优势

ReactJS 的缺点

从 CDN 使用 ReactJS

对于开发者

对于产品

使用 NPM 包

如何创建你的第一个 React 项目设置

如何使用 Vite 配置 React（现代方法）

什么是 JSX？

为什么我们需要 React 中的 JSX?

JSX 中的表达式

ReactJS 中的组件是什么？

组件作为函数

类作为组件

类组件与函数组件和钩子

ReactJS 中的状态是什么？

州示例

ReactJS 中的 Props 是什么？

函数组件的 Props

类组件的属性

组件的生命周期

生命周期方法的工作实例

使用表单

在 ReactJS 中使用事件

在 ReactJS 中使用内联 CSS

在 ReactJS 中使用外部 CSS

为什么 ReactDOM.render 被 createRoot 取代了

常见问题

总结一下这篇文章：

注册简报

什么是 ReactJS？

ReactJS 的功能

ReactJS 的优势

ReactJS 的缺点

相关文章

从 CDN 使用 ReactJS

对于开发者

对于产品

使用 NPM 包

如何创建你的第一个 React 项目设置

如何使用 Vite 配置 React（现代方法）

什么是 JSX？

为什么我们需要 React 中的 JSX?

JSX 中的表达式

ReactJS 中的组件是什么？

组件作为函数

类作为组件

类组件与函数组件和钩子

ReactJS 中的状态是什么？

州示例

ReactJS 中的 Props 是什么？

函数组件的 Props

类组件的属性

组件的生命周期

生命周期方法的工作实例

使用表单

在 ReactJS 中使用事件

在 ReactJS 中使用内联 CSS

在 ReactJS 中使用外部 CSS

为什么 ReactDOM.render 被 createRoot 取代了

常见问题

总结一下这篇文章：

注册简报