สิ่งตีพิมพ์ในหัวข้อ 'react'


สร้าง React Hook แบบกำหนดเองสำหรับการติดตามความกว้างหน้าต่างเบราว์เซอร์ (พร้อม TypeScript)
เมื่อเร็ว ๆ นี้ฉันได้ใช้ Custom React Hooks เพื่อล้าง codebase ของฉัน และมันช่วยฉันได้อย่างมหัศจรรย์! ฉันสามารถย้ายโค้ดที่ซ้ำซ้อนที่ซับซ้อนออกไปไปยัง hooks แบบกำหนดเองที่นำมาใช้ซ้ำได้ ในบทความนี้ ฉันจะอธิบายตัวอย่างวิธีที่ฉันใช้ hook แบบกำหนดเองเพื่อติดตามหน้าต่างเบราว์เซอร์หน้าต่างของฉันผ่านองค์ประกอบต่างๆ ในแอปของฉันด้วยบรรทัดเดียว ฉันเป็นผู้สนับสนุนอย่างมากในการใช้ TypeScript ดังนั้นแน่นอนว่าฉันจะใช้ TypeScript ในตัวอย่างของฉัน ก่อนที่จะนำ The Hook ไปใช้งาน..
สร้างโคลน WhatsApp ด้วย Next.js ตอนที่ 12 เรนเดอร์ข้อความ
"รหัสแหล่งที่มา" ในส่วนสุดท้ายจะเห็นว่าช่องป้อนข้อมูลไม่ได้อยู่ด้านล่างเนื่องจากกล่องข้อความยังไม่ได้สร้างเพื่อใช้พื้นที่ทั้งหมด ดังนั้นในส่วนนี้ เราจึงมุ่งเน้นไปที่การสร้าง ‹MessageContainer› และเรนเดอร์ข้อความจำลองด้วย คอนเทนเนอร์ข้อความ หากต้องการสร้าง ‹MessagesContainer› แบบง่ายๆ เพียงสร้างสิ่งนี้โดยมีช่องว่างภายในเท่ากับ 20px สีพื้นหลังสีน้ำตาลเหลือง และดิ้นเท่ากับ 1 เพื่อใช้พื้นที่ทั้งหมด const MessagesContainer = styled.div` padding:20px; background-color:#e5ded8;..
ลดฟังก์ชันจากมุมมองที่ต่างกัน
หมายเหตุ : เครดิตทั้งหมดสำหรับโค้ดบทความนี้ที่ใช้ในบทความนี้ไปที่ Mr Rajesh Pillai คุณสามารถหาเขาได้ที่ Twitter: @rajeshpillai , Medium: @rajeshpillai https://www.youtube.com/channel/UCvhIKdT611F_ebrmIbQ9VDQ ล่าสุดคุณชายคนหนึ่งของฉันได้โพสต์วิดีโอบน youtube และมันทำให้ฉันรู้สึกว่าการรู้สิ่งต่าง ๆ เป็นสิ่งที่แตกต่าง และการใช้มันในรูปแบบที่เป็นไปได้ที่แตกต่างกันก็เป็นวิธีที่แตกต่างออกไป เขาได้โพสต์วิดีโอเกี่ยวกับฟังก์ชันลดขนาดและวิธีใช้งานไว้แล้ว ลดฟังก์ชัน..
การทดสอบการถดถอยของภาพอัตโนมัติด้วย React
คำแนะนำฉบับย่อเกี่ยวกับการทดสอบการถดถอยด้วยภาพอัตโนมัติด้วยไลบรารี ' jsdom-screenshot ' การทดสอบการถดถอยด้วยภาพอัตโนมัติคืออะไร เห็น ครั้งหนึ่ง ดีกว่า ได้ยิน ร้อยครั้ง ฉันพบ GIF ดีๆ ที่อธิบายอย่างสวยงามว่า "การทดสอบการถดถอยด้วยภาพอัตโนมัติ" คืออะไร พบได้ในหน้า การทดสอบภาพหนังสือนิทาน : สิ่งที่จะครอบคลุม: ข้อกำหนดเบื้องต้น; การติดตั้ง; การกำหนดค่า; การทดสอบครั้งแรก การทดสอบหลายครั้ง ทดสอบการเปลี่ยนแปลงการอัพเดตสถานะ ข้อกำหนดเบื้องต้น ฉันได้สร้างโครงการ React..
ตอบสนองส่วนที่ 1 JSX
1. เรื่องที่ 1 ? เริ่มต้นด้วยโค้ดพื้นฐาน: function App() { return ‹h1›สวัสดี!‹/h1› ที่นี่ ‹h1›สวัสดี!‹/h1› ถือเป็น JSX และถูกส่งกลับจากฟังก์ชัน App ดังนั้น พูดง่ายๆ ก็คือ JSX คือสิ่งที่เราเขียนไว้ในส่วนประกอบเพื่อบอก React ว่าเราต้องการแสดงอะไรบนหน้าจอ จากข้อมูลของ React Docs JSX เพียงแค่จัดเตรียมน้ำตาลเชิงวากยสัมพันธ์ให้กับฟังก์ชัน `React.createElement()` *หมายเหตุ: JSX ไม่ได้ถูกเรียกใช้งานจริงภายในเบราว์เซอร์ เนื่องจากไม่ใช่ Javascript ที่ถูกต้อง..
วิธีที่เราใช้ React เพื่อช่วยปรับปรุงประสิทธิภาพของทีมผลิตภัณฑ์ของเรา
หนึ่งในที่รักของครอบครัว Palatinate Tech คือ "การเดินทางเล่นกอล์ฟของคุณ"; เว็บไซต์ที่เชี่ยวชาญเรื่องการเล่นกอล์ฟในช่วงวันหยุดในสหราชอาณาจักรและทั่วโลก เรามุ่งเน้นที่จะนำเสนอราคาที่ทันสมัยและข้อมูลที่เกี่ยวข้องทั้งหมดที่ผู้ใช้จำเป็นต้องใช้ในการตัดสินใจว่าจะไปเที่ยวที่ไหนในช่วงวันหยุด ความท้าทายประการหนึ่งที่เราเผชิญเมื่อเร็วๆ นี้ก็คือจำนวนแพ็กเกจที่ไม่ได้โหลดแบบไดนามิก แต่กลับกลายเป็นฮาร์ดโค้ด (ฮาร์ดโค้ด!) ลงในหน้าเว็บหลายสิบหน้าทั่วทั้งไซต์..
การทำแผนที่การฉายภาพสามไฟเบอร์ js และ React
การใช้งาน Projection Mapping อย่างง่ายดายใน React โดยใช้ glsl shaders ทำงานได้บนพื้นผิวทุกประเภท และยังเคลื่อนที่หรือหมุนได้อีกด้วย! คุณสามารถตรวจสอบได้ในแซนด์บ็อกซ์ต่อไปนี้ -› https://codesandbox.io/s/czxbw ภาพรวมคร่าวๆ ของฉากที่โต้ตอบ: ด้วยโค้ดเพียงไม่กี่บรรทัด ฉันสร้างฉากสำหรับโปรเจ็กต์ของเราเป็นส่วนประกอบ React: ก่อนอื่น ฉันนำเข้าไลบรารีที่จำเป็น CameraHelper จาก threejs เพื่อให้เราสามารถแสดง Gizmos บางอย่างบนกล้องที่เราใช้ฉายพื้นผิวได้ react-three-fiber และ drei..