Création de Loop Studio à l'aide de React-tutoriel CSS-php.cn

Création de Loop Studio à l'aide de React

王林

Libérer： 2024-09-11 10:30:16

original

415 Les gens l'ont consulté

Building Loop Studio Using React

Introduction

Loop Studio est un site Web immersif conçu pour présenter divers projets de réalité virtuelle (VR). Grâce à React, nous pouvons gérer et restituer efficacement différents composants pour créer une expérience utilisateur cohérente et interactive. Ce projet présente un design épuré avec un en-tête de navigation, une section VR détaillée, une galerie de créations et un pied de page avec des liens vers les réseaux sociaux.

Aperçu du projet

Le site Web Loop Studio comprend les sections clés suivantes :

En-tête :Navigation et titre principal
Section VR :Informations sur l'expertise VR de l'entreprise
Galerie de créations :Vitrine de différentes créations VR
Pied de page : Liens vers les réseaux sociaux et informations supplémentaires

Caractéristiques

Conception réactive : Garantit que le site Web s'affiche parfaitement sur tous les appareils.
Éléments interactifs : Effets de survol et affichage de contenu dynamique.
Mise en page épurée : Sections organisées et design visuellement attrayant.

Technologies utilisées

React : Bibliothèque JavaScript pour créer des interfaces utilisateur
CSS : Style pour la mise en page et le design
Webpack : Bundler de modules pour la gestion des actifs (si nécessaire)

Installation

Pour démarrer ce projet, clonez le référentiel et installez les dépendances nécessaires :

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

Copier après la connexion

Utilisation*

Pour exécuter le projet localement, utilisez la commande suivante :

npm start

Copier après la connexion

Cela démarrera le serveur de développement et ouvrira l'application dans votre navigateur Web par défaut.

Structure du projet

Voici une répartition de la structure du projet :

App.js

Le composant principal qui restitue tous les autres composants.

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

Copier après la connexion

En-tête.js

Affiche le menu de navigation et le titre principal.

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;

Copier après la connexion

VR.js

Montre l'expertise VR de 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;

Copier après la connexion

Création.js

Affiche une galerie de différents projets 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;

Copier après la connexion

Pied de page.js

Contient des liens vers les réseaux sociaux et des informations de pied de page.

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;

Copier après la connexion

Explication du code

Composant d'en-tête : Utilise flexbox pour la mise en page, inclut des liens de navigation et affiche un titre avec une image d'arrière-plan.
Composant VR : Affiche une image et un texte sur le leadership VR de Loop Studio.
Composant de création : Affiche une grille de cartes, chacune représentant un projet VR différent.
Composant de pied de page : Contient des liens vers les réseaux sociaux et un texte de pied de page.

Démo en direct

Vous pouvez voir la démo en direct du site Loop Studio ici .

Conclusion

Construire le site Web Loop Studio avec React permet d'avoir une structure modulaire et maintenable. En décomposant le projet en composants réutilisables, vous pouvez gérer et mettre à jour chaque section indépendamment. Cette approche améliore non seulement l'efficacité du développement, mais garantit également une conception épurée et professionnelle.

Crédits

Documentation React : Site officiel de React
Sources d'images : [Stock Images/Ressources de conception]

Auteur

Abhishek Gurjar est un développeur Web dévoué et passionné par la création d'applications Web pratiques et fonctionnelles. Découvrez plus de ses projets sur GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!