React를 사용하여 Loop Studio 구축-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

React를 사용하여 Loop Studio 구축

王林

Sep 11, 2024 am 10:30 AM

Building Loop Studio Using React

소개

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></header>
      <vr></vr>
      <creation></creation>
      <footer></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="%7BLogo%7D" 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 id="IMMERSIVE-EXPERIENCES-THAT-DELIVER">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 id="THE-LEADER-IN-INTERACTIVE-VR">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="%7BVr%7D" alt="">
      </div>
    </div>
  );
};

export default VR;

Creation.js

다양한 VR 프로젝트 갤러리를 표시합니다.

import React from "react";

const Creation = () => {
  return (
    <div classname="creation">
      <div classname="title-creation">
        <h4 id="OUR-CREATIONS">OUR CREATIONS</h4>
        <h5 id="SEE-ALL">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="%7Blogo%7D" 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="%7Bfb%7D" alt="">
          <img src="%7Btw%7D" alt="">
          <img src="%7Bpt%7D" alt="">
          <img src="%7Big%7D" 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 웹사이트를 구축하면 모듈식이며 유지 관리 가능한 구조가 가능합니다. 프로젝트를 재사용 가능한 구성 요소로 분류하면 각 섹션을 독립적으로 관리하고 업데이트할 수 있습니다. 이러한 접근 방식은 개발 효율성을 향상시킬 뿐만 아니라 깔끔하고 전문적인 디자인을 보장합니다.