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

สร้างเว็บไซต์ที่ตอบสนองใน React JS ด้วยองค์ประกอบสไตล์และ GSAP สำหรับแอนิเมชั่นเลื่อนที่ยอดเยี่ยม

ที่เก็บนี้มีรหัสสำหรับเว็บไซต์เอเจนซี่ใน ReactJS

ดูการสาธิต: https://agency-website-eta.vercel.app/

หากคุณต้องการเรียนรู้วิธีการสร้างโปรดชำระเงินต่อไปนี้ การสอน ?:
วิธีการสร้างเว็บไซต์ที่ตอบสนองใน React JS ด้วยองค์ประกอบสไตล์และ GSAP สำหรับแอนิเมชั่นเลื่อนที่ยอดเยี่ยม

รูปภาพของเว็บไซต์:

โค้ดบัคส์โค้ดบัคส์โค้ดบัคส์

[ฉันขอขอบคุณถ้าคุณให้เครดิตที่เหมาะสมเมื่อใช้เว็บไซต์นี้เพื่อใช้ในเชิงพาณิชย์]

ทรัพยากรที่ใช้ในโครงการนี้

ออกแบบใน: https://www.figma.com/
รูปร่าง 3d จาก: https://www.figma.com/community/file/91777039353073016/3d-shapes
ไอคอนโซเชียลจาก: https: //fontawesome.com/
BLOB Images จาก: https://www.figma.com/community/plugin/739208439270091369/blobs
ภาพมนุษย์: https://www.figma.com/community/plugin/739503328703046360/humaaans-for-figma
SVGs จาก: https://undraw.co/
โลโก้จาก: https://www.figma.com/community/plugin/768094929040207895/logo-creator
Rocket 3d Image จาก: https://www.figma.com/community/plugin/76958393361258724/vectary-3d-elements
Avatar-1: ภาพถ่ายโดย Christiana Rivers บน Unsplash
Avatar-2: ภาพถ่ายโดย Joseph Gonzalez บน Unsplash
Avatar-3: ภาพถ่ายโดย Sam Burriss บน Unsplash
Avatar-4: ภาพถ่ายโดย whereslugo บน unsplash

โครงการนี้ถูก bootstrapped ด้วยแอป Create React

สคริปต์ที่มีอยู่

ในไดเรกทอรีโครงการคุณสามารถเรียกใช้:

npm start

รันแอพในโหมดการพัฒนา
เปิด http: // localhost: 3000 เพื่อดูในเบราว์เซอร์

หน้าจะโหลดซ้ำหากคุณทำการแก้ไข
คุณจะเห็นข้อผิดพลาดผ้าสำลีในคอนโซล

npm test

เปิดตัวนักวิ่งทดสอบในโหมดนาฬิกาแบบโต้ตอบ
ดูหัวข้อเกี่ยวกับการเรียกใช้การทดสอบสำหรับข้อมูลเพิ่มเติม

npm run build

สร้างแอพสำหรับการผลิตไปยังโฟลเดอร์ build
มันรวมกันอย่างถูกต้องตอบสนองในโหมดการผลิตและปรับการสร้างเพื่อประสิทธิภาพที่ดีที่สุด

บิลด์มีขนาดเล็กและชื่อไฟล์รวมถึงแฮช
แอพของคุณพร้อมที่จะนำไปใช้งานแล้ว!

ดูหัวข้อเกี่ยวกับการปรับใช้สำหรับข้อมูลเพิ่มเติม

npm run eject

หมายเหตุ: นี่เป็นการดำเนินการทางเดียว เมื่อคุณ eject คุณไม่สามารถกลับไป!

หากคุณไม่พอใจกับเครื่องมือสร้างและตัวเลือกการกำหนดค่าคุณสามารถ eject ตลอดเวลา คำสั่งนี้จะลบการพึ่งพาการสร้างครั้งเดียวออกจากโครงการของคุณ

แต่จะคัดลอกไฟล์การกำหนดค่าทั้งหมดและการพึ่งพาสกรรมกริยา (WebPack, Babel, Eslint, ฯลฯ ) ลงในโครงการของคุณเพื่อให้คุณสามารถควบคุมได้อย่างเต็มที่ คำสั่งทั้งหมดยกเว้น eject จะใช้งานได้ แต่พวกเขาจะชี้ไปที่สคริปต์ที่คัดลอกมาเพื่อให้คุณสามารถปรับแต่งได้ ณ จุดนี้คุณเป็นของคุณเอง

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

เรียนรู้เพิ่มเติม

คุณสามารถเรียนรู้เพิ่มเติมในเอกสารประกอบการสร้างแอป

หากต้องการเรียนรู้ React ให้ตรวจสอบเอกสาร React

การแยกรหัส

ส่วนนี้ย้ายมาที่นี่: https://facebook.github.io/create-react-app/docs/code-splitting

วิเคราะห์ขนาดชุด

ส่วนนี้ย้ายมาที่นี่: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

สร้างแอปพลิเคชันเว็บแบบก้าวหน้า

ส่วนนี้ย้ายมาที่นี่: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

การกำหนดค่าขั้นสูง

ส่วนนี้ย้ายมาที่นี่: https://facebook.github.io/create-react-app/docs/advanced-configuration

การปรับใช้

ส่วนนี้ย้ายมาที่นี่: https://facebook.github.io/create-react-app/docs/deployment

npm run build ไม่สามารถลดขนาดลงได้

ส่วนนี้ย้ายมาที่นี่: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

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