手把手教你使用React和OpenAI API构建和部署ChatGPT克隆应用程( 二 ) _react

文章插图
App.js：App.js文件是React应用程序的主要组件。它通常代表顶层组件，渲染应用程序中的所有其他组件。index.js：这个文件是你的React应用程序的入口点。它是应用程序打开时加载的第一个文件，负责将App.js组件渲染到浏览器上。index.css：这个文件负责定义你的React应用程序的整体风格和布局。如何用React和 API建立克隆版
克隆应用程序将由两个组件组成，使应用程序更容易理解和维护。这两个组件是：
表单部分：这个组件包括一个文本区域字段和一个按钮，供用户与聊天机器人互动。回答部分：问题和相应的答案将被存储在一个数组中，并显示在这个部分。你将按时间顺序循环浏览该数组，先显示最新的。设置克隆应用程序
在本教程中，让我们首先建立应用程序的接口，然后你可以实现功能，使你的应用程序与 API进行交互。首先创建你将在本教程中使用的两个组件。为了适当的组织，你将在src文件夹中创建一个文件夹，所有的组件都将存放在这里。
表单部分组件
这是一个简单的表单，由一个和一个提交组成。
// components/FormSection.jsxconst FormSection = () => {return ()}export default FormSection;
当你把它导入你的App.js文件时，这个表单应该是这个样子的：
Info：本教程的重点在于构建和部署你的应用程序。所以你可以将src/index.css文件中的样式复制到你自己的项目中，以获得相同的结果/应用。
回答部分组件
这个部分是显示所有问题和答案的地方。当你把它导入你的App.js文件时，这个部分将是这样的。
你将从一个数组和循环中获取这些问题和答案，使你的代码更容易阅读和维护。

// components/AnswerSection.jsxconst AnswerSection = () => {return (<>Who is the founder of OpenAi?

OpenAI was founded in December 2015 by Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, Wojciech Zaremba, and John Schulman.

)}export default AnswerSection;

主页
现在你已经创建了这两个组件，但当你运行你的应用程序时，什么也不会出现，因为你需要将它们导入你的App.js文件。对于这个应用程序，你将不实现任何形式的路由，这意味着App.js文件将作为你的应用程序的主页组件/页面。
你可以在导入组件之前添加一些内容，比如你的应用程序的标题和描述。

// App.jsimport FormSection from './components/FormSection';import AnswerSection from './components/AnswerSection';const App = () => {return (ChatGPT CLONE I am an automated question and answer system, designed to assist youin finding relevant information. You are welcome to ask me any queriesyou may have, and I will do my utmost to offer you a reliableresponse. Kindly keep in mind that I am a machine and operate solelybased on programmed algorithms.

);};export default App;

在上面的代码中，这两个组件被导入并添加到应用程序中。当你运行你的应用程序时，你的应用程序将是这个样子：
添加功能和整合 API
你现在有了你的应用程序的用户界面。下一步是使应用程序发挥作用，以便它能与 API互动并获得响应。首先，你需要从你的表单中获取提交时的值，因为它将被用来查询 API 。
从表单中获取数据
在React中，存储和更新数据的最佳方式是使用状态。在功能组件中，()钩子是用来处理状态的。你可以创建一个状态，将表单中的值分配给该状态，并在其值发生变化时更新它。让我们先把()钩子导入.jsx组件，然后创建一个状态来存储和更新。