React : การสร้าง Element โดย React.createElement

Posted on

วันนี้ผมจะมาแนะนำอีกหนึ่งคำสั่งใน react เพื่อหากได้มีโอกาศใช้งาน คำสั่งนี้คือ React.createElement เอาไว้เพื่อทำการสร้าง element แบบ dynamic ตามคำสั่งโค้ดที่เราเขียน

React การใช้ CSS

Posted on

หลังจากที่สร้าง Component เบื้องต้นแล้วที่นี้ก็มาเริ่มใส่ css ให้กับ form ต่างๆหรือ html tag ที่เราต้องการ render ออกมา โดยใน css นั้นจะมีการใช้ attribute class เพื่อกำหนดรูปแบบต่างๆให้กับ html ไม่ว่าจะเป็นเรื่องสี font ขนาด เป็นต้น ซึ่งจะทำให้เจ้า JSX ที่เก็บข้อมูล html นั้นเกิดปัญหาได้เพราะคำว่า class ดันไปต้นกับคำสงวนใน javascript นั้นเอง เพราะฉะนั้นจะต้องหาคำมาแทน จึงใช้คำว่า className แทนคำว่า class และ คำว่า for ให้เปลี่ยนไปใช้คำว่า htmlFor แทน ซึ่งใน React ปัจจุบันนับตั้งแต่ React 16 ขึ้นไปในสามารถใช้คำว่า class ตรงได้เลย แต่ก็จะมีบ้างกรณีที่ไม่สามารถใช้ได้ เพราะฉะนั้น ณ เวลานี้ควรใช้ […]

Component ใน React.js เบื้องต้น

Posted on

จากตัวอย่างในบทความก่อน เริ่มต้น Hello World ใน React.js คราวนี้จะลองเขียนแยกออกมาเป็น component เบื้องต้นกัน เริ่มแรกจากโค้ดเก่าให้ทำการแก้โค้ดใน script tag โดยสร้าง Class ที่มีชื่อว่า App ทำการ extends มาจาก React.Component โดยมี method render ที่ return ข้อมูลออกมาเป็นข้อความ tag h1 ซึ่งมีโค้ดดังนี้ เมื่อทำการแก้โค้ดเสร็จ ลองเปิดหน้าเพจดูกับพบว่าเป็นหน้าเปล่าๆ เพราะยังไม่ได้ทำการ render ผ่าน visual DOM นั้นเอง ซึ่งต้องใช้คำสั่ง ReactDOM.render โดยมีโค้ดในส่วนของ script tag ดังนี้ครับ สังเกตว่ามีการประกาศตัวแปร mount ขึ้นมาให้เก็บค่า DOM ที่เราต้องการ render ข้อมูล แล้วใช้คำสั่ง ReactDOM.render ที่ยังคง concept เดิมคือ […]

เริ่มต้น Hello World ใน React.js

Posted on

ต่อจากบทความก่อน React คืออะไร ครั้งนี้จากลองในเขียน React.js กันแบบเริ่มต้นง่ายๆด้วยตัวอย่าง Classic อย่างแสดงข้อความ Hello World กัน โดยตัวอย่างนี้จะใช้รูปแบบ include ไฟล์จาก cdn เข้ามาในไฟล์ html ที่สร้างขึ้นแบบง่ายๆก่อน

React คืออะไร

Posted on

React หรือ React.js ก็แล้วแต่ใครจะเรียก คือ javascript library ที่ถูกพัฒนาโดย facebook ซึ่งออกแบบมาเพื่อสร้าง UI ให้กับ web application ซึ่งจะทำงานส่วนใหญ่เกี่ยวกับ view layer หัวใจหลักของ React นั้นคือ component การที่สร้าง component ขึ้นมาสามารถทำให้ reuse การใช้งานได้ และเมื่อประกอบกันหลาย component กลายเป็น UI ของ Web Application นั้นเอง