打造你的短视频分享平台：利用Vite搭建React Hooks+Recoil+Antd的Web App

2024-01-20 02:58:37

前言 😄😄

继Vue3全家桶仿网易云Demo（详情上一篇文章），我又携带React全家桶仿Eyepetizer | 开眼视频的WebApp来啦～～

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

简介

本教程将指导您使用Vite、React Hooks、Recoil和Antd构建属于您自己的短视频Web App。我们将从介绍这些技术开始，然后逐步构建一个可以上传、观看和分享短视频的Web App。我们将涵盖从设置开发环境到部署成品网站的所有内容。

如果您有兴趣学习如何使用这些技术构建自己的Web App，那么这篇文章非常适合您。

搭建本地开发环境

首先，我们需要搭建本地开发环境。您可以使用您喜欢的编辑器和终端。我推荐使用Visual Studio Code和Git Bash。

安装Node.js和npm之后，就可以使用以下命令安装Vite：

npm install -g vite

新建React项目

现在，我们可以使用Vite创建一个新的React项目。打开终端，并导航到您想要创建项目的位置。然后，运行以下命令：

vite create my-app

这将创建一个名为“my-app”的新项目。

安装Vite

安装Vite之后，就可以在项目中使用它了。在项目的根目录下，创建一个名为“vite.config.js”的文件。然后，将以下代码复制到该文件中：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

这将告诉Vite使用React插件。

安装React Hooks、Recoil和Antd

接下来，我们需要安装React Hooks、Recoil和Antd。您可以使用以下命令安装这些库：

npm install react-hooks-testing-library recoil antd

创建项目结构

现在，我们可以开始创建项目结构了。在项目的根目录下，创建一个名为“src”的文件夹。然后，在“src”文件夹中，创建以下文件夹：

- components
- pages
- styles

创建页面组件

在“pages”文件夹中，创建一个名为“Home.jsx”的文件。然后，将以下代码复制到该文件中：

import React from 'react'

const Home = () => {
  return (
    <div>
      <h1>首页</h1>
    </div>
  )
}

export default Home

这将创建一个简单的首页组件。

创建视频播放器组件

在“components”文件夹中，创建一个名为“VideoPlayer.jsx”的文件。然后，将以下代码复制到该文件中：

import React, { useState, useEffect } from 'react'

const VideoPlayer = ({ video }) => {
  const [currentTime, setCurrentTime] = useState(0)
  const [duration, setDuration] = useState(0)
  const [playing, setPlaying] = useState(false)

  useEffect(() => {
    const videoElement = document.getElementById('video')

    videoElement.addEventListener('loadedmetadata', () => {
      setDuration(videoElement.duration)
    })

    videoElement.addEventListener('timeupdate', () => {
      setCurrentTime(videoElement.currentTime)
    })

    videoElement.addEventListener('ended', () => {
      setPlaying(false)
    })
  }, [])

  const handlePlayPause = () => {
    const videoElement = document.getElementById('video')

    if (playing) {
      videoElement.pause()
    } else {
      videoElement.play()
    }

    setPlaying(!playing)
  }

  const handleSeek = (e) => {
    const videoElement = document.getElementById('video')

    const percent = e.target.value / 100

    videoElement.currentTime = duration * percent
  }

  return (
    <div>
      <video id="video" src={video.url} controls={false} />
      <div className="controls">
        <button onClick={handlePlayPause}>{playing ? 'Pause' : 'Play'}</button>
        <input type="range" min="0" max="100" value={currentTime / duration * 100} onChange={handleSeek} />
      </div>