Reactを使用してポートフォリオWebサイトを作成します

ReactとViteを使用して基本的なポートフォリオWebサイトを構築しましょう！このガイドでは、プロジェクトのセットアップ、必須コンポーネントの作成、スキルとプロジェクトを紹介するためにそれらを統合してください。

プロジェクトのセットアップ：

1. node.jsインストール：システムにnode.jsがインストールされていることを確認します。必要に応じて、公式node.js Webサイトからダウンロードしてください

2. Reactプロジェクトの作成：

   viteを使用して、新しいReactプロジェクトをすばやく設定します：

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

開発サーバーの起動：

プロジェクトにアクセスしてください

<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>

セクション（
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

<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>

アプリケーションの実行：

Development Server（）を再起動して、ポートフォリオWebサイトをご覧ください。 ブラウザで

を開きます

これにより、基礎ポートフォリオが作成されます。 プロジェクト、連絡先情報、スタイリングを追加して、さらにパーソナライズすることを忘れないでください。

以上がReactを使用してポートフォリオWebサイトを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。