Créer un site Web de portfolio à l'aide de React

Créons un site Web de portefeuille de base à l'aide de React et Vite! Ce guide vous guidera dans la mise en place du projet, la création de composants essentiels et les intégrera pour présenter vos compétences et projets.

Configuration du projet:

1. Node.js Installation: Assurez-vous que Node.js est installé sur votre système. Téléchargez-le sur le site officiel de Node.js si nécessaire.

2. Création du projet React: Utilisez Vite pour configurer rapidement un nouveau projet React:

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

3. Démarrage du serveur de développement:

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

Accédez à votre projet à http://localhost:5173.

Structure du projet:

Maintenir une structure de projet propre et organisée:

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

Création des composants:

1. Composant 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. Section héros (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. À propos de la section (src/components/About.jsx): (le contenu dépendra de vos coordonnées)

<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. Composant de pied de page (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>

Intégration des composants (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>

exécuter l'application:

Redémarrez le serveur de développement (npm run dev) pour voir votre site Web de portefeuille. Ouvrez http://localhost:5173/ dans votre navigateur.

Cela crée un portefeuille fondamental. N'oubliez pas d'ajouter vos projets, vos coordonnées et votre style pour les personnaliser davantage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!