使用 React 构建 Fylo 云存储网站

原创

ithorizon 4周前 (10-19) 阅读数 29 #CSS

介绍

在这篇博文中，我们将逐步介绍如何使用 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 = () =&gt; {
  return (
    
      <navbar></navbar><home></home><features></features><working></working><testimonials></testimonials><footer></footer>&gt;
  );
};

export default app;

2. 导航栏组件

导航栏包含徽标和三个可点击的链接：功能、团队和登录。

import logo from "../assets/images/logo.svg";

const navbar = () =&gt; {
  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 = () =&gt; {
  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 = () =&gt; {
  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 = () =&gt; {
  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 &amp; 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 &amp; 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 &amp; 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 = () =&gt; {
  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>
    </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 上查看他的更多项目。

以上就是使用 React 构建 Fylo 云存储网站的详细内容，更多请关注IT视界其它相关文章！

文章标签：组件功能部分网站样式

上一篇：使用 CSS 让您的 Github 个人资料脱颖而出下一篇：使我的标记更加迷人：空间