Membina Studio Gelung Menggunakan React

pengenalan

Loop Studio ialah tapak web yang mengasyikkan yang direka untuk mempamerkan pelbagai projek realiti maya (VR). Menggunakan React, kami boleh mengurus dan menjadikan komponen berbeza dengan cekap untuk membina pengalaman pengguna yang padu dan interaktif. Projek ini menampilkan reka bentuk yang bersih dengan pengepala navigasi, bahagian VR terperinci, galeri ciptaan dan pengaki dengan pautan media sosial.

Gambaran Keseluruhan Projek

Tapak web Loop Studio termasuk bahagian utama berikut:

• Tajuk: Navigasi dan tajuk utama
• Bahagian VR: Maklumat tentang kepakaran VR syarikat
• Galeri Penciptaan: Pameran ciptaan VR yang berbeza
• Footer: Pautan media sosial dan maklumat tambahan

Ciri-ciri

• Reka Bentuk Responsif: Memastikan tapak web kelihatan hebat pada semua peranti.
• Elemen Interaktif: Kesan tuding dan paparan kandungan dinamik.
• Reka Letak Bersih: Bahagian tersusun dan reka bentuk yang menarik secara visual.

Teknologi yang Digunakan

• Reaksi: Pustaka JavaScript untuk membina antara muka pengguna
• CSS: Penggayaan untuk reka letak dan reka bentuk
• Pek web: Pengikat modul untuk pengurusan aset (jika perlu)

Pemasangan

Untuk memulakan projek ini, klon repositori dan pasang kebergantungan yang diperlukan:

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

Penggunaan*

Untuk menjalankan projek secara setempat, gunakan arahan berikut:

npm start

Ini akan memulakan pelayan pembangunan dan membuka aplikasi dalam pelayar web lalai anda.

Struktur Projek

Berikut ialah pecahan struktur projek:

App.js

Komponen utama yang menjadikan semua komponen lain.

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

Memaparkan menu navigasi dan tajuk utama.

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

Menunjukkan kepakaran VR Loop Studio.

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

Memaparkan galeri projek VR yang berbeza.

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;

Footer.js

Mengandungi pautan media sosial dan maklumat pengaki.

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;

Penerangan Kod

• Komponen Pengepala: Menggunakan flexbox untuk reka letak, termasuk pautan navigasi dan memaparkan tajuk dengan imej latar belakang.
• Komponen VR: Menunjukkan imej dan teks tentang kepimpinan VR Loop Studio.
• Komponen Penciptaan: Memaparkan grid kad, setiap satu mewakili projek VR yang berbeza.
• Komponen Pengaki: Mengandungi pautan media sosial dan teks pengaki.

Demo Langsung

Anda boleh melihat demo langsung tapak web Loop Studio di sini .

Kesimpulan

Membina tapak web Loop Studio dengan React membolehkan struktur modular dan boleh diselenggara. Dengan memecahkan projek kepada komponen boleh guna semula, anda boleh mengurus dan mengemas kini setiap bahagian secara bebas. Pendekatan ini bukan sahaja meningkatkan kecekapan pembangunan tetapi juga memastikan reka bentuk yang bersih dan profesional.

Kredit

• Dokumentasi React: Tapak Rasmi React
• Sumber Imej: [Imej Stok/Sumber Reka Bentuk]

Pengarang

Abhishek Gurjar ialah pembangun web berdedikasi yang bersemangat untuk mencipta aplikasi web yang praktikal dan berfungsi. Lihat lebih banyak projek beliau di GitHub.

Atas ialah kandungan terperinci Membina Studio Gelung Menggunakan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!