React前端的搭建，首页面的实现

React 是一个用于构建用户界面的开源 JavaScript 。它专注于构建单页应用的视图层，允许开发者使用声明式编程范式来创建交互式的、可复用的 UI 组件。React 以其高效的 DOM 操作、组件化架构和强大的生态系统而闻名，是现代前端开发中不可或缺的工具之一。所以我们小组选择用react来实现前端。

1.React框架的搭建

前置条件：Node.js、npm

如果没有下载Node.js可以参考这篇文章

Node.js介绍、下载、安装、配置与使用

可以输入下面命令，确保已安装 Node.js

node -v
npm -v

出现如图所示的情况表示安装成功

下面打开vscode，终端进入创建项目的文件夹，输入该命令会创建一个名为my-app(可替换)的文件夹

npm create-react-app my-app

之后输入下面的命令就能启动react项目

cd my-app
npm start

2.首页的创建

Ant Design是一个高质量 React UI 组件库。它提供了丰富的组件和样式，能够帮助开发者快速构建美观且功能强大的用户界面。所以我们想到利用 Ant Design来实现首页的快速布局。

首先进入Ant Design官网https://ant.design/index-cn/,选择我们喜欢的布局格式。

选中喜欢的布局格式就可以直接复制代码，有TypeScript和JavaScript两种选择，我们选择JavaScript。

将代码复制到scr/App.js中直接启动我们的react项目。

这样一个首页面的框架就被搭建出来了。

3.对话框和二维码扫描的实现

参考各种大语言模型都是对话式的，所以实现一个对话框是首页面创建的第一步。

{ display: "flex", justifyContent: "center", alignItems: "center", padding: "20px", marginTop: "100px" }}>
                        }
                            suffix={
                                { fontSize: '24px', padding: '0 16px' }}
                                /
                            }
                            style={{
                                width: "70%",
                                maxWidth: "600px",
                                height: "60px",
                                fontSize: "16px",
                                borderRadius: "24px",
                                padding: "0 16px",
                                boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
                                border: "1px solid #ddd",
                            }}
                        />
                    

效果如图所示：

其中我用到了Ant Design的图标RocketFilled和AudioFilled，将图标嵌入到按钮中，省去设计图标的时间，可以直接在该网站https://ant.design/components/icon-cn使用喜欢的图标。

其次我还想到了扫码登陆的普及，我们的网站也需要实现类似的功能。

{ width: '100px', height: '100px' }} /}
                    {
                            fontSize: '30px',
                            color: 'white',
                            padding: '10px',
                            width: '60px',
                            position: 'absolute',
                            bottom: 100,
                            left: '50%',
                            transform: 'translateX(-50%)',
                        }}
                        icon={}
                    /
                

这里我使用了 Ant Design 的 Tooltip 组件，以及一个图标组件 AppleFiled，实现在一个页面的底部或某个特定位置放置一个按钮，当用户鼠标悬停时，显示一个二维码。

后续用户可以通过二维码登陆或者下载客户端（如果能开发出的情况）

总体效果预览

结合我们组其他成员实现的视频轮播器首页面的大致内容如图所示，后续还要添加一些博客等新功能，首页面的美观对一个网站尤为重要，所以后续还要不断去改进和优化。