在這篇文章中，我們將逐步介紹如何使用 React 建立一個功能豐富的雲端儲存網站。該網站受 Fylo 啟發，提供了主頁、功能、工作原理、感言和頁腳等部分。在此過程中，我們將討論用於建立這個完全響應式網站的結構、元件和樣式。
此專案由多個部分組成，旨在展示雲端儲存服務。每個部分都是用 React 元件建構的，以實現模組化和易於維護。我們將涵蓋以下部分：
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
git clone https://github.com/abhishekgurjar-in/fylo-cloud-storage.git
cd fylo-cloud-storage-website npm install
npm start
網站將在 http://localhost:3000/ 上提供。
這是匯入和渲染所有其他元件（導覽列、首頁、功能、工作、推薦、頁尾）的根元件。
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;
導覽列包含徽標和三個可點擊的連結：功能、團隊和登入。
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;
主頁部分透過引人注目的背景圖像和「開始」按鈕介紹了該服務。
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;
此元件重點介紹了雲端服務的四個關鍵功能，並附有相應的圖示和說明。
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;
此部分包含滿意使用者的回饋及其個人資料圖片。
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;
頁腳包含聯絡資訊、社群連結和網站導覽。
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
您可以在這裡查看該專案的現場演示。
在這篇文章中，我們使用 React 建立了一個功能豐富的響應式網站，展示了雲端儲存服務。我們介紹瞭如何建立項目、分解組件以及使用 CSS 設計它們的樣式。這種模組化方法可以輕鬆根據需要添加或更新功能。
這個專案的靈感來自Fylo雲端儲存服務設計。
Abhishek Gurjar 是一位專注的 Web 開發人員，熱衷於創建實用且功能性的 Web 應用程式。在 GitHub 上查看他的更多專案。
以上是使用 React 建立 Fylo 雲端儲存網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！
