Erstellen einer Fylo Cloud Storage-Website mit React

Einführung

In diesem Blogbeitrag werden wir die Erstellung einer funktionsreichen Cloud-Speicher-Website mit React Schritt für Schritt erläutern. Die von Fylo inspirierte Website bietet Abschnitte wie „Startseite“, „Funktionen“, „Wie es funktioniert“, „Testimonials“ und eine Fußzeile. Unterwegs besprechen wir die Struktur, Komponenten und das Design, die zum Aufbau dieser vollständig responsiven Website verwendet wurden.

---

Projektübersicht

Dieses Projekt besteht aus mehreren Abschnitten, die darauf abzielen, einen Cloud-Speicherdienst vorzustellen. Jeder Abschnitt besteht aus React-Komponenten für Modularität und einfache Wartung. Wir werden die folgenden Abschnitte behandeln:

• Navigationsleiste
• Startseite
• Funktionen
• Wie es funktioniert
• Erfahrungsberichte
• Fußzeile

---

Merkmale

• Responsive Design: Die Website passt sich an unterschiedliche Bildschirmgrößen an.
• Modulare Komponenten: Jeder Abschnitt der Website ist eine separate React-Komponente, was die Wartung und Erweiterung erleichtert.
• Wiederverwendbare Assets: Bilder und andere Assets werden einmal importiert und komponentenübergreifend wiederverwendet.
• CSS-Styling: Die Website verwendet benutzerdefiniertes CSS, um jede Komponente zu formatieren.

---

Verwendete Technologien

• Reagieren: Komponentenbasierte Front-End-Bibliothek.
• CSS: Für die Gestaltung des Layouts und des Erscheinungsbilds.
• JavaScript: Kernlogik für React-Komponenten.
• SVG-Bilder: Wird für Symbole und Grafiken zur Verbesserung der Benutzeroberfläche verwendet.

---

Projektstruktur

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. Klonen Sie das Repository:

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

1. Abhängigkeiten installieren:

   cd fylo-cloud-storage-website
   npm install

1. Führen Sie die Anwendung aus:

   npm start

Die Website wird unter http://localhost:3000/ verfügbar sein.

---

Code-Erklärung

1. App.js

Dies ist die Stammkomponente, die alle anderen Komponenten importiert und rendert (Navigationsleiste, Startseite, Funktionen, Arbeiten, Testimonials, Fußzeile).

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. Navbar-Komponente

Die Navigationsleiste enthält das Logo und drei anklickbare Links: Funktionen, Team und Anmelden.

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. Home-Komponente

Der Home-Bereich stellt den Dienst mit einem auffälligen Hintergrundbild und einer Schaltfläche „Erste Schritte“ vor.

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

Diese Komponente hebt vier Hauptfunktionen des Cloud-Dienstes mit entsprechenden Symbolen und Beschreibungen hervor.

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. Testimonials-Komponente

Dieser Abschnitt enthält Feedback von zufriedenen Benutzern zusammen mit ihren Profilbildern.

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. Fußzeilenkomponente

Die Fußzeile enthält Kontaktinformationen, soziale Links und die Seitennavigation.

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

Live-Demo

Sie können sich hier die Live-Demo dieses Projekts ansehen.

Abschluss

In diesem Beitrag haben wir mit React eine funktionsreiche, reaktionsfähige Website erstellt, die einen Cloud-Speicherdienst vorstellt. Wir haben erläutert, wie Sie das Projekt strukturieren, die Komponenten aufteilen und sie mithilfe von CSS formatieren. Dieser modulare Ansatz erleichtert das Hinzufügen oder Aktualisieren von Funktionen nach Bedarf.

Credits

Dieses Projekt ist vom Design des Fylo-Cloud-Speicherdienstes inspiriert.

Autor

Abhishek Gurjar ist ein engagierter Webentwickler, der sich mit der Entwicklung praktischer und funktionaler Webanwendungen beschäftigt. Schauen Sie sich weitere seiner Projekte auf GitHub an.

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