react Archive

แนะนำ Stackblitz สำหรับการ run React และ Angular จาก Github repository ผ่าน browser

อ่านเอกสารของ Angular ก็พบสิ่งที่น่าสนใจคือ สามารถทำการ run code ที่อยู่ใน Github repository  ผ่าน browser ได้เลย ซึ่งมันทำให้ชีวิตนักพัฒนา Frontend ง่ายขึ้นมาก เพราะว่า ไม่ต้องทำการติดตั้งสิ่งใดเลย เพราะว่า การติดตั้ง dependency ต่าง ๆ บนเครื่องเราใช้เวลาสูงมาก ๆ เพราะว่า การแบ่งปันหรือทำงานร่วมกับคนอื่น ๆ มันยากขึ้นไปอีก ดังนั้นมาลองใช้งาน Stackblitz กันนะ

Read More…

[React Testing] ว่าง ๆ มาเริ่มเขียนชุดการทดสอบสำหรับ React กัน Part 2

จาก Part ที่ 1 นั้นเริ่มด้วยการทดสอบระบบ web ด้วย library ชื่อว่า Enzyme ซึ่งจะจำลองการทำงานของ React component ขึ้นมาให้ เราได้ทำการติดตั้ง configuration ตลอดจนเริ่มเขียนชุดการทดสอบแรกไปแล้ว ใน Part 2 นี้จะเริ่มพัฒนาระบบเครื่องคิดเลขกัน โดยจะพยายามเริ่มด้วยชุดการทดสอบ หรือคิดก่อนว่าเราจะทำอะไร และ ต้องได้อะไรออกมา แน่นอนว่ายังคงใช้ Enzyme นั่นเอง มาเริ่มกันดีกว่า

Read More…

[React Testing] ว่าง ๆ มาเริ่มเขียนชุดการทดสอบสำหรับ React กัน Part 1

ในการพัฒนา software นั้น การทดสอบเป็นสิ่งที่สำคัญมาก ๆ เพื่อทำให้นักพัฒนามีความมั่นใจต่อการพัฒนา แน่นอนว่า การทดสอบเหล่านั้นจำเป็นต้องทำงานแบบอัตโนมัติอีกด้วย เมื่อมาพัฒนาระบบ web application ด้วย React แล้ว การทดสอบจึงขาดไปเสียมิได้เลย แต่พบว่าไม่ค่อยมีนักพัฒนาให้ความสำคัญสักเท่าไร หรืออาจจะอยากทำ แต่ไม่รู้ว่าจะเริ่มอย่างไร เพราะว่ามีเครื่องไม้เครื่องมือเยอะมาก ๆ ดังนั้นจึงคิดว่า น่าจะลองสรุปวิธีการของการเขียนชุดการทดสอบ สำหรับการพัฒนาระบบด้วย React ไว้หน่อย เพื่อให้เริ่มต้นได้ง่าย

Read More…

[แปล] ว่าด้วยเรื่องของการ Reactoring React App ตอนที่ 2

ต่อจากตอนที่ 1 อธิบายเรื่องของการพัฒนาระบบและเขียนการชุดสอบสำหรับ React app ในตอนที่ 2 จะมาอธิบายเรื่อง การปรับปรุงโครงสร้าง code ให้อยู่ในรูปแบบ ELM Architecture ซึ่งมีส่วนการทำงานดังนี้ View Model Update จากนั้นลงมือปรับปรุง code ทีละส่วน แน่นอนว่า ต้องมีชุดการทดสอบด้วยเสมอ ดังนั้นมาเริ่มกันเลย

Read More…

[แปล] ว่าด้วยเรื่องของการ Refactoring React App ตอนที่ 1

เข้าไปอ่านบทความเรื่อง Refactoring React จาก 8thlight  มา ทำการอธิบายเกี่ยวกับการ Refactor หรือการปรับปรุงโครงสร้างของระบบที่พัฒนาด้วย React จาก React แบบปกติ ไปจนถึง ELM Architecture มีความน่าสนใจและมีประโยชน์ต่อการพัฒนาระบบงานอย่างมาก จึงทำการแปลและสรุปเพื่อเก็บไว้อ่าน รวมทั้งฝึกการเขียน code และชุดการทดสอบไปในตัวอีกด้วย

Read More…

มาดูความเปลี่ยนแปลงต่าง ๆ ใน Storybook 3.2.x

สำหรับชาว React และ React Native แล้วนั้น ผมคิดว่าน่าจะใช้ Storybook กันทุกคน !! ในการทำ snapshot testing ของ UI component แต่ละตัว ช่วยทำให้ชีวิตของนักพัฒนาง่ายและสะดวกสบายมากยิ่งขึ้น ยิ่งใน version 3.2 นี้ก็มีความสามารถที่น่าสนใจเพิ่มเข้ามา

Read More…

[React] ว่าด้วยเรื่องของ Container และ Dumb component

ช่วงนี้มีโอกาสมาเขียนและ review code ที่พัฒนาด้วย React กันนิดหน่อย ปัญหาหลักที่พบเจอคือ การออกแบบ react component สำหรับระบบงาน ในแต่ละ component ทำงานมากเกินไป ในแต่ละ component reuse ได้ยาก ในแต่ละ component ทดสอบได้ยาก ดังนั้นเรามาเข้าใจกับการออกแบบ component ที่น่าจะดีกันหน่อย

Read More…

[แปล] เรื่องการนำ React มาใช้ของ Airbnb

เช้านี้อ่านบทความเรื่อง How Airbnb use React สัมภาษณ์กับคุณ Leland Richardson ตั้งแต่ต้นปีที่แล้ว (นานเลยนะ) ซึ่งเป็น Lead Engineer ที่ Airbnb และเป็น contributor หลักของ Enzyme มาดูกันว่า ทำไมถึงเลือก React มาใช้ ? ใช้งาน React อย่างไรบ้าง ? มีอุปสรรคและความท้าทายอะไรบ้าง ? จึงทำการแปลและสรุปสิ่งที่น่าสนใจไว้นิดหน่อย ถึงจะเก่าหน่อยแต่คิดว่าน่าจะมีประโยชน์

Read More…

สรุปการแบ่งปันเรื่อง React in the RIGHT way ที่งาน ReactBKK 2.0.0

วันนี้มีโอกาสแบ่งปันเรื่อง React in the RIGHT way ที่งาน ReactBKK 2.0.0 น่าจะเป็นเรื่องพื้นฐานที่สุดในงานแล้ว มีเป้าหมายเพื่อให้คำแนะนำสำหรับขั้นตอนการเรียนรู้เกี่ยวกับ React เป็นการเรียนรู้แบบมีขั้นตอนดังนี้

Read More…

ขั้นตอนง่าย ๆ สำหรับการพัฒนาระบบงานด้วย ReactJS

ในการเริ่มต้นพัฒนาระบบ Web application ส่วนของ Front-end ด้วย ReactJS นั้น พบว่ายากต่อการเริ่มต้นอย่างมาก เนื่องจาก Ecosystem มันใหญ่มาก ๆ เนื่องจากต้องมีความรู้พื้นฐานเยอะมาก ๆ เนื่องจากมีเครื่องมือและ framework/library เยอะมาก ๆ โดยรวมแล้วยากมาก ๆ สำหรับมือใหม่ !! ชีวิตของ Front-end developer มันซับซ้อนอย่างมากมาย ดังนั้นจึงทำการสรุปขั้นตอนง่าย ๆ สำหรับผู้เริ่มต้นแบบผม

Read More…