DEV Community
·
使用React创建个人作品集网站
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
本文介绍了如何使用React和Vite创建个人作品集网站，包括安装Node.js、创建项目和文件结构，构建Navbar、Hero、About和Footer组件，并在App.jsx中整合，最后启动开发服务器访问网站。
🎯
关键要点
- 创建个人作品集网站是展示技能和经验的好方法。
- 确保安装Node.js，并从Node.js官网下载。
- 使用Vite创建新的React项目，命令为npm create vite@latest portfolio。
- 进入项目目录并安装依赖，使用命令npm install。
- 启动开发服务器，使用命令npm run dev，项目将在http://localhost:5173运行。
- 组织项目文件结构，包括public、src、components等文件夹。
- 创建Navbar组件，包含网站标题和导航链接。
- 创建Hero组件，展示欢迎信息和开发者介绍。
- 创建About组件，介绍开发者背景和经验。
- 创建Footer组件，包含版权信息。
- 在App.jsx中整合所有组件，确保它们正确渲染。
- 启动开发服务器并在浏览器中访问，查看作品集网站的效果。
- 可以通过添加更多部分如项目、联系表单或推荐信来增强网站。
➡️
