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

이렇게 하면 개발 서버가 시작되고 기본 웹 브라우저에서 애플리케이션이 열립니다.

프로젝트 구조

프로젝트 구조는 다음과 같습니다.

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

루프 스튜디오의 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;

Creation.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는 실용적이고 기능적인 웹 애플리케이션 개발에 열정을 갖고 있는 헌신적인 웹 개발자입니다. GitHub에서 그의 프로젝트를 더 확인해 보세요.

위 내용은 React를 사용하여 Loop Studio 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!