以React脚手架开启编程世界：打造一个色彩缤纷的互动图标

2023-11-30 14:10:56

React脚手架的奇妙之旅：制作一个神奇的动态图标

作为一名技术爱好者，我怀揣着对React脚手架的无限好奇，踏上了创建我人生第一个React demo的旅程。为了让这个demo与众不同，我决定制作一个能随着鼠标移动而改变颜色的动态图标。

起步：搭建React项目

首先，让我们从搭建React项目开始。我使用npx命令行工具创建了一个名为"icon-playground"的项目：

npx create-react-app icon-playground

之后，我进入该项目目录并启动开发服务器：

cd icon-playground
npm start

创建一个函数组件

接下来，我创建了一个函数组件来处理图标的逻辑。我将其命名为"Icon"，并将其放置在"src"文件夹中：

import React, { useState } from 'react';

const Icon = () => {
  const [color, setColor] = useState('#000');

  const handleMouseMove = (e) => {
    const { offsetX, offsetY } = e.nativeEvent;
    const newColor = `rgb(${offsetX}, ${offsetY}, 0)`;
    setColor(newColor);
  };

  return (
    <div
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: color,
        borderRadius: '50%',
        cursor: 'pointer',
      }}
      onMouseMove={handleMouseMove}
    />
  );
};

export default Icon;

在这个组件中，我使用useState hook来管理图标的颜色状态。handleMouseMove函数处理鼠标移动事件，并根据鼠标在图标上的位置动态更新颜色。

添加动画效果

为了让图标更具交互性，我添加了动画效果。在App.js文件中，我导入Icon组件并将其包裹在AnimatePresence组件中：

import Icon from './Icon';
import { AnimatePresence } from 'framer-motion';

function App() {
  return (
    <AnimatePresence>
      <Icon />
    </AnimatePresence>
  );
}