React を使用して Fylo クラウドストレージ Web サイトを構築する-CSSチュートリアル-php.cn

Building a Fylo Cloud Storage Website with React

導入

このブログ投稿では、React を使用して機能豊富なクラウドストレージ Web サイトを作成する手順を説明します。 Fylo からインスピレーションを得たこのサイトには、ホーム、機能、仕組み、お客様の声、フッターなどのセクションが用意されています。その過程で、この完全にレスポンシブな Web サイトを構築するために使用される構造、コンポーネント、スタイルについて説明します。

プロジェクト概要

このプロジェクトは、クラウドストレージサービスを紹介することを目的とした複数のセクションで構成されています。各セクションはモジュール性とメンテナンスの容易さのために React コンポーネントで構築されています。以下のセクションについて説明します:

ナビゲーションバー
ホーム
特徴
仕組み
お客様の声
フッター

特徴

レスポンシブデザイン: Web サイトはさまざまな画面サイズに合わせて調整されます。
モジュラーコンポーネント: Web サイトの各セクションは個別の React コンポーネントであるため、保守と拡張が簡単です。
再利用可能なアセット: 画像とその他のアセットは一度インポートされ、コンポーネント全体で再利用されます。
CSS スタイリング: Web サイトはカスタム 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

ログイン後にコピー

Web サイトは http://localhost:3000/ で利用可能になります。

コードの説明

1.App.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. ナビゲーションバーコンポーネント

ナビゲーションバーには、ロゴと 3 つのクリック可能なリンク (機能、チーム、サインイン) が含まれています。

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. 機能コンポーネント

このコンポーネントは、クラウドサービスの 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">
            <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">
      <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

ログイン後にコピー

ライブデモ

このプロジェクトのライブデモはここでチェックできます。

結論

この投稿では、React を使用して機能豊富で応答性の高い Web サイトを作成し、クラウドストレージサービスを紹介しました。プロジェクトを構造化し、コンポーネントを分解し、CSS を使用してスタイルを設定する方法について説明しました。このモジュール式アプローチにより、必要に応じて機能を簡単に追加または更新できます。