首页 > 文章 > 前端

使用 React 构建 Fylo 云存储网站

来源：dev.to

时间：2024-09-12 18:39:40 349浏览收藏

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《使用 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 (
    <>
      
      
      
      
      
      
    
  );
};

export default app;

2. 导航栏组件

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

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

const navbar = () => {
  return (
    
      
        
      
      
        features
        team
        sign in
      
    
  );
};

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
      
    
    
      
        
        +1-543-123-4567
      
      
        
        example@fylo.com
 Made with ❤️ by Abhishek Gurjar
      
    
    
      About Us
      Jobs
      Pres
      Blog
    
    
      Contact Us
      Terms
      Privacy
    
   
  )
}

export default Footer