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

随着聊天机器人和虚拟助手的使用不断增加，许多企业和开发人员正在寻找创建自己的人工智能驱动的聊天机器人的方法。就是这样一个聊天机器人，它由创建，能够进行类似人类的对话，并回答各种问题。
要建造什么？
在本教程中，你将学习如何使用React和 API构建一个克隆应用程序。如果你想在周末尝试做一个有趣的、有吸引力的项目，这是一个深入了解React和的好机会。
你还将学习如何从你的仓库直接部署到应用托管平台。下面是克隆应用程序的Demo演示。
如果你想更仔细地检查这个项目，你可以访问其仓库。
另外，你也可以克隆React应用启动项目，它带有基本元素，如样式、FontCDN链接、包和基本结构，以帮助你开始工作。
要求/前提条件如下：
本教程被设计成一种 “跟随” 的体验。因此，建议你具备以下条件，以便轻松地进行编码：
本文将从 API简述，及为何选取React进行开发及具体的开发实践、服务器部署等多个方面，进行非常详尽的克隆开发说明。
目录
你要建造什么？
要求/前提条件如下：
什么是 API？
为什么是React？
如何用React和 API建立克隆版
设置克隆应用程序
添加功能和整合 API
如何将你的React应用程序部署到服务器上
推送你的代码到
将你的克隆应用部署到服务器上
小结
什么是 API？
API是一个基于云的平台，授予开发者通过API访问的语言模型，如GPT-3 。它允许开发者将自然语言处理功能，如文本补全、情感分析、总结和翻译添加到他们的应用程序中，而无需开发和训练他们的模型。
要使用的API，开发者必须在网站上创建一个账户并获得一个API密钥。API密钥用于验证API请求和跟踪使用情况。
一旦获得了API密钥，开发者就可以使用API向语言模型提交文本并接收响应。
为什么是React？
React是一个用于构建用户界面的流行库。根据2022年Stack 的开发者调查，它是第二大最常用的网络技术，拥有42.62%的市场份额。
React允许开发者创建代表用户界面不同部分的声明性组件。这些组件是用一种叫做JSX的语法定义的，它是和HTML的结合。
由于其庞大的组件库和工具包的生态系统，开发人员可以轻松地与 API等API合作和集成，以建立复杂的聊天界面，这也是它成为构建克隆应用程序的最佳选择。
那么，我们应如何设置你的React开发环境？具体如下：
安装React或创建React项目的最好方法是用-react-app来安装它。一个先决条件是在你的机器上安装Node.js 。为了确认你已经安装了Node，在终端运行以下命令。
node -v
如果它带出了一个版本，那么它就存在。要使用npx，你需要确保你的Node版本不低于v14.0.0，你的NPM版本不低于v5.6；否则，你可能需要通过运行npm-g来更新它。一旦你了解了npm，你现在可以通过运行下面的命令来建立一个React项目：
npx create-react-app chatgpt-clone
【手把手教你使用React和OpenAI API构建和部署ChatGPT克隆应用程】注意：”-clone” 是我们正在创建的应用程序名称，但你可以把它改成你选择的任何名称。
安装过程可能需要几分钟的时间。一旦成功，你可以导航到该目录并安装Node.js 包，它提供了从Node.js访问 API的便利，使用下面的命令：
npm install openai
现在你可以运行npm start，看到你的应用程序在:3000上运行。
当使用-react-app命令创建一个React项目时，它会自动构建一个文件夹结构。与你有关的主要文件夹是 src 文件夹，它是进行开发的地方。这个文件夹默认包含许多文件，但你应该只关注App.js、index.js和index.css文件。