使用React创建投资组合网站

哈喽！今天心血来潮给大家带来了《使用React创建投资组合网站》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

构建一个展示个人技能、项目和经验的投资组合网站，是每位开发者都应该考虑的事情。本文将引导您使用React和Vite快速搭建一个简洁的投资组合网站。

准备工作：

1. 安装Node.js: 确保您的系统已安装Node.js。您可以从Node.js官网下载安装包。

2. 创建React项目: 使用Vite创建一个新的React项目：

npm create vite@latest portfolio -- --template react

然后进入项目目录：

cd portfolio

3. 安装依赖:

npm install

项目结构:

为了保持代码清晰，建议您按照以下结构组织项目文件：

portfolio/
├── public/
├── src/
│   ├── components/
│   │   ├── Navbar.jsx
│   │   ├── Hero.jsx
│   │   ├── About.jsx
│   │   └── Footer.jsx
│   └── App.jsx
├── index.html
└── package.json

组件创建:

接下来，我们将创建几个核心组件：

• Navbar.jsx: 导航栏组件

import React from 'react';

const Navbar = () => {
  return (
    <nav>
      <h1>My Portfolio</h1>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  );
};

export default Navbar;

• Hero.jsx: 英雄展示区组件 (您可以根据需要添加内容)

import React from 'react';

const Hero = () => {
  return (
    <section id="hero">
      <h2>Welcome to My Portfolio</h2>
      <p>A brief introduction about yourself and your skills.</p>
    </section>
  );
};

export default Hero;

• About.jsx: 关于我组件

import React from 'react';

const About = () => {
  return (
    <section id="about">
      <h2>About Me</h2>
      <p>I am a React developer with experience in building web applications.</p>
    </section>
  );
};

export default About;

• Footer.jsx: 页脚组件

import React from 'react';

const Footer = () => {
  return (
    <footer>
      <p>© 2025 My Portfolio. All rights reserved.</p>
    </footer>
  );
};

export default Footer;

集成组件:

在 App.jsx 中引入并使用这些组件：

import React from 'react';
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import About from './components/About';
import Footer from './components/Footer';

const App = () => {
  return (
    <div>
      <Navbar />
      <Hero />
      <About />
      <Footer />
    </div>
  );
};

export default App;

运行项目:

启动开发服务器：

npm run dev

您的投资组合网站将会在 http://localhost:5173 运行。 您可以根据需要添加更多页面和功能，例如项目展示、联系表单等，来完善您的投资组合网站。

理论要掌握，实操不能落！以上关于《使用React创建投资组合网站》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！