介绍
在这篇博文中，我们将逐步介绍如何使用 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 (
<>
2. 导航栏组件
导航栏包含徽标和三个可点击的链接：功能、团队和登录。
import logo from "../assets/images/logo.svg";
const navbar = () => {
return (
);
};
export default navbar;
3. 主页组件
主页部分通过引人注目的背景图像和“开始”按钮介绍了该服务。
import bghome from "../assets/images/illustration-intro.png";
const home = () => {
return (
@@##@@
all your files in one secure location, accessible anywhere.
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.
get started
);
};
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 (
@@##@@
access your files, anywhere
the ability to use a smartphone, tablet, or computer to access your
account means your files follow you everywhere.
@@##@@
security you can trust
2-factor authentication and user-controlled encryption are just a couple of the security features we allow to help secure your files.
@@##@@
real-time collaboration
securely share files and folders with friends, family and colleagues for live collaboration. no email attachments required.
@@##@@
store any type of file
whether you're sharing holidays photos or work documents, fylo has you covered allowing for all file types to be securely stored and shared.
);
};
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 (
fylo has improved our team productivity by an order of magnitude.
since making the switch our team has become a well-oiled
collaboration machine.
@@##@@
satish patel
satish patel founder & ceo, huddle
fylo has improved our team productivity by an order of magnitude.
since making the switch our team has become a well-oiled
collaboration machine.
@@##@@
bruce mckenzie
bruce mckenzie founder & ceo, huddle
fylo has improved our team productivity by an order of magnitude.
since making the switch our team has become a well-oiled
collaboration machine.
@@##@@
iva boyd
iva boyd founder & ceo, huddle
get early access today
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.
get started for free
);
};
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 (
@@##@@
@@##@@
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
若冰企业商务平台.net
集企业自助建站、网络营销、商品推广于一体的系统 功能说明： 1、系统采用Microsoft SQL Server大型数据库支持，查询数据库用的全是存储过程，速度和性能极好。开发环境是vs.net，采用4层结构，具有很好的可维护性和可扩冲性。 2、用户注册和登陆 未注册用户只具备浏览商品、新闻和留言功能；要采购商品，需接受服务协议并填写相关注册信息成为正式用户后方可进行，以尽可能减少和避免无效
下载
@@##@@
+1-543-123-4567
@@##@@
example@fylo.com
Made with ❤️ by Abhishek Gurjar
About Us
Jobs
Pres
Blog
Contact Us
Terms
Privacy
)
}
export default Footer
现场演示
您可以在这里查看该项目的现场演示。
结论
在这篇文章中，我们使用 react 创建了一个功能丰富的响应式网站，展示了云存储服务。我们介绍了如何构建项目、分解组件以及使用 css 设计它们的样式。这种模块化方法可以轻松根据需要添加或更新功能。
制作人员
这个项目的灵感来自于fylo云存储服务设计。
作者
abhishek gurjar 是一位专注的 web 开发人员，热衷于创建实用且功能性的 web 应用程序。在 github 上查看他的更多项目。
