ใช้ PHP API และ MySQL กับ React

สร้างไฟล์ PHP สำหรับเขียน API และตั้งชื่อเป็น index.php ข้อสังเกตที่ด้านบน เราได้เพิ่มส่วนหัวเพื่อแก้ไขปัญหา CORS สร้างไฟล์ .htaccess เพื่อจัดการ URL นอกจากนี้ มาสร้างไฟล์ .htaccess เพื่อจัดการ URL สวยๆ เช่น PHP lumen framework และเพิ่มบรรทัดต่อไปนี้เข้าไปข้างใน สร้างไฟล์เชื่อมต่อฐานข้อมูล DbConnect.php เชื่อมต่อฐานข้อมูล MySQL โดยใช้ PDO…

การใช้ State และ useState

การใช้ State และ useState Hook Hooks เป็นฟีเจอร์ใหม่ที่มาพร้อมกับ React เวอร์ชัน 16.8 เพื่อให้เราสามารถใช้งาน state และเรียกใช้ features ต่างๆ ของ React ได้ โดยที่ไม่ต้องเขียนแบบ class component ยกตัวอย่าง เช่น เราสามารถใช้ useEffect แทน componentDidMount ได้ เป็นต้น   State…

การใช้งาน Props และ CSS

การใช้งาน props และ css Props หรือชื่อเต็มๆ คือ Properties หากเปรียบกับ HTML แล้ว ตัว Props จะเป็นคล้ายๆ attributes ของ HTML ดัง เช่น src, href CSS คือ ภาษาที่ใช้สำหรับตกแต่งเอกสาร HTML/XHTML ให้มีหน้าตา สีสัน ระยะห่าง พื้นหลัง เส้นขอบและอื่นๆ…

React Basics & JSX

React Basics & JSX สร้างโปรเจค React ติดตั้งโปรแกรม Visual Studio Code และ node.js และเราจะเริ่มต้นเขียน React ด้วยการสร้างโปรเจค React ด้วยการเปิด Terminal ขึ้นมา ตั้งชื่อ App ให้มันว่า feedback-app โดยใช้คำสั่ง ใช้โปรแกรม Visual Studio Code เปิดโปรเจคขึ้นมา ลบไฟล์ในโฟลเดอร์ src ออกทั้งหมด ด้วยเหตุผลที่ว่า เราจะทดลองสร้างไฟล์ต่างๆขึ้นมาใหม่…

 สร้างคอมโพแนนท์ CardList

ข้อกำหนดเบื้องต้น ข้อกำหนดสำหรับบทความนี้คือ คุณควรได้ทำตามบทความ  การใช้ Search Box มาก่อน แก้ไขไฟล์ card-list.component.jsx ดังนี้ แก้ไขโค้ด วิธีการทำงานของโครงสร้างคือการที่เราโยนมันเป็นตัวแปรแล้วเราก็ใช้ตัวแปรนั้น เพื่อที่ฉันจะได้จัดโครงสร้างจากคุณสมบัติที่ฉันต้องการจากมอนสเตอร์ ทุกอย่างยังคงทำงานตามปรกติ นั่นเป็นการเพิ่มประสิทธิภาพเล็กๆ น้อยๆ ที่ดี สร้างไฟล์ card-list.styles.css ภายในโฟลเดอร์ card-list เขียนโค้ดดังนี้ ไฟล์ card-list.component.jsx นำเข้า import “./card-list.styles.css” สร้างโฟลเดอร์ card ภายในโฟลเดอร์ components…

การใช้ Search Box

การใช้ Search Box Search Box หรือ ช่องค้นหาข้อมูลบทความ/สินค้า เป็นฟังก์ชันที่จะอำนวยความสะดวกให้ผู้เข้าชมเว็บไซต์ สามารถค้นหาข้อมูลต่าง ๆ ข้อกำหนดเบื้องต้น ข้อกำหนดสำหรับบทความนี้คือ คุณควรได้ทำตามบทความ React เบื้องต้น มาก่อน เพิ่มโค้ด Search Box ทดสอบค้นหา เพิ่มโค้ดการค้นหา โดยเปลี่ยนตัวพิมพ์ใหญ่ เป็นตัวพิมพ์เล็ก ก่อนการค้นหา โค้ด ทดสอบค้นหา แต่เมื่อลบคำค้นหาไปยังคงค่าเดิมอยู่ จึงต้องแก้ไขโค้ดเพิ่มเติม ทดสอบค้นหา lea แต่เมื่อลบคำค้นหากลับไปค่าเดิม…

React เบื้องต้น

React เบื้องต้น React เป็น JavaScript Library ที่ถูกสร้างโดย Facebook โดยสร้างมาจากพื้นฐานแนวความคิดแบบ MVC (Model View Controller) ซึ่งหมายถึงว่า React มีหน้าที่จัดการกับ Model หรือ View แต่ส่วนใหญ่จะเป็น View รองรับการเขียนด้วย JSX (JavaScript syntax extension) ซึ่งถูกพัฒนาให้เป็นส่วนเสริมของ JavaScript (syntax extension…