Membina Laman Web Storan Awan Fylo dengan React-tutorial css-php.cn

Building a Fylo Cloud Storage Website with React

pengenalan

Dalam catatan blog ini, kami akan menelusuri penciptaan tapak web storan awan yang kaya dengan ciri menggunakan React. Tapak ini, yang diilhamkan oleh Fylo, menawarkan bahagian seperti Laman Utama, Ciri, Cara Ia Berfungsi, Testimoni dan Pengaki. Sepanjang perjalanan, kami akan membincangkan struktur, komponen dan gaya yang digunakan untuk membina tapak web responsif sepenuhnya ini.

Gambaran Keseluruhan Projek

Projek ini terdiri daripada berbilang bahagian yang bertujuan untuk mempamerkan perkhidmatan storan awan. Setiap bahagian dibina dengan komponen React untuk modulariti dan kemudahan penyelenggaraan. Kami akan merangkumi bahagian berikut:

Navbar
Rumah
Ciri
Cara Ia Berfungsi
Testimoni
Pengaki

Ciri-ciri

Reka bentuk responsif: Tapak web melaraskan kepada saiz skrin yang berbeza.
Komponen Modular: Setiap bahagian tapak web adalah komponen React yang berasingan, menjadikannya mudah untuk diselenggara dan dilanjutkan.
Aset Boleh Guna Semula: Imej dan aset lain diimport sekali dan digunakan semula merentas komponen.
Penggayaan CSS: Tapak web menggunakan CSS tersuai untuk menggayakan setiap komponen.

Teknologi yang Digunakan

React: Pustaka bahagian hadapan berasaskan komponen.
CSS: Untuk menggayakan reka letak dan penampilan.
JavaScript: Logik teras untuk komponen React.
Imej SVG: Digunakan untuk ikon dan grafik untuk meningkatkan UI.

Struktur Projek

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

Salin selepas log masuk

Pemasangan

Klon repositori:

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

Salin selepas log masuk

Pasang kebergantungan:

   cd fylo-cloud-storage-website
   npm install

Salin selepas log masuk

Jalankan aplikasi:

   npm start

Salin selepas log masuk

Tapak web akan tersedia di http://localhost:3000/.

Penerangan Kod

1. App.js

Ini ialah komponen akar yang mengimport dan memaparkan semua komponen lain (Navbar, Laman Utama, Ciri, Bekerja, Testimoni, Pengaki).

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;

Salin selepas log masuk

2. Komponen Navbar

Bar navigasi mengandungi logo dan tiga pautan boleh klik: Ciri, Pasukan dan Log Masuk.

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;

Salin selepas log masuk

3. Komponen Rumah

Bahagian Laman Utama memperkenalkan perkhidmatan dengan imej latar belakang yang menarik perhatian dan butang "Bermula".

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;

Salin selepas log masuk

4. Komponen Ciri

Komponen ini menyerlahkan empat ciri utama perkhidmatan awan, dengan ikon dan penerangan yang sepadan.

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;

Salin selepas log masuk

6. Komponen Testimoni

Bahagian ini termasuk maklum balas daripada pengguna yang berpuas hati bersama imej profil mereka.

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;

Salin selepas log masuk

7. Komponen Pengaki

Pengaki mengandungi maklumat hubungan, pautan sosial dan navigasi tapak.

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

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung projek ini di sini.

Kesimpulan

Dalam siaran ini, kami mencipta tapak web responsif yang kaya dengan ciri menggunakan React, yang mempamerkan perkhidmatan storan awan. Kami membincangkan cara menstruktur projek, memecahkan komponen dan menggayakannya menggunakan CSS. Pendekatan modular ini memudahkan untuk menambah atau mengemas kini ciri mengikut keperluan.

Kredit

Projek ini diilhamkan oleh reka bentuk perkhidmatan storan awan Fylo.

Pengarang

Abhishek Gurjar ialah pembangun web berdedikasi yang bersemangat untuk mencipta aplikasi web yang praktikal dan berfungsi. Lihat lebih banyak projek beliau di GitHub.

Atas ialah kandungan terperinci Membina Laman Web Storan Awan Fylo dengan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!