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

<>{storedValues.map((value, index) => {return ({value.question}
{value.answer}
);})})}export default AnswerSection;
当你运行你的应用程序并通过提问来测试它时，答案会显示在下面。但是你会注意到复制按钮没有工作。你需要给按钮添加一个()事件，这样它就会触发一个方法来处理这个功能。你可以使用..()方法来处理这个功能。这就是组件现在的样子：
// components/AnswerSection.jsxconst AnswerSection = ({ storedValues }) => {const copyText = (text) => {navigator.clipboard.writeText(text);};return (<>{storedValues.map((value, index) => {return ({value.question} {value.answer} copyText(value.answer)}>);})})}export default AnswerSection;
当你运行你的应用程序时，你的克隆应用程序将完美运行。你现在可以部署你的应用程序，在线访问它，并与朋友分享。
如何将你的React应用程序部署到服务器上
仅仅建立这个应用程序并把它留在你的本地计算机上是不够的。你要在网上分享它，这样别人就可以访问它。让我们看看如何使用和来做这件事。
推送你的代码到
要推送代码到，可以使用Git命令，这是一种可靠而有效的方式来管理代码变更，进行项目协作，并维护版本历史。
推送代码的第一步是创建一个新的仓库，登录你的账户，点击屏幕右上角的+按钮，从下拉菜单中选择New。
给你的资源库起个名字，添加描述（可选），并选择你希望它是公开的还是私有的。点击来创建它。
一旦你的仓库被创建，确保你从仓库的主页上获得仓库的 URL，你将需要它来推送你的代码到。
打开你的终端或命令提示符，导航到包含你的项目的目录。逐一运行下面的命令，将你的代码推送到仓库：
git initgit add .git commit -m "my first commit"git remote add origin [repository URL]git push -u origin master
git init初始化本地的 Git 仓库，git add .将当前目录及其子目录下的所有文件添加到新的 Git 仓库。git-m "my first "将修改提交到仓库，并附上简短的信息。gitadd[ URL]将仓库的 URL 设置为远程仓库，git push -u将代码推送到远程仓库（）的主分支。
提示：你可以把 “my first ” 换成你自己的简短信息，描述你所做的修改，把”[ URL]”换成你的仓库的 URL 。一旦你的代码被推送到，你就可以把你的仓库部署到服务器了。
将你的克隆应用部署到服务器上
要将你的版本库部署到服务器（以为例），请遵循以下步骤：
在 “My ” 仪表板上登录或创建您的账户。点击左侧边栏的，然后点击Add。从下拉菜单中选择，将React应用部署到。在出现的模式中选择你想部署的仓库。如果你有多个分支，你可以选择一个你想部署的分支，并为应用程序指定一个名称。在25个可用的data中选择一个，会自动检测一个启动命令。最后，向这样的公共主机推送API密钥并不安全，它是作为添加到本地的。在托管时，你也可以使用相同的变量名和密钥作为其值将其添加为环境变量。
你的应用程序将开始部署，在几分钟内，将提供一个链接来访问你的应用程序的部署版本。在这种情况下，这是
Note：你可以启用自动部署，这样会在你改变代码库并推送到时重新部署你的应用程序。
小结
API可用于构建广泛的潜在应用，从客户支持和个人助理到语言翻译和内容创建。
在本教程中，你已经学会了如何用React和构建一个克隆应用。你可以将这个应用/功能整合到其他应用中，为用户提供类似人类的对话体验。