by Frevation | Sep 16, 2022 | blog, ReactJS
Grid ถือเป็น layouts สำหรับ design responsive UI ในที่นี้เราจะใช้ grid จาก MUI Grid ประกอบด้วย 2 ส่วน คือ container กับ item เราจะสร้าง container มาครอบ item โดยเราสามารถสร้าง space ให้แต่ละ columns ได้ โดยจะมีขนาด xs md lg และอื่นๆ xs คือ extra small...
by Frevation | Jan 28, 2022 | blog, ReactJS
จากครั้งที่แล้ว เราโชว์ส่วนของ useMemo ไป ทีนี้จะเป็น hook อีกอันนึงเรียกว่า useCallback วิธีใช้ก็ไม่ต่างจาก useMemo เท่าไหร่นัก เอาล่ะ เราไปดูกันเลย ก่อนอื่นจะให้ดูหน้าตาแอปก่อน ถ้าเราพิมตัวเลขใน input ตัวเลขด้านล่างจะเป็น 3 เท่าของ input ส่วนปุ่มเอาไว้เปลี่ยนสีของ...
by Frevation | Jan 21, 2022 | blog, ReactJS
ปกติเราจะใช้ useState เป็นหลักในการเขียน React ใช่ไหม ซึ่งจริงๆแล้ว React ยังมี hook ตัวอื่นที่น่าสนใจอีกเช่นกัน ในบทความนี้ เราจะมาแนะนำ hook ที่เรียกว่า useMemo กัน ก่อนที่บอกว่าตัวนี้เอาไว้ทำอะไร จะให้ดูโค้ดและตัวอย่างหน้าตาแอปก่อน...
by Frevation | Dec 28, 2021 | blog, JavaScript, ReactJS
Proptypes เป็น library อีกตัวนึงที่น่าสนใจ เพราะมันจะช่วยเราในการตรวจสอบ type ของตัวที่จะใช้ในแต่ละ function หรือ class เพราะโดยปกติแล้วเวลาเราเขียน Javascript เราจะไม่รู้ว่าเรารับตัวแปรแบบไหนมาจนกว่าเราจะใช้วิธีตรวจสอบ เช่น typeof หากเราทำงานกับบนโปรเจคใหญ่ๆ...
by Frevation | Dec 9, 2021 | blog, ReactJS, Web Development
Responsive เป็นสิ่งที่ปัจจุบันล้วนใช้กันเนื่องจากผู้คนส่วนใหญ่ล้วนใช้สมาทโฟนกัน วันนี้เรามี library ที่น่าสนใจมาฝากกัน นั่นก็คือ react responsive ใช้งานง่าย ไม่เก่ง css ก็สามารถใช้ได้ วิธี install yarn add react-responsive –save จากนั้นก็ import เข้ามาตามในรูป...
by Frevation | Nov 11, 2021 | blog, ReactJS
คุณน่าจะเคยเห็น textbox ที่แบ่งช่องกันแบบในรูปไหม คุณอาจจะคิดว่าก็แค่ทำ input มาต่อกันแค่นั้นก็ได้แล้ว แต่อย่าลืมว่า ถ้ามีทั้งหมด 20 ช่องเนี่ย แล้วเราต้องมากดช่องทีละช่องเพื่อพิมพ์อักษรลงไปเนี่ยจะลำบากแค่ไหน ในที่นี้เราจะสอนวิธีการทำ textbox ข้างต้นโดยที่ textbox...
