Erstellen Sie die Portfolio -Website mit React

Erstellen wir eine grundlegende Portfolio -Website mit React und Vite! Dieser Leitfaden führt Sie durch die Einrichtung des Projekts, das Erstellen von wesentlichen Komponenten und die Integration, um Ihre Fähigkeiten und Projekte zu präsentieren.

Projekt -Setup:

1. node.js Installation: Stellen Sie sicher, dass Node.js in Ihrem System installiert ist. Laden Sie es bei Bedarf von der offiziellen Node.js -Website herunter.

2. Erstellen des React -Projekts: Verwenden Sie VITE, um schnell ein neues React -Projekt einzurichten:

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

3. Starten Sie den Entwicklungsserver:

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

Zugriff auf Ihr Projekt unter http://localhost:5173.

Projektstruktur:

eine saubere und organisierte Projektstruktur unterhalten:

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

Komponentenerstellung:

1. navi -Komponente (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. Hero Section (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. Über den Abschnitt (src/components/About.jsx): (Der Inhalt hängt von Ihren Details ab)

<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. Fußzeileskomponente (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>

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

Ausführen der Anwendung:

starten Sie den Entwicklungsserver (npm run dev) neu, um Ihre Portfolio -Website anzuzeigen. Öffnen Sie http://localhost:5173/ in Ihrem Browser.

Dies schafft ein grundlegendes Portfolio. Denken Sie daran, Ihre Projekte, Kontaktinformationen und Ihr Styling hinzuzufügen, um sie weiter zu personalisieren.

Das obige ist der detaillierte Inhalt vonErstellen Sie die Portfolio -Website mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!