[3D-Portfolio] docs | js集中式配置 | React组件 | 组件嵌套

链接：https://shridharportfolio.netlify.app/

教程：3D作品集

本项目是一个个人作品集网站，旨在展示技能、经验和项目。

采用*React作为主框架，结合引人入胜的3D视觉效果和动画*提供交互式用户体验。

所有内容通过集中化管理实现便捷更新，并配备联系表单方便访客沟通。

架构

章节导航

1. 集中式配置（常量）
   
2. React组件
   
3. 3D画布组件
   
4. 动画工具（Framer Motion）
   
5. 区块包装高阶组件
   
6. 联系表单逻辑
   

---

效果图：

---

第1章：集中式配置（常量）

欢迎来到3D-Portfolio项目教程的第一章！

我们将从本项目至关重要的概念开始——集中式配置（通常称为"constants"）。

• 可以将作品集网站想象成一部戏剧或电影。演员登台或拍摄开始前，需要先编写剧本。
• 这个剧本包含所有重要信息：角色名称、对话、场景设置等。

在网页开发中，特别是像作品集这样的个性化网站，我们也有类似"剧本"或"数据表"。这里存储着使我们的作品集独一无二的所有细节。

解决什么问题？

假设将整个作品集的信息（如姓名"John Doe"、职称"Web Developer"、技能列表和项目描述）直接嵌入网站的每个组件中。

若要将职称改为"Frontend Engineer"，需要翻查多个文件，找到所有提及"Web Developer"的位置并逐一修改。这既费时又易出错！

集中式配置正是为此而生。它通过将所有可变信息存储在单一位置来解决这个问题。

认识"数据表"：src/constants/index.js

本项目的"数据表"是位于src/constants/index.js的文件。该文件专用于存储整个网站使用的所有重要信息。

包含哪些信息？

• 姓名与职称
• "关于我"的文本
• 技术栈列表（如React、JavaScript等）
• 工作经历详情（公司、日期、职责）
• 项目信息（名称、描述、图片、链接）
• 社交媒体链接（LinkedIn、GitHub等）
• 导航栏链接

通过集中存储这些数据，只需编辑此文件即可轻松更新作品集，无需翻查多个文件。

我给它fork下来了：
https://github.com/lvy010/3D-Portfolio

注释：

• npm install 安装依赖项
• npm start 启动服务器

就可以修改一个文件，实现个性化定制啦

---

组件如何使用中心数据

网站的不同部分（组件）并不直接存储这些信息。

它们会向src/constants/index.js文件请求所需数据。

以Hero组件（页面顶部的3D模型区域）和导航栏显示姓名为例：

// src/constants/index.js
const personalInfo = {name: "Shridhar", // <-- 姓名存储处fullName: "Shridhar Rai",role: "Software Developer", // <-- 职称about: `我是一名熟练的软件开发人员...`,// ... 其他个人信息
};// 导出供其他文件使用
export {personalInfo,// ... 其他常量
};

Hero组件通过导入使用该数据：

// src/components/Hero.jsx
import { personalInfo } from "../constants"; const Hero = () => {return (<h1>Hi, I'm <span>{personalInfo.name}</span> // <-- 使用姓名</h1><p>Innovative {personalInfo.role}, // <-- 使用职称</p>)
}

导航栏组件同理：

// src/components/Navbar.jsx
import { personalInfo } from "../constants";const Navbar = () => {return (<p>{personalInfo.name} | {personalInfo.role} // 同时显示姓名与职称</p>)
}

核心用例：修改姓名

当需要将显示的姓名从"Shridhar"改为"名字"时：

1. 打开src/constants/index.js
2. 修改personalInfo对象：

const personalInfo = {name: "名字", // 修改此处fullName: "全名",role: "职称",// ...
}

3. 保存文件后，所有使用personalInfo.name的组件将自动更新，无需修改组件文件本身。

解耦 在项目中的典型应用场景

工作原理

1. 数据请求：组件通过import语句导入所需常量
2. 数据提供：常量文件导出JavaScript变量（对象/数组）
3. 数据应用：组件使用这些变量进行渲染

代码结构示例

src/constants/index.js包含多种数据结构：

// 导航路径
const navigationPaths = {home: "/",about: "about",work: "work",
};// 技术栈列表
const technologies = [{ name: "HTML 5", icon: html },{ name: "CSS 3", icon: css },// ...
];// 项目案例
const projects = [{name: "Aptihealth Web",description: "革新心理健康护理...",tags: [{ name: "reactjs", color: "blue-text-gradient" }],image: aptihealthWeb,}// ...
];

各组件按需导入：

• 导航栏导入navLinks
• 技能模块导入technologies
• 项目展示导入projects
• 联系方式导入personalInfo

结论

本章阐述了集中式配置在3D-Portfolio项目中的重要性。

通过将个人信息、技能、经历和项目详情集中存储在src/constants/index.js，实现了内容管理的便捷性和高效性。

下一章我们将探讨React组件，了解如何用这些数据构建网站的不同模块。

---

第2章：React组件

在上一章集中式配置（常量）中，我们了解到作品集的所有重要内容都存储在中心化的"数据表"文件（src/constants/index.js）中，这让我们的个人信息更新变得极为便捷。

现在，让我们进入下一个重要概念：React组件。

• 如果将常量文件比作网站的"剧本"或"数据表"

• 那么React组件就是实际将数据呈现到屏幕上的"演员"或"建筑模块"。

组件解决了什么问题？

想象用一整块材料建造房屋：设计、建造和维护都将极其困难！

网页开发亦然。若将所有代码写入单一文件，将导致管理困难、复用性差等问题。

React组件通过将用户界面拆分为独立可复用的模块化解这一问题。

可以将组件视为**乐高积木**：

• 按钮可作为组件
• 导航栏可作为组件
• 完整页面区块（如"关于"区块）可作为组件
• 项目卡片也可作为组件

每个组件负责渲染页面的特定部分。

什么是React组件？

React组件本质上是JavaScript函数（本项目主要使用函数组件），其核心功能为：

1. 接收输入（称为props，即属性）
2. 返回描述界面元素的JSX代码

简单组件示例：

function Greeting(props) {return <h1>Hello, {props.name}!</h1>;
}// 使用方式
<Greeting name="Alice" />

此组件接收name属性并显示问候语，展示了：

1. JSX：类似HTML的界面描述语法
2. Props：父子组件间的数据传递机制

---

应用结构搭建（App.jsx）

查看src/App.jsx主文件，这是整个应用的架构蓝图：

// src/App.jsx（简化版）
import { BrowserRouter } from "react-router-dom";
import Navbar from "./components/Navbar";
import Hero from "./components/Hero";
// ...其他组件导入const App = () => {return (<BrowserRouter><div className="relative z-0 bg-primary"><div className="bg-hero-pattern"><Navbar /><Hero /></div><About /><Experience /><Tech /><Works /><div className="relative z-0"><Contact /></div></div></BrowserRouter>);
};

关键要点：

• import语句导入各组件
• JSX结构通过嵌套组件构建页面布局
• 每个组件标签（如<Navbar />）对应独立的功能模块

组件与常量数据联动

组件通过导入常量数据实现动态内容展示。

以导航栏组件为例：

// src/components/Navbar.jsx
import { personalInfo } from "../constants";const Navbar = () => {return (<p>{personalInfo.name} | {personalInfo.role}</p>);
};

该组件从常量文件获取个人信息并渲染，实现内容与结构的解耦。

组件嵌套与复合

组件可嵌套使用构建复杂界面。以"关于"区块为例：

// src/components/About.jsx（简化版）
import { services } from "../constants";// 服务卡片子组件
const ServiceCard = ({ title, icon }) => (<div className="service-card"><img src={icon} /><h3>{title}</h3></div>
);// 主组件
const About = () => {return (<><h2>技术概览</h2><div className="services-grid">{services.map((service) => (<ServiceCard key={service.title} {...service} />))}</div></>);
};

实现逻辑：

1. 主组件导入服务数据
2. 遍历服务列表生成多个ServiceCard子组件
3. 通过props传递具体服务数据
4. 子组件接收数据并渲染独立卡片

props（属性）是父组件向子组件传递数据的一种方式，类似于给函数传递参数。

组件层级架构

应用组件呈树状结构：

前端文件树，我们在之前的【Delve into OS】专栏中，讲文件树结构的时候有讲到过

典型组件嵌套模式：

• 经历区块使用ExperienceCard子组件
• 技术栈区块使用BallCanvas3D组件
• 项目展示区块使用ProjectCard子组件

总结

本章深入探讨了React组件的核心概念：

1. 通过组件化实现界面解耦与复用
2. props机制实现数据传递
3. 组件嵌套构建复杂界面
4. 与常量文件联动实现动态内容

组件的层级结构与数据流是React应用的核心架构模式。

理解这些概念后，我们将进入更具视觉表现力的3D画布组件章节，探索三维元素的实现奥秘。