วิธีรวมเทมเพลตธีม Bootstrap กับแอป React

วิธีรวมเทมเพลตธีม Bootstrap กับแอป React
ผู้อ่านเช่นคุณช่วยสนับสนุน MUO เมื่อคุณทำการซื้อโดยใช้ลิงก์บนเว็บไซต์ของเรา เราอาจได้รับค่าคอมมิชชั่นจากพันธมิตร อ่านเพิ่มเติม.

การสร้างอินเทอร์เฟซส่วนหน้าอาจเป็นเรื่องที่ท้าทายหากคุณยังใหม่กับ ReactJS Bootstrap framework ควบคู่ไปกับเทมเพลตทำให้ง่ายและรวดเร็วขึ้น





Bootstrap มีเทมเพลตธีมที่ทุกคนสามารถปรับแต่งและเผยแพร่ได้ฟรี คุณสามารถเลือกจากเทมเพลตมากมายก่อนที่จะดาวน์โหลดและใช้งานในแอพของคุณ



เทมเพลตช่วยให้คุณสร้างส่วนต่อประสานส่วนหน้าที่น่าทึ่งได้อย่างรวดเร็ว ทำให้มีเวลามากขึ้นในการมุ่งเน้นไปที่คุณสมบัติที่ซับซ้อน คุณสามารถเรียนรู้เกี่ยวกับเทมเพลต Bootstrap ได้โดยการรวมเข้ากับแอป ReactJS





สร้างแอปตอบโต้ของคุณ

เริ่มโดย การสร้างแอป ReactJS ในโฟลเดอร์บนเครื่องของคุณ หรือคุณสามารถติดตามอย่างเป็นทางการ คู่มือการตอบสนอง ในการสร้างแอพใหม่

ดาวน์โหลดเทมเพลต Bootstrap

ดาวน์โหลดเทมเพลตที่คุณเลือกจาก เริ่ม Bootstrap เว็บไซต์ธีมหรืออื่น ๆ ที่คุณต้องการ มีหลายไซต์ที่มีเทมเพลต Bootstrap ฟรีทางออนไลน์



วิธีค้นหาที่อยู่ IP ของเครื่องพิมพ์ windows 7

สำหรับคู่มือนี้ ให้ดาวน์โหลดธีม Bootstrap ชื่อ Agency

เทมเพลตบูตสแตรป

เมื่อดาวน์โหลดแล้ว ให้แตกไฟล์โฟลเดอร์เพื่อดูเนื้อหา คุณจะสังเกตเห็นว่าคุณมีโฟลเดอร์ชื่อ asset, CSS, JS และไฟล์ชื่อ index.html



เพิ่ม Bootstrap Template ให้กับ ReactJS App

ถัดไป คัดลอกเนื้อหาของโฟลเดอร์ที่ดาวน์โหลดไปไว้ในโฟลเดอร์ชื่อ สาธารณะ ในแอป React ของคุณ คุณจะสังเกตเห็นว่าตอนนี้คุณมีไฟล์ index.html สองไฟล์ คัดลอกเนื้อหาของ Bootstrap index.html ไฟล์ลงในแอป React index.html ไฟล์.

อินเทอร์เฟซของแอป react พร้อมเทมเพลต bootstrap

แสดงเทมเพลต Bootstrap

หลังจากเพิ่ม Bootstrap HTML ลงใน index.html ของแอพแล้ว ให้รันแอพเพื่อดูว่าการรวมสำเร็จหรือไม่ ใช้คำสั่งต่อไปนี้:



 npm start

คุณควรเห็นเทมเพลตในเบราว์เซอร์ของคุณดังที่แสดงในภาพต่อไปนี้

เทมเพลต bootstrap แสดงบนแอป react

รวม Bootstrap Theme เข้ากับส่วนประกอบของแอพ

ในการรวมเทมเพลต Bootstrap เข้ากับ React App คุณต้องคัดลอกส่วน HTML จาก index.html ไปยังแต่ละส่วนประกอบ คอมโพเนนต์ทำให้คุณสามารถเขียนโค้ดสำหรับส่วนต่าง ๆ ของแอพและนำกลับมาใช้ใหม่ได้ สิ่งนี้จะช่วยลดการทำซ้ำและจัดระเบียบโครงสร้างของแอพของคุณ

ขณะนี้ไฟล์ index.html มีส่วนต่างๆ ของการนำทาง เกี่ยวกับเรา ผู้ติดต่อ และส่วนท้าย ในโฟลเดอร์ src ให้สร้างโฟลเดอร์ คอมโพเนนต์ และเพจสองรายการ แบ่งส่วนออกเป็นโฟลเดอร์ที่แสดงด้านล่าง:

ส่วนประกอบควรมีดังต่อไปนี้:

วิธีเข้าถึงโทรศัพท์ Android จากระยะไกลจากพีซี
  • Header.jsx: ส่วนโฆษณาด้านบน
  • Navigation.jsx: แถบการนำทางและส่วนท้าย

โฟลเดอร์ของเพจจะมีดังต่อไปนี้:

  • AboutUs.jsx: ข้อมูลเกี่ยวกับเรา
  • Home.jsx: ส่วนบริการ ผลงาน ลูกค้า และทีม
  • Contacts.jsx: ข้อมูลการติดต่อ

คัดลอก HTML ของแต่ละส่วนจากไฟล์ index.html และเพิ่มลงในแต่ละส่วนประกอบ ไวยากรณ์ควรมีลักษณะดังนี้:

 import React from 'react' 
 
const Header = () => { 
    return ( 
      <div> 
        <header className="masthead"> 
          <div className="container"> 
            <div className="masthead-subheading">Welcome To Our Studio!</div> 
 
            <div className="masthead-heading text-uppercase"> 
              It's Nice To Meet You 
            </div> 
 
            <a className="btn btn-primary btn-xl text-uppercase" href="#services"> 
              Tell Me More 
            </a> 
          </div> 
        </header> 
      </div> 
    ); 
}; 
 
export default Header

จากนั้น เปลี่ยนไวยากรณ์ของ HTML ในคอมโพเนนต์เป็น JSX หากต้องการทำสิ่งนี้โดยอัตโนมัติในโปรแกรมแก้ไข Vscode ให้คลิก Ctrl + Shift + P คลิกที่ตัวเลือก HTML เป็น JSX ในหน้าต่างที่ปรากฏขึ้นเพื่อเปลี่ยน HTML เป็น JSX

JSX เป็นส่วนขยายไวยากรณ์ของ JavaScript อนุญาตให้คุณใช้ HTML และ JavaScript ผสมกันเพื่อเขียนโค้ดในส่วนประกอบ เมื่อคุณคัดลอกส่วนทั้งหมดไปยังคอมโพเนนต์แล้ว ไฟล์ index.html จะเหลือเพียงลิงก์สไตล์และสคริปต์เท่านั้น

มันจะมีลักษณะดังนี้:

 <!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
    <meta charset="utf-8" /> 
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta name="theme-color" content="#000000" /> 
    <meta name="description" content="Web site created using create-react-app"/> 
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 
    <title>React App</title> 
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> 
 
    <!-- Font Awesome icons (free version)--> 
    <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script> 
 
    <!-- Google fonts--> 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" /> 
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" /> 
 
    <!-- Core theme CSS (includes Bootstrap)--> 
    <link href="%PUBLIC_URL%/css/styles.css" rel="stylesheet" /> 
</head> 
 
<body> 
    <noscript>You need to enable JavaScript to run this app.</noscript> 
 
    <div id="root"></div> 
 
    <!-- Bootstrap core JS--> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> 
 
    <!-- Core theme JS--> 
    <script src="%PUBLIC_URL%/js/scripts.js"></script> 
 
    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *--> 
 
    <!-- * * SB Forms JS * *--> 
 
    <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *--> 
 
    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *--> 
 
    <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script> 
</body> 
 
</html>

สร้างเส้นทางสำหรับส่วนประกอบ

เมื่อคุณมีลิงก์ สคริปต์ และส่วนประกอบในแอปแล้ว คุณต้องสร้างเส้นทางสำหรับสิ่งเหล่านี้ในไฟล์ App.js เส้นทางจะแสดงหน้าบนแอพเพื่อให้เป็นไดนามิก

หากต้องการเรนเดอร์เพจ ให้ติดตั้ง react-router-dom ด้วยคำสั่งต่อไปนี้:

 npm install react-router-dom

ใน แอป js ไฟล์, นำเข้า BrowserRouter เป็น Router, Routes และ Route จากไฟล์ ไลบรารี react-router-dom . จากนั้นนำเข้าทั้งหมด ส่วนประกอบ และ หน้า . ไฟล์ควรมีลักษณะดังนี้:

 import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 
import Navigation from './components/Navigation'; 
import Home from './Pages/Home'; 
import About from './Pages/About'; 
import Contact from './Pages/Contact' 
import Header from "./components/Header"; 
 
function App() { 
    return ( 
      <div className="App"> 
        <Header /> 
        <Home /> 
        <About /> 
        <Contact/> 
 
        <Router> 
          <Navigation> 
            <Routes> 
              <Route exact path="/" element={<Home />} /> 
              <Route exact path="/about" element={<About />} /> 
              <Route exact path="/contact" element={<Contact />} /> 
            </Routes> 
          </Navigation> 
        </Router> 
      </div> 
    ); 
} 
 
export default App;

คุณควรเห็นหน้าที่แสดงผลบนโลคัลโฮสต์เมื่อคุณสำรวจเบราว์เซอร์ คล้ายกับเทมเพลตที่คุณดาวน์โหลดตามภาพประกอบด้านล่าง

เทมเพลตบูตสแตรปแบบรวมในเว็บเบราว์เซอร์

ขอแสดงความยินดี คุณได้ผสานรวมธีม Bootstrap เข้ากับ React App ของคุณเรียบร้อยแล้ว ขณะนี้คุณสามารถปรับแต่งหน้าตามความต้องการของคุณ

แอพดูหนังฟรี

เหตุใดจึงต้องใช้เทมเพลตธีมของ Bootstrap

เทมเพลต Bootstrap ช่วยสร้างอินเทอร์เฟซส่วนหน้าที่น่าทึ่งภายในเวลาอันสั้น มีธีมให้เลือกมากมาย ธีมทั้งหมดเป็นเวอร์ชัน Bootstrap ล่าสุด พวกเขายังมาพร้อมกับใบอนุญาต MIT และเป็นการออกแบบอุตสาหกรรมล่าสุด

แม้ว่าข้อดีจะมีมากมาย แต่การพึ่งพาเทมเพลตช่วยลดความคิดสร้างสรรค์ เป็นเรื่องปกติที่จะพบธีมยอดนิยมหนึ่งธีมที่ใช้กับเว็บไซต์อื่นๆ ทางออนไลน์ อย่างไรก็ตาม คุณสามารถปรับแต่งเทมเพลตให้เป็นการออกแบบที่ไม่ซ้ำใครได้

ตอนนี้คุณสามารถรวมเทมเพลต Bootstrap เข้ากับ React App ของคุณได้แล้ว เริ่มสร้างด้วยเทมเพลต Bootstrap และเพลิดเพลินไปกับอินเทอร์เฟซส่วนหน้าที่สวยงาม