介绍
在这篇博文中，我们将逐步介绍如何使用 react 创建一个功能丰富的云存储网站。该网站受 fylo 启发，提供了主页、功能、工作原理、感言和页脚等部分。在此过程中，我们将讨论用于构建这个完全响应式网站的结构、组件和样式。
项目概况
该项目由多个部分组成，旨在展示云存储服务。每个部分都是用 react 组件构建的，以实现模块化和易于维护。我们将涵盖以下部分：
- 导航栏
- 首页
- 特点
- 如何运作
- 感言
- 页脚
特征
- 响应式设计：网站会根据不同的屏幕尺寸进行调整。
- 模块化组件：网站的每个部分都是一个单独的 react 组件，使其易于维护和扩展。
- 可重用资源：图像和其他资源导入一次并在组件之间重用。
- css 样式：网站使用自定义 css 来设置每个组件的样式。
使用的技术
- react：基于组件的前端库。
- css：用于设计布局和外观的样式。
- javascript：react 组件的核心逻辑。
- svg 图像：用于图标和图形以增强 ui。
项目结构
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/ 上提供。
代码说明
1. 应用程序.js
这是导入和渲染所有其他组件（导航栏、主页、功能、工作、推荐、页脚）的根组件。
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. 导航栏组件
导航栏包含徽标和三个可点击的链接：功能、团队和登录。
import logo from "../assets/images/logo.svg";
const navbar = () => {
return (
<div classname="navbar">
<div classname="logo">
@@##@@
</div>
<div classname="header">
<a href="">features</a>
<a href="">team</a>
<a href="">sign in</a>
</div>
</div>
);
};
export default navbar;
3. 主页组件
主页部分通过引人注目的背景图像和“开始”按钮介绍了该服务。
import bghome from "../assets/images/illustration-intro.png";
const home = () => {
return (
<div classname="home">
<div classname="home-image">
@@##@@
</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. 功能组件
该组件重点介绍了云服务的四个关键功能，并附有相应的图标和说明。
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">
@@##@@
<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">
@@##@@
<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">
@@##@@
<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">
@@##@@
<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. 推荐部分
此部分包含满意用户的反馈及其个人资料图片。
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">
@@##@@
</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">
@@##@@
</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">
@@##@@
</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. 页脚组件
页脚包含联系信息、社交链接和站点导航。
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">
@@##@@
</div>
<div className="location">
@@##@@
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/10552" title="若冰企业商务平台.net"><img
src="https://img.php.cn/upload/webcode/000/000/002/176269320817085.png" alt="若冰企业商务平台.net" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/10552" title="若冰企业商务平台.net">若冰企业商务平台.net</a>
<p>集企业自助建站、网络营销、商品推广于一体的系统 功能说明： 1、系统采用Microsoft SQL Server大型数据库支持，查询数据库用的全是存储过程，速度和性能极好。开发环境是vs.net，采用4层结构，具有很好的可维护性和可扩冲性。 2、用户注册和登陆 未注册用户只具备浏览商品、新闻和留言功能；要采购商品，需接受服务协议并填写相关注册信息成为正式用户后方可进行，以尽可能减少和避免无效</p>
</div>
<a href="/xiazai/code/10552" title="若冰企业商务平台.net" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
</div>
<div className="sec-2">
<div className="phone">
@@##@@
<p>+1-543-123-4567</p>
</div>
<div className="email">
@@##@@
<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 上查看他的更多项目。
