หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

แอพ React-Portfolio

หน้าผลงานส่วนบุคคล www.fdaviz.com สร้างขึ้นใน React

กระบวนการสร้าง

  1. ติดตั้งแอป React ใหม่โดยใช้โหนด JS

  2. ย้ายเวอร์ชันพอร์ตโฟลิโอวานิลลาของฉันและย้ายไปยังแอปพลิเคชัน React ใหม่

  3. วิธีแรกคือการใช้ห้องสมุดเพื่อสร้างภาพเคลื่อนไหวเพราะการสร้างตัวเองใช้เวลานาน ด้วยเหตุนี้ฉันจึงตัดสินใจใช้ WOW.js และ antimate.css ห้องสมุด

  4. ใช้อุปกรณ์ประกอบฉากแบบตอบโต้เพื่อจัดการการอ้างอิงส่วนประกอบในแอปพลิเคชันและแบ่งปันรายละเอียดส่วนประกอบเพื่อสร้าง SmoothScroll USIGN รหัสของฉันเอง

  5. หน้าส่วนใหญ่ใช้ bootstrap ยกเว้นแกลเลอรีโมดอลที่มีรหัส CSS3 Flex-Box ของฉันเอง

  6. สร้างโมดูลที่แตกต่างกันสำหรับโครงการแกลเลอรี่และการใช้ตัวจัดการเหตุการณ์ปฏิกิริยาที่ฉันสามารถแสดงแต่ละโครงการโมดอล

  7. แบบฟอร์มใช้ formsfree.io สำหรับการส่งแบ็กเอนด์

  8. ฉันใช้รูปภาพจาก Unsplash ซึ่งใช้งานได้ฟรีและไอคอนจาก Flaticon ซึ่งใช้งานได้ฟรี

  9. ฉันต้องการสร้างพื้นหลังภาพเคลื่อนไหวที่น่าทึ่งที่ด้านบนของหน้าดังนั้นฉันจึงใช้ความช่วยเหลือจาก codepen.io และปรับรหัสเข้ากับเว็บไซต์ของฉัน

ความท้าทายที่ใช้เวลาสักครู่ในการแก้ปัญหา

  1. การใช้ wow.js + antiMiM.css เป็นเรื่องยากในตอนแรก แต่คุ้มค่า ต้องใช้เวลาในการทำงานกับแอพของคุณ แต่ต้องใช้เวลาน้อยกว่าการสร้างห้องสมุดของคุณเอง

  2. การแบ่งปันรายละเอียดส่วนประกอบของ DOM เช่นความสูงออฟเซ็ตต์ ฯลฯ ระหว่างส่วนประกอบอื่น ๆ นั้นค่อนข้างยากเพราะ React Refs ต้องจับคู่ ID ของคอนเทนเนอร์ผู้ปกครอง นั่นใช้เวลานานในการคิดออก

  3. หลังจากใช้ bootstrap ในขณะที่ฉันต้องเรียนรู้เทคนิค CSS3 บางอย่างเช่น Flex-Box และวิธีใช้ @KeyFrames + Animation

อัปเดต NPMS

  1. ลบไลบรารี Node-Sass (เลิกใช้แล้ว) เพื่อใช้ SASS สำหรับความเข้ากันได้ของ bootstrap

บทสรุป

ขอบคุณสำหรับการเยี่ยมชมไซต์ React-Portfolio ของฉันและสละเวลาอ่านสิ่งนี้!

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด