使用 React 建置 Loop Studio

介紹

Loop Studio 是一個沉浸式網站，旨在展示各種虛擬實境 (VR) 專案。使用 React，我們可以有效地管理和渲染不同的元件，以建立有凝聚力和互動的使用者體驗。該項目採用簡潔的設計，帶有導航標題、詳細的 VR 部分、創作畫廊以及帶有社交媒體連結的頁腳。

項目概況

Loop Studio 網站包含以下關鍵部分：

• 標題：導航與主標題
• VR部分：有關公司VR專業知識的資訊
• 創作畫廊：展示不同的VR創作
• 頁腳：社群媒體連結與附加資訊

特徵

• 響應式設計：確保網站在所有裝置上看起來都很棒。
• 互動元素：懸停效果與動態內容顯示。
• 乾淨的佈局：組織良好的部分和視覺上吸引人的設計。

使用的技術

• React： 用來建立使用者介面的 JavaScript 函式庫
• CSS： 版面與設計的樣式
• Webpack： 用於資產管理的模組捆綁器（如果需要）

安裝

要開始此項目，請複製儲存庫並安裝必要的依賴項：

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

用法*

要在本地運行項目，請使用以下命令：

npm start

這將啟動開發伺服器並在預設網頁瀏覽器中開啟應用程式。

專案結構

以下是專案結構的細分：

應用程式.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

header.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;

程式碼說明

• 標題元件： 利用 Flexbox 進行佈局，包括導航鏈接，並顯示帶有背景圖像的標題。
• VR 元件： 顯示有關 Loop Studio VR 領導力的圖像和文字。
• 建立元件： 顯示卡片網格，每個卡片代表不同的 VR 項目。
• 頁腳元件： 包含社群媒體連結和頁尾文字。

現場演示

您可以在此處查看 Loop Studio 網站的現場演示。

結論

使用 React 建立 Loop Studio 網站可以實現模組化且可維護的結構。透過將專案分解為可重複使用的元件，您可以獨立管理和更新每個部分。這種方法不僅提高了開發效率，而且保證了設計的簡潔和專業。

製作人員

• React 文件： React 官方網站
• 圖片來源： [庫存圖片/設計資源]

作者

Abhishek Gurjar 是一位專注的 Web 開發人員，熱衷於創建實用且功能性的 Web 應用程式。在 GitHub 上查看他的更多專案。

以上是使用 React 建置 Loop Studio的詳細內容。更多資訊請關注PHP中文網其他相關文章！