使用GPT实现一个简单的网站

背景

In this exciting tutorial video, you’ll discover how to use 文心一言, a powerful language model developed by 百度, to generate ReactJS code for a simple blog website. With 文心一言’s help, you can quickly create a blog website that’s easy to customize and perfect for sharing your thoughts and ideas. We’ll guide you through the process step-by-step, from setting up your development environment to generating ReactJS code using ChatGPT, and implementing functionality for adding and editing blog posts. Even if you’re new to ReactJS or web development, you can follow along and build a beautiful blog website in no time. So why wait? Start watching now and unleash the power of ChatGPT to create your own ReactJS blog website today!

文心一言 + React

准备本地环境

1. 安装 node.js

    打开您的浏览器，访问Node.js的官方网站（https://nodejs.org/en/）。
    在网站上找到适合您操作系统的Node.js版本，并点击下载按钮。通常，网站会自动检测您的操作系统并提供相应的下载选项。
    下载完成后，找到下载的安装包文件（通常是一个.exe或.pkg文件），双击它以开始安装过程。
    根据安装向导的提示，完成Node.js的安装。在安装过程中，您可能需要同意许可协议、选择安装位置等。
    安装完成后，验证Node.js是否成功安装。打开命令提示符（Windows）或终端（macOS/Linux），输入以下命令并按下回车键：
node -v
如果成功安装了Node.js，您将看到安装的版本号作为输出。

2. 创建一个项目

npx create-react-app blog

然后使用命令进入项目

cd blog
code .

使用GPT完成编码

指令： Build the code for react blog website with nice design

我们需要创建以下组件：

Blog.js：包含博客列表和文章内容的基本组件。
Post.js：包含单个博客文章的组件。
Header.js：包含网站标题和导航菜单的组件。
Footer.js：包含网站底部的版权信息和链接的组件。
App.js：包含整个应用程序的根组件。

指令： build a navbar for my blog website using react

指令： create a footer component with same design

指令：create a post component from my blog that contains username, message and timestamp

指令：create a state that will save 4 posts with different username, message and timestamp

操作视频