เลือกหัวข้อจากแถบเมนูด้านซ้าย (กรณีหน้าจอเล็กเมนูจะหดกลายเป็นสัญลักษณ์สามขีดอยู่ในแถบเมนูด้านบน) หรือใส่คำค้นหาที่ช่องด้านล่างนี้ เพื่อค้นหาหัวข้อบทความหรือ Tutorial ในหมวดหมู่ React ที่ต้องการ
ทำ Web Application สำหรับ People Counter ด้วย React แบบง่าย ๆ เพื่อเรียนรู้การใช้ JSX และ state นอกจากนี้เราจะทดลองนำ Bootstrap เข้ามาใช้เพื่อทำให้เว็บมีหน้าตาสวยงามกันด้วย | ทำแอปพลิเคชันแบบง่าย ๆ สำหรับนับคนที่อยู่ในร้าน...
Read More →สมมติว่าผู้เรียนเป็นเจ้าของร้านค้าหลายร้านและต้องการนับจำนวนคนในร้านค้าแต่ละร้าน โดยให้แต่ละร้านแสดงข้อความเตือนเวลาจำนวนคนถึงค่าสูงสุดที่ตั้งไว้ ทดลองทำแอป People Counter 3 ซึ่งจะเป็นแบบกำหนดจำนวนคนโดยใช้พื้นที่ของร้านค้าแล้วคำนวณจากสัดส่วนของจำนวนคนต่อพื้นที่ที่ภาครัฐกำหนดแทนการกำหนดแต่ละร้านตรง ๆ เอง...
Read More →ทำ Web application Dictionary หรือก็คือพจนานุกรมอังกฤษ-อังกฤษ โดยเมื่อผู้ใช้งานใส่คำที่ต้องการค้นหาเข้ามา เราจะทำการกรองคำศัพท์จากไฟล์ Dictionary ซึ่งประกอบด้วยคำและความหมายในรูปแบบ JSON จากนั้นจะแสดงคำศัพท์พร้อมความหมายของคำนั้น...
Read More →ทำ Web application สำหรับเป็นเว็บร้านค้าแบบมีหลาย ๆ หน้าแบบง่าย ๆ ด้วย react-router ซึ่งเป็น component ตัวหนึ่งของ React ที่เราสามารถประกาศ routing ในแอปได้เลย โดย react-router จะตรวจสอบ URL แล้วเอา component ที่กำหนดมาแสดงให้แบบอัตโนมัติ...
Read More →สร้างเว็บที่มีหลายหน้าด้วย react-router และเรียนรู้เรื่องลำดับการทำงานของ Component Lifecycle โดยการทดลองเรียก APIs เพื่อดึงข้อมูลอสังหาริมทรัพย์จากเว็บอื่นมาใช้ ซึ่งบ่อยครั้งที่การดึงข้อมูลจะใช้เวลาพอสมควร ดังนั้นเราจะเอาโค้ดส่วนดึงข้อมูลนี้ใส่ในฟังก์ชัน componentDidMount() ซึ่งเป็นฟังก์ชันที่จะถูกเรียกหลังจากฟังก์ชัน Render เอา Component ต่าง ๆ ไปไว้บน DOM แล้ว จากนั้นจะสั่งในฟังก์ชัน componentDidMount() ให้อัปเดตค่าใน state เพื่อให้แสดงผลในหน้าเว็บอีก...
Read More →ใช้ React สร้างเว็บเครื่องคิดเลขแบบมีปุ่มกดแบบเดียวกับเครื่องคิดเลขของจริง โดยส่งข้อมูลจาก Form ด้วย GET Method กัน...
Read More →หลายคนเวลาไปห้างคงจะเคยลำบากต้องวนหาที่จอดรถ แม้ว่าหลาย ๆ ห้างจะมีเซนเซอร์แสดงไฟสีเขียวบอกว่าช่องไหนว่างอยู่แต่จะดีกว่าไหมถ้าดึงเอาข้อมูลจากเซนเซอร์ที่ติดอยู่ทั้งหมดมาแสดงผ่านหน้าจอว่าช่องไหนว่างอยู่บ้าง ดังนั้นในบทความนี้ เราจะมาลองทำ Web application สำหรับแสดงที่จอดรถแบบ Real-time...
Read More →React เป็น User Interface (UI) library ของ JavaScript ใช้เป็นเครื่องมือสำหรับสร้าง UI components ที่กำลังได้รับความนิยม บางทีก็เรียกว่า React.js หรือ ReactJS ในบทความนี้ ผู้เรียนจะได้เรียนรู้วิธีการสร้างไฟล์ source code เพื่อเขียนและรันแอปพลิเคชันพื้นฐาน...
Read More →ทำเว็บเพื่อตรวจสอบสุขภาพของตัวเราในช่วงที่มีการแพร่ระบาดของเชื้อโควิด ติดตามค่าระดับออกซิเจนในเลือด (SpO2) โดยจะพล็อตกราฟแบบ Real-time ทันทีที่ได้รับข้อมูลเข้ามา สำหรับการพล็อตกราฟนั้นเราจะใช้ package ชื่อ react-chartjs-2 เข้ามาช่วย ส่วนการเก็บข้อมูลค่า SpO2 ของคนไข้นั้นจะเก็บใน LocalStorage ซึ่งเป็นการเก็บข้อมูลใน browser ของผู้ใช้งานแทนการเก็บใน Database ทำให้เราสามารถเก็บข้อมูลได้โดยที่ไม่ต้องทำฝั่ง back-end...
Read More →