วิธีผสานรวมเทมเพลต Bootstrap HTML ในแอปพลิเคชัน Reactjs ของคุณ
ในบทความนี้ เราจะเรียนรู้วิธีผสานรวมธีมหรือเทมเพลต HTML-bootstrap ในโครงการ React.js
ข้อกำหนดเบื้องต้น
- เราควรมีความรู้พื้นฐานเกี่ยวกับ React.js
- ควรติดตั้ง Visual Studio Code IDE บนระบบของคุณ
- Bootstrap
มาดาวน์โหลดเทมเพลต Bootstrap กันก่อน คุณสามารถดาวน์โหลดเทมเพลตฟรีได้จากด้านล่าง ลิงค์ . ฉันจะใช้ sb Admin แม่แบบ Bootstrap
สร้าง React.js Project
ในการสร้างโครงการ React.js ใหม่ ให้เปิดพร้อมท์คำสั่งแล้วป้อนคำสั่งต่อไปนี้
npx create-react-app reacttemplatedemo เปิดโครงการที่สร้างขึ้นใหม่ใน Visual Studio Code และติดตั้ง Bootstrap ในโครงการนี้โดยใช้คำสั่งต่อไปนี้
npm install --save bootstrap ตอนนี้ เปิดไฟล์ index.js และเพิ่มการนำเข้า Bootstrap
วิธีสร้างหลายหน้าใน html
import 'bootstrap/dist/css/bootstrap.min.css'; ตอนนี้คัดลอกโฟลเดอร์ css, js และ img จากเทมเพลต
ในโค้ด Visual Studio ให้ไปที่โฟลเดอร์ Public สร้างโฟลเดอร์ใหม่ชื่อ 'assets' และภายในโฟลเดอร์นี้ ให้เพิ่มไฟล์ css, js และ img ที่คุณคัดลอกจากเทมเพลตบูตสแตรป
ตอนนี้เปิดไฟล์ index.html และเพิ่มการอ้างอิงของ css และ js เพิ่มรหัสต่อไปนี้ใน index.html
สรุป
ในบทความนี้ เราได้เรียนรู้วิธีผสานรวมธีมหรือเทมเพลต HTML-bootstrap ในโครงการ React.js
ตอนนี้เรียกใช้โครงการโดยใช้ 'npm start' และตรวจสอบผลลัพธ์
ขอบคุณสำหรับการอ่าน!
#reactjs #bootstrap #html
