当前位置：首页 > 文章列表 > 文章 > 前端 > 使用 React 构建 Fylo 云存储网站

使用 React 构建 Fylo 云存储网站

来源：dev.to 2024-09-12 18:39:40 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《使用 React 构建 Fylo 云存储网站》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

介绍

在这篇博文中，我们将逐步介绍如何使用 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">
        <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. 主页组件

主页部分通过引人注目的背景图像和“开始”按钮介绍了该服务。

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. 功能组件

该组件重点介绍了云服务的四个关键功能，并附有相应的图标和说明。

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. 推荐部分

此部分包含满意用户的反馈及其个人资料图片。

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">
            &lt;input type=&quot;text&quot; placeholder=&quot; email@example.com&quot; /&gt;
          </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">
      <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