Membina Studio Gelung Menggunakan React-tutorial css-php.cn

Membina Studio Gelung Menggunakan React

王林

Lepaskan： 2024-09-11 10:30:16

asal

445 orang telah melayarinya

Building Loop Studio Using 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

Salin selepas log masuk

Penggunaan*

Untuk menjalankan projek secara setempat, gunakan arahan berikut:

npm start

Salin selepas log masuk

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

Salin selepas log masuk

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;

Salin selepas log masuk

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;

Salin selepas log masuk

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;

Salin selepas log masuk

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;

Salin selepas log masuk

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!