Buat laman web portfolio menggunakan React

mari kita membina laman web portfolio asas menggunakan React and Vite! Panduan ini akan membimbing anda melalui menubuhkan projek, mewujudkan komponen penting, dan mengintegrasikannya untuk mempamerkan kemahiran dan projek anda.

Persediaan Projek:

1. pemasangan node.js: Pastikan node.js dipasang pada sistem anda. Muat turunnya dari laman web rasmi Node.js jika diperlukan.

2. Mewujudkan Projek React: Gunakan Vite untuk dengan cepat menubuhkan projek React baru:

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

3. Memulakan pelayan pembangunan:

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

mengakses projek anda di

. http://localhost:5173

Struktur Projek:

Mengekalkan struktur projek yang bersih dan teratur:

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

Penciptaan komponen:

1. komponen navbar (): 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. Seksyen Hero (): 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. mengenai seksyen (): src/components/About.jsx Komponen Footer (
):

<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 Integrasi Komponen ():

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

menjalankan aplikasi: src/App.jsx Mulakan semula pelayan pembangunan (

) untuk melihat laman web portfolio anda. Buka

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

dalam penyemak imbas anda.

Ini mewujudkan portfolio asas. Ingatlah untuk menambah projek anda, maklumat hubungan, dan gaya untuk memperibadikannya.

Atas ialah kandungan terperinci Buat laman web portfolio menggunakan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!