使用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中文網其他相關文章！