วันนี้มาตัว jsx Conditional Rendering เริ่มจาก Code ก่อนเลย แล้วมาดูผลลัพธ์กัน จริงๆ Conditional Rendering ทำได้ประมาณ 3-4 แบบนะ จาก Code ด้านบนผมตจะลองแบบ TERNARY operator / if เดี๋ยวลองมาดูจริงๆกันบ้าง แบบ if, else, else if / switch จริงๆ มันคล้ายๆกันนะ แอบเปลืองด้วย ถ้ามีเคสจริงๆ คงใช้ Nested Ternary Operator
Component ส่วนประกอบของหน้าเว็บเรา ว่าจะส่วนไหน เมนู ส่วนแสดงผลหลัก เป็นต้น โดยตัว Component รับ Input อะไรก็ได้ Text / Number หรือ แม้แต่ตัว Component เอง แต่เจ้า jsx return ได้ 1 element เท่านั้น Create Component with props – Sample – Result ถ้าส่ง Undefine ผ่าน มันถือว่าส่ง แต่อันแรกไม่รอด โดย Validation…
Type of HTML in JSX/TSX Sample Code Result
หลายๆ เราไม่มีหัว Design จะเอา UI คนที่ไว้แล้ว เช่น จาก Preline UI, crafted with Tailwind CSS ซึ่งเข้าจะมี Template และ Code มาให้ Copy แต่เป็น HTML พอเราเอามาแปะใน JSX จะแดงเถือกเลย ถ้าไล่แก้ก็เสียเวลานิดนึง ลองหาดูมี Plugin ช่วย html to JSX – Visual Studio Marketplace กดลงเลยครับ การใช้งานง่ายมากครับ Reference
