使用React创建投资组合网站

>让我们使用React和Vite构建一个基本的投资组合网站！本指南将引导您完成设置项目，创建必不可少的组件并将其集成以展示您的技能和项目。

项目设置：

1. > node.js安装：确保系统上安装了node.js。如果需要，请从官方Node.js网站下载它。

2. 创建React项目：使用VITE快速设置一个新的React项目：

<code class="language-bash">npm create vite@latest my-portfolio -- --template react
cd my-portfolio
npm install</code>

3. 启动开发服务器：>

>在

<code class="language-bash">npm run dev</code>

中访问您的项目

http://localhost:5173项目结构：

保持干净有条理的项目结构：

<code>my-portfolio/
├── public/
└── src/
    ├── components/
    │   ├── Navbar.jsx
    │   ├── Hero.jsx
    │   ├── About.jsx
    │   └── Footer.jsx
    ├── App.jsx
    └── main.jsx
├── index.html
└── package.json</code>

组件创建：

> navbar组件（
1. ）：src/components/Navbar.jsx

<code class="language-javascript">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;</code>

>英雄部分（
2. ）： src/components/Hero.jsx

>

<code class="language-javascript">import React from 'react';

const Hero = () => {
    return (
        <section>
            <h2>Welcome to My Portfolio</h2>
            <p>I'm a software developer passionate about building amazing applications.</p>
        </section>
    );
};

export default Hero;</code>

>关于pection（

）：
3. （内容取决于您的详细信息）src/components/About.jsx

<code class="language-javascript">import React from 'react';

const About = () => {
    return (
        <section id="about">
            <h3>About Me</h3>
            <p>Add your personal introduction here.</p>
        </section>
    );
};

export default About;</code>

页脚组件（

）：
4. src/components/Footer.jsx
组件Integration（

）：

<code class="language-javascript">import React from 'react';

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

export default Footer;</code>

src/App.jsx>运行应用程序：

<code class="language-javascript">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;</code>

>重新启动开发服务器（

）以查看您的投资组合网站。 在您的浏览器中打开。>

这会创建一个基础投资组合。 请记住添加您的项目，联系信息和样式，以进一步个性化。

>

以上是使用React创建投资组合网站的详细内容。更多信息请关注PHP中文网其他相关文章！