使用React创建投资组合网站-js教程-PHP中文网

使用React创建投资组合网站

DDD

发布： 2025-01-30 08:04:01

原创

443人浏览过

使用react创建投资组合网站

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

准备工作：

安装Node.js: 确保您的系统已安装Node.js。您可以从Node.js官网下载安装包。
创建React项目: 使用Vite创建一个新的React项目：

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

登录后复制

然后进入项目目录：

cd portfolio

登录后复制

安装依赖:

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;

登录后复制

运行项目:

启动开发服务器：