React を使用した Loop Studio の構築-CSSチュートリアル-php.cn

React を使用した Loop Studio の構築

王林

リリース： 2024-09-11 10:30:16

オリジナル

446 人が閲覧しました

Building Loop Studio Using React

導入

Loop Studio は、さまざまな仮想現実 (VR) プロジェクトを紹介するために設計された没入型 Web サイトです。 React を使用すると、さまざまなコンポーネントを効率的に管理およびレンダリングして、一貫性のあるインタラクティブなユーザーエクスペリエンスを構築できます。このプロジェクトは、ナビゲーションヘッダー、詳細な VR セクション、作品のギャラリー、ソーシャルメディアリンクを含むフッターを備えたクリーンなデザインを特徴としています。

プロジェクト概要

Loop Studio Web サイトには次の主要なセクションが含まれています:

ヘッダー: ナビゲーションとメインタイトル
VR セクション: 会社の VR 専門知識に関する情報
作品ギャラリー: さまざまな VR 作品のショーケース
フッター: ソーシャルメディアリンクと追加情報

特徴

レスポンシブデザイン: Web サイトがすべてのデバイスで適切に表示されるようにします。
インタラクティブ要素: ホバー効果と動的コンテンツ表示。
すっきりとしたレイアウト: 整理されたセクションと視覚的に魅力的なデザイン。

使用されている技術

React: ユーザーインターフェイスを構築するための JavaScript ライブラリ
CSS: レイアウトとデザインのスタイル
Webpack: 資産管理用のモジュールバンドラー (必要な場合)

インストール

このプロジェクトを開始するには、リポジトリのクローンを作成し、必要な依存関係をインストールします。

git clone https://github.com/abhishekgurjar-in/Loop-Studio.git
cd easybank-landing-page
npm install

ログイン後にコピー

使用法*

プロジェクトをローカルで実行するには、次のコマンドを使用します:

npm start

ログイン後にコピー

これにより、開発サーバーが起動し、デフォルトの Web ブラウザでアプリケーションが開きます。

プロジェクトの構造

プロジェクト構造の内訳は次のとおりです:

App.js

他のすべてのコンポーネントをレンダリングするメインコンポーネント。

import React from 'react'
import "./App.css"
import Header from './components/Header'
import VR from './components/VR'
import Creation from './components/Creation'
import Footer from './components/Footer'

const App = () => {
  return (
    <>
      <Header/>
      <VR/>
      <Creation/>
      <Footer/>
    </>
  )
}

export default App

ログイン後にコピー

ヘッダー.js

ナビゲーションメニューとメインタイトルを表示します。

import React from "react";
import Logo from "../assets/images/logo.svg";
const Header = () => {
  return (
    <div className="header">
   <div className="opacity">
   <div className="nav">
        <div className="left-nav">
          <img src={Logo} alt="" />
        </div>
        <div className="right-nav">
          <a href="">About</a>
          <a href="">Career</a>
          <a href="">Events</a>
          <a href="">Products</a>
          <a href="">Support</a>
        </div>
      </div>
      <div className="title-box">
        <h1 className="title">IMMERSIVE EXPERIENCES THAT DELIVER</h1>
      </div>
   </div>
    </div>
  );
};

export default Header;

ログイン後にコピー

VR.js

Loop Studio の VR 専門知識を示します。

import React from "react";
import Vr from "../assets/images/desktop/image-interactive.jpg";
const VR = () => {
  return (
    <div className="vr">
      <div className="vr-text">
        <h1>THE LEADER IN INTERACTIVE VR</h1>
        <p>
          Founded in 2011, Loopstudios has been producing world-class virtual
          reality projects for some of the best companies around the globe. Our
          award-winning creations have transformed businesses through digital
          experiences that bind to their brand.
        </p>
      </div>
      <div className="vr-image">
        <img src={Vr} alt="" />
      </div>
    </div>
  );
};

export default VR;

ログイン後にコピー

作成.js

さまざまな VR プロジェクトのギャラリーを表示します。

import React from "react";

const Creation = () => {
  return (
    <div className="creation">
      <div className="title-creation">
        <h4>OUR CREATIONS</h4>
        <h5>SEE ALL</h5>
      </div>
      <div className="cards">
        <div className="card-1">
          <h1>
            DEEP <br /> EARTH
          </h1>
        </div>
        <div className="card-2">
          <h1>
            NIGHT <br /> ARCADE
          </h1>
        </div>
        <div className="card-3">
          <h1>
            SOCCER <br /> TEAM <br /> VR
          </h1>
        </div>
        <div className="card-4">
          <h1>
            THE <br />
            GRID
          </h1>
        </div>
      </div>
      <div className="cards">
        <div className="card-5">
          <h1>
          FROM <br /> UP <br /> ABOVE <br /> VR
          </h1>
        </div>
        <div className="card-6">
          <h1>
          POCKET <br /> BOREALIS
          </h1>
        </div>
        <div className="card-7">
          <h1>
          THE <br /> CURIOSITY
          </h1>
        </div>
        <div className="card-8">
          <h1>
          MAKE <br /> IT <br /> FISHEYE
          </h1>
        </div>
      </div>
    </div>
  );
};

export default Creation;

ログイン後にコピー

フッター.js

ソーシャルメディアのリンクとフッター情報が含まれます。

import React from "react";
import logo from "../assets/images/logo.svg";
import fb from "../assets/images/icon-facebook.svg";
import tw from "../assets/images/icon-twitter.svg";
import pt from "../assets/images/icon-pinterest.svg";
import ig from "../assets/images/icon-instagram.svg";

const Footer = () => {
  return (
    <div className="footer">
      <div className="left-footer">
        <img src={logo} alt="" />
        <div className="left-link">
          <a href="">About</a>
          <a href="">Career</a>
          <a href="">Events</a>
          <a href="">Products</a>
          <a href="">Support</a>
        </div>
      </div>
      <div className="right-footer">
        <div className="social-logo">
          <img src={fb} alt="" />
          <img src={tw} alt="" />
          <img src={pt} alt="" />
          <img src={ig} alt="" />
        </div>
        <p>© 2021 Loopstudios. All rights reserved.</p>
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  );
};

export default Footer;

ログイン後にコピー

コードの説明

ヘッダーコンポーネント: レイアウトにフレックスボックスを使用し、ナビゲーションリンクを含め、背景画像付きのタイトルを表示します。
VR コンポーネント: Loop Studio の VR リーダーシップに関する画像とテキストを表示します。
作成コンポーネント: それぞれが異なる VR プロジェクトを表すカードのグリッドを表示します。
フッターコンポーネント: ソーシャルメディアのリンクとフッターテキストが含まれます。

ライブデモ

ここで、Loop Studio ウェブサイトのライブデモをご覧いただけます。

結論

React を使用して Loop Studio Web サイトを構築すると、モジュール式で保守可能な構造が可能になります。プロジェクトを再利用可能なコンポーネントに分割することで、各セクションを個別に管理および更新できます。このアプローチにより、開発効率が向上するだけでなく、クリーンでプロフェッショナルなデザインが保証されます。