React を使用した Loop Studio の構築

導入

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

クレジット

• React ドキュメント: React 公式サイト
• 画像ソース: [ストック画像/デザインリソース]

著者

Abhishek Gurjar は、実用的で機能的な Web アプリケーションの作成に情熱を注ぐ専任の Web 開発者です。 GitHub で彼のプロジェクトをさらにチェックしてください。

以上がReact を使用した Loop Studio の構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。