Créer un site Web de stockage Fylo Cloud avec React

Introduction

Dans cet article de blog, nous expliquerons la création d'un site Web de stockage cloud riche en fonctionnalités à l'aide de React. Le site, inspiré de Fylo, propose des sections telles que Accueil, Fonctionnalités, Comment ça marche, Témoignages et un pied de page. En cours de route, nous discuterons de la structure, des composants et du style utilisés pour créer ce site Web entièrement réactif.

---

Aperçu du projet

Ce projet se compose de plusieurs sections visant à présenter un service de stockage cloud. Chaque section est construite avec des composants React pour plus de modularité et de facilité de maintenance. Nous couvrirons les sections suivantes :

• Barre de navigation
• Accueil
• Caractéristiques
• Comment ça marche
• Témoignages
• Pied de page

---

Caractéristiques

• Conception adaptative : Le site Web s'adapte à différentes tailles d'écran.
• Composants modulaires : chaque section du site Web est un composant React distinct, ce qui la rend facile à maintenir et à étendre.
• Actifs réutilisables : les images et autres actifs sont importés une seule fois et réutilisés dans tous les composants.
• Style CSS : Le site Web utilise du CSS personnalisé pour styliser chaque composant.

---

Technologies utilisées

• React : bibliothèque frontale basée sur des composants.
• CSS : Pour styliser la mise en page et l'apparence.
• JavaScript : Logique de base pour les composants React.
• Images SVG : utilisées pour les icônes et les graphiques afin d'améliorer l'interface utilisateur.

---

Structure du projet

fylo-cloud-storage-website/
│
├── public/
│   ├── index.html
│
├── src/
│   ├── assets/
│   │   ├── images/
│   │   │   ├── icon-access-anywhere.svg
│   │   │   ├── icon-security.svg
│   │   │   ├── illustration-intro.png
│   │   │   └── ...
│   ├── components/
│   │   ├── Navbar.js
│   │   ├── Home.js
│   │   ├── Features.js
│   │   ├── Working.js
│   │   ├── Testimonials.js
│   │   └── Footer.js
│   ├── App.js
│   ├── App.css
│   └── index.js

---

Installation

1. Cloner le dépôt :

   git clone https://github.com/abhishekgurjar-in/fylo-cloud-storage.git

1. Installer les dépendances :

   cd fylo-cloud-storage-website
   npm install

1. Exécutez l'application :

   npm start

Le site internet sera disponible sur http://localhost:3000/.

---

Explication du code

1. App.js

Il s'agit du composant racine qui importe et restitue tous les autres composants (Navbar, Home, Features, Working, Testimonials, Footer).

import "./App.css"
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import Features from "./components/Features";
import Working from "./components/Working";
import Testimonials from "./components/Testimonials";
import Footer from "./components/Footer";

const App = () => {
  return (
    <>
      <Navbar />
      <Home />
      <Features />
      <Working />
      <Testimonials />
      <Footer />
    </>
  );
};

export default App;

2. Composant de barre de navigation

La barre de navigation contient le logo et trois liens cliquables : Fonctionnalités, Équipe et Connexion.

import logo from "../assets/images/logo.svg";

const Navbar = () => {
  return (
    <div className="navbar">
      <div className="logo">
        <img src={logo} alt="" />
      </div>
      <div className="header">
        <a href="">Features</a>
        <a href="">Team</a>
        <a href="">Sign In</a>
      </div>
    </div>
  );
};

export default Navbar;

3. Composant Accueil

La section Accueil présente le service avec une image d'arrière-plan accrocheuse et un bouton « Commencer ».

import bgHome from "../assets/images/illustration-intro.png";

const Home = () => {
  return (
    <div className="home">
      <div className="home-image">
        <img src={bgHome} alt="" />
      </div>
      <div className="home-text">
        <h1>All your files in one secure location, accessible anywhere.</h1>
        <p>
          Fylo stores all your most important files in one secure location.
          Access them wherever you need, share and collaborate with friends
          family, and co-workers.
        </p>
        <div className="button">
          <h4>Get Started</h4>
        </div>
      </div>
    </div>
  );
};

export default Home;

4. Composant de fonctionnalités

Ce composant met en évidence quatre fonctionnalités clés du service cloud, avec les icônes et les descriptions correspondantes.

import AccessImage from "../assets/images/icon-access-anywhere.svg";
import SecurityImage from "../assets/images/icon-security.svg"
import collaborationImage from "../assets/images/icon-collaboration.svg"
import storageImage from "../assets/images/icon-any-file.svg"

const Features = () => {
  return (
    <div className="features">
      <div className="cards">
        <div className="card">
          <img src={AccessImage} alt="" />
          <h1>Access your files, anywhere</h1>
          <p>
            The ability to use a smartphone, tablet, or computer to access your
            account means your files follow you everywhere.
          </p>
        </div>
        <div className="card">
          <img src={SecurityImage} alt="" />
          <h1>Security you can trust</h1>
          <p>
          2-factor authentication and user-controlled encryption are just a couple of the security features we allow to help secure your files.
          </p>
        </div>
      </div>
      <div className="cards">
        <div className="card">
          <img src={collaborationImage} alt="" />
          <h1>Real-time collaboration</h1>
          <p>
          Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required.
          </p>
        </div>
        <div className="card">
          <img src={storageImage} alt="" />
          <h1>Store any type of file</h1>
          <p>
          Whether you're sharing holidays photos or work documents, Fylo has you covered allowing for all file types to be securely stored and shared.
          </p>
        </div>
      </div>
    </div>
  );
};

export default Features;

6. Composante Témoignages

Cette section comprend les commentaires d'utilisateurs satisfaits ainsi que leurs images de profil.

import satish from "../assets/images/profile-1.jpg";
import Bruce from "../assets/images/profile-2.jpg";
import Iva from "../assets/images/profile-3.jpg"

const Testimonials = () => {
  return (
    <div className="testimonials">
      <div className="t-cards">
        <div className="t-card">
          <h4>
            Fylo has improved our team productivity by an order of magnitude.
            Since making the switch our team has become a well-oiled
            collaboration machine.
          </h4>
          <div className="profile">
            <div className="profile-image">
              <img src={satish} alt="" />
            </div>
            <div className="profile-text">
              <h1>Satish Patel</h1>
              <p>Satish Patel Founder & CEO, Huddle</p>
            </div>
          </div>
        </div>
        <div className="t-card">
          <h4>
            Fylo has improved our team productivity by an order of magnitude.
            Since making the switch our team has become a well-oiled
            collaboration machine.
          </h4>
          <div className="profile">
            <div className="profile-image">
              <img src={Bruce} alt="" />
            </div>
            <div className="profile-text">
              <h1>Bruce McKenzie</h1>
              <p>Bruce McKenzie Founder & CEO, Huddle</p>
            </div>
          </div>
        </div>
        <div className="t-card">
          <h4>
            Fylo has improved our team productivity by an order of magnitude.
            Since making the switch our team has become a well-oiled
            collaboration machine.
          </h4>
          <div className="profile">
            <div className="profile-image">
              <img src={Iva} alt="" />
            </div>
            <div className="profile-text">
              <h1>Iva Boyd</h1>
              <p>Iva Boyd Founder & CEO, Huddle</p>
            </div>
          </div>
        </div>
      </div>
      <div className="contact-card">
        <h1>Get early access today</h1>
        <p>It only takes a minute to sign up and our free starter tier is extremely generous. If you have any questions, our support team would be happy to help you.</p>
        <div className="input-section">
          <div className="input-box">
            <input type="text" placeholder=" email@example.com" />
          </div>
          <div className="submit-button">
<p>Get Started For Free </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Testimonials;

7. Composant de pied de page

Le pied de page contient des informations de contact, des liens sociaux et la navigation sur le site.

import Logo from "../assets/images/logo.svg" 
import Location from "../assets/images/icon-location.svg"
import phone from "../assets/images/icon-phone.svg"
import email from '../assets/images/icon-email.svg'
const Footer = () => {
  return (
   <div className="footer">
    <div className="sec-1">
     <div className="logo">
      <img  src={Logo} alt="" />
     </div>
      <div className="location">
<img src={Location} alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </div>
    </div>
    <div className="sec-2">
      <div className="phone">
        <img src={phone} alt="" />
        <p>+1-543-123-4567</p>
      </div>
      <div className="email">
        <img src={email} alt="" />
        <p>example@fylo.com</p>
 <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
    <div className="sec-3">
      <p>About Us</p>
      <p>Jobs</p>
      <p>Pres</p>
      <p>Blog</p>
    </div>
    <div className="sec-4">
      <p>Contact Us</p>
      <p>Terms</p>
      <p>Privacy</p>
    </div>
   </div>
  )
}

export default Footer

Démo en direct

Vous pouvez consulter la démo en direct de ce projet ici.

Conclusion

Dans cet article, nous avons créé un site Web réactif et riche en fonctionnalités à l'aide de React, présentant un service de stockage cloud. Nous avons expliqué comment structurer le projet, décomposer les composants et les styliser à l'aide de CSS. Cette approche modulaire facilite l'ajout ou la mise à jour de fonctionnalités selon les besoins.

Crédits

Ce projet s'inspire de la conception du service de stockage cloud Fylo.

Auteur

Abhishek Gurjar est un développeur Web dévoué et passionné par la création d'applications Web pratiques et fonctionnelles. Découvrez plus de ses projets sur GitHub.

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!