เริ่มต้นพัฒนาเว็บแอ็พด้วย React ต้องทำยังไงบ้าง

บทความนี้ไม่มีอะไรมากครับ ผมแค่อยากมาเขียนไว้กันลืมเฉยๆ เป็นขั้นตอนการเริ่มโปรเจ็คจากการสร้างแอ็พเริ่มต้นจาก create-react-app แล้ว deploy ขึ้นไปบนโฮสฟรีอย่าง Heroku เพื่อทดสอบว่ามันเวิร์ครึเปล่าเท่านั้นเองจริงๆ ก่อนอื่นที่เราต้องมีในเครื่องเลยก็คือ Node js ครับ โหลดจากหน้าเว็บหลักแล้วติดตั้งให้เรียบร้อย ที่เราใช้บ่อยก็คือคำสั่ง npm โน่นนี่นั่นนั่นแหละ ลงเสร็จแล้วก็ลองเช็คดูครับว่ามันเวิร์คมั้ยด้วยคำสั่งด้านล่างนี้ด้วย Command Prompt หรือ Terminal ใน VS Code ที่ผมชอบใช้ประจำก็ได้ ก็ถ้าได้ตัวเลขเวอร์ชั่นมาก็คือใช้ได้นั่นแหละ จากนั้นเราก็ต้องมีตัวที่ใช้สร้าง React Project ที่ชื่อว่า create-react-app ซึ่งเราติดตั้งด้วยการรันคำสั่ง เราก็จะได้ตัวที่ใช้สร้างโปรเจ็คสำหรับ React มาใช้งานแล้ว ซึ่งการสร้างโปรเจ็คก็คือการรันคำสั่งง่ายๆด้วยเจ้า create-react-app นี่แล้วตามด้วยชื่อโปรเจ็คของเราแบบด้านล่างนี้ แล้วก็ cd เข้าไปใน folder ที่มันสร้างโปรเจ็คมาให้เราแล้วลองรันดูด้วยคำสั่ง ซึ่งมันก็จะได้หน้าแอ็พเริ่มต้นของ React นั่นแหละ ไม่มีอะไรพิเศษ ใน Vue Js ก็เช่นกัน ในส่วนของการตั้งค่า Server เบื้องต้น… Continue reading เริ่มต้นพัฒนาเว็บแอ็พด้วย React ต้องทำยังไงบ้าง

การสร้าง Font ไว้เรียกใช้งานในเว็บไซต์ของเราด้วยตัวเองอย่างง่ายใน WordPress Theme

จากบทความที่แล้วผมเขียนเรื่องการเรียกใช้ Google Fonts บนเว็บไซต์ของเราไว้ คราวนี้ผมจะเขียนเรื่องการเรียกใช้ Font ในเว็บไซต์ของเราอย่างง่ายๆจากโฮสต์ครับ ตัวอย่างในโค้ด CSS ก็จะเขียนประมาณนี้ครับ (ให้ตัวอักษรในแท็ก p ใช้ฟอนต์ Kanit แบบหนา) ผมโหลดไฟล์ฟอนต์ที่ผมจะใช้มาแล้ว และผมจะใช้แค่ 3 น้ำหนัก คือ normal, medium และ bold ผมก็แค่เก็บไฟล์ไว้ใน folder ที่ผมต้องการ ซึ่งส่วนใหญ่ผมชอบเก็บไว้ใน folder ชื่อ assets แล้วก็ข้างในมี folder ที่ชื่อ fonts อีกทีนึง การเขียนโค้ดสำหรับทำให้ระบบเรารู้จัก font ที่เราจะใช้ก็ตามด้านล่างนี้เลยครับ เป็นคำสั่ง @font-face เราก็จะสามารถเรียกใช้งานฟอนต์ตัวนี้ได้แล้วครับ ในไฟล์ CSS ของเรา ซึ่งปกติผมก็เขียนใน style.css ของธีมหลักนั่นแหละครับ