เกรียน-เรียน-React [Part-1]
TLDR ; ปูพื้นฐาน React แบบคร่าวๆ, สร้าง React เพื่อใช้แก้ปัญหาตามโจทย์ที่เจอ
เล่าแล้วเล่าอีก หากใครไม่เคยอ่านบทความผม ผมเชียร์ React อย่างออกหน้าออกตามาก เรียกว่า ถ้าเป็น Poker ผม All-in แล้วครับ จริงๆ ไม่อยากจะมาเขียนบทความให้คนอื่นอ่านสักเท่าไหร่จริงๆ เพราะไม่อยากให้ความรู้ความเข้าใจที่ผิดๆ ไป หากผิดพลาดประการใดขออภัยมา ณ.ที่นี้ด้วยน่ะครับ เรียกว่าเขียนเพื่อเอาไว้ย้อนดูย้อนหลังแล้วกัน แต่ถ้าใครอยากอ่านจนจบ ผมก็ว่าคุ้มน่ะครับ เชื่อว่าท่าที่ผมใช้ในการแก้ปัญหามันอาจจะไม่ดีในงานผม แต่ในบางสถานการณ์อาจจะดีก็ได้
REACT คืออะไร ?
คิดซ่ะว่ามันคือ HTML ขั้นเทพล่ะกันเทพมากๆ จนบังคับใช้ จริงๆ มี ทางเลือกอื่นที่ไม่ใช่ React อยู่อีก 2 เจ้าครับ แต่ผมขอไม่พูดถึงคือ Angular2.js , Vue.js ถ้าจะอธิบายในความหมายผมมันคือ View layer คือ UI คือ Interface ที่ให้ผู้ใช้งานอย่างเราๆ หรือคนทั่วไปได้จับต้องกัน ถ้าให้ดูจับต้องได้อีกนิดหน่อย มันมาแทนที่ AJAX , JQuery แทบจะเรียกได้ว่าหมดเลย หมดเลยจิมๆ อยากอธิบายแค่นี้เพราะไม่เห็นความจำเป็นที่จะอธิบายมากกว่านี้แล้วคิดว่าการลงมือทำสำคัญมากกว่า
เริ่มต้นยังไงดี ?
จากที่ดู Video ลง Course เรียน Online ราคาไม่แพงมาบ้าง ค้นพบว่า Video ที่ดีที่สุดคือ Video นี้ครับ !!! ส่วนตัวคิดว่าดีกว่า Official Document ที่มาจากทาง Facebook เองซ่ะอีก
Source code ทุดอย่างอยู่ในนั้นหมดแล้วน่ะครับ ดูที่ Link ใน Caption Video ได้ ผมดู Video นี้ไม่ต่ำกว่า 5 รอบ ดูทำตามวนซ้ำ ทำเป็น Loop ไป เพื่อให้เค้าใจการทำงานทั้งหมดจริงๆ ของ React เพราะฉะนั้นใครจะอ่านบทความต่อไปขอให้ทำตาม Video ด้านบน ดีงามพระราม 8 มาก สอนตั้งแต่ Install ทุกอย่างที่จำเป็นบน เครื่องคอมที่คุณใช้พัฒนา และ ยังอธิบายวิธีอย่างละเอียดมากกราบใจเลยครับ ขอบคุณคุณ Buff @ Storylog.co ครับผม
แล้วเราจะมาทำอะไรกัน ?
เนื่องจากผมเชื่อว่าการทำเราจะเข้าใจอะไรอย่างลึกซึ้งคือต้องลงมือทำ จริงๆ ก่อนจะทำ บทความนี้ขึ้นมาผมก็ได้ลองใช้ React ทำเครื่องคิดเลขง่ายๆ ขึ้นมาผ่าน Web Browser เพื่อ Prove concept อะไรบางอย่าง และ ยังได้ทำ App ที่เตรียมคำนวนแต้ม Dummy ไว้แล้วแต่ยังไม่เสร็จดี และก็ยังมี Project งานของบริษัทที่ ทำโดยใช้ React ที่ผมดูแลอยู่ เพราะฉะนั้นความเข้าใจผมกับ React ก็เลยมีในระดับนึงแล้วหากผู้อ่านอ่านแล้วยังงงๆ ไปดู Video ด้านบนใหม่น่ะครับ ยิ่งฝึกดูฝึกทำ รับรองว่าความรู้เพิ่มพูนมหาศาลครับ
เข้าเรื่องได้ยัง ?
ได้แล้วครับๆ โทษทีครับ Intro นานไปนิด จริงๆ โจทย์นี้มาจากปัญหาของผมกับเพื่อนๆ ครับ คือ ผมเป็นคนชอบเล่นไพ่มาก(ชอบเล่นกับเพื่อนๆ น่ะครับ ไม่ได้ติดเป็นการพนัน) ผมจึงพยายามใช้ React มาเพื่อแก้ปัญหาสำหรับการคิดคะแนนใน ดัมมี่ ครับ โดยปกติเวลาเล่นกันจบแต่ล่ะตา ผมหรือเพื่อนๆ จะ Capture หน้าจอไว้ เพื่อมาคิดคะแนนในอีกรูปแบบนึงซึ่งเป็นรูปแบบการคิดคะแนนที่เราใช้กันมาตั้งแต่สมัยเรียนมหาลัยกัน
โดยปัญหามีดังนี้ครับ
โจทย์ของงานนี้คือ ทางผมเองมีปัญหาเวลาคิดแต้ม เวลาเล่น Dummy กับเพื่อน คือเพื่อนผมเป็นคนคิดเลขเร็วมาก ตอนแรกคิดว่าจะทำ Web App มาเพื่อแก้ปัญหาในการคำนวณแต้ม ก็พักไปก่อน เหตุผลคือว่าเพื่อนผมคิดเร็วกว่าที่จะกดชื่อกรอกเลขให้เสียเวลาด้วยซ้ำ สุดท้ายที่เสียเวลาคือกลายเป็นผมหรือเพื่อนๆ คนอื่นๆต้องมารวมแต้มอีกทีหลังจากที่เพื่อนคนที่คิดเร็วคิดเสร็จแล้ว เมื่อเพื่อนส่งข้อมูลมาให้ดังรูป จริงๆ มองๆ ดูมันก็ไม่น่าจะใช่ปัญหา เพราะว่า ใช้ Google Sheet หรือ Excel ก็สามารถแก้ปัญหานี้ออกมาได้เช่นเดียวกัน แต่ในแง่การปฎิบัติ พบว่าเสียเวลามาก ผมต้องมาเสียเวลากับการจัดเรียงข้อมูลใหม่ที่ไม่ตรงกัน และยังเป็นการพิมพ์สด ที่ไม่สามารถ Copy Paste ได้ตรงๆ อีก
ผมเลยใช้เวลาท้าทายกับเพื่อนๆ ว่าผมน่าจะทำได้เสร็จในเร็ววัน (เริ่มทำตอนประมาณ 4 ทุ่มครึ่ง เสร็จประมาณ เที่ยงของอีกวัน หักเวลานอนไปประมาณ 4 ชั่วโมง ผมใช้เวลาประมาณ 10 ชั่วโมงกว่าๆ ได้พร้อมทั้ง Deploy ขึ้นเป็น Web App ใช้งานได้ ใครอยากลองเล่นไปลองเล่นดูได้ครับ ที่ Link นี้เลยครับ
http://dummyyummy.herokuapp.com/
ซึ่งเดี๋ยวบทความทั้งหมดนี้จะอธิบายหมดครับ ตั้งแต่ วิธีการทำ การขึ้น Project ไปยัน ถึง Deploy ฟรีเป็น Web App ให้ใช้งานได้เลยครับ
ก่อนอื่นต้องบอกก่อนว่าผมไม่มีพื้นฐานด้าน Algorithm ที่ดี ซึ่งจริงๆ ผมว่าถ้ามีน่าจะแก้ปัญหาที่เกิดขึ้นได้ดีกว่าผมมากๆครับ และผมคิดว่าผมไม่มีความชำนาญใน Javascipt เลย และยิ่ง ES6 ลืมไปได้เลยครับ ทุกวันนี้ที่ใช้อยู่ผมยังไม่รู้ผมพิพม์อะไรไปเลย แต่ไม่เป็นไรครับ Concept ผมคือทำก่อน คิดที่หลัง… ก่อนอื่นเรามาดูปัญหาที่ผมมองที่มีมาจากข้อมูลก่อนน่ะครับ
- ชื่อของผู้เล่นไม่มีการจัดเรียงที่ถูกลำดับ คือเรียงมั่วไปหมด
- บางทีข้อมูลดิบที่เพื่อนส่งมา เว้นวรรคบ้าง ไม่เว้นวรรคบ้าง
- เพื่อนเว้นบรรทัดด้วยในแต่ล่ะตา
- เพื่อนมีการใส่ลำดับของแต่ล่ะตาเข้าไป (ex. “1.ต้า -100 ….”)
- จะรู้ได้ยังไงว่าตัวอักษรไหนเป็นตัวเลขอันไหนเป็นชื่อคนอันไหนเป็นเครื่องหมายลบ ?
ฟังดูน่าสนุกไหมครับ ? ดูเหมือนมันเป็นปัญหาที่ไม่น่าจะยาก และผมก็คิดในหัวเล่นๆ ว่ามันก็ไม่น่าจะยากซึ่งคิดว่าการใช้ String Operator อย่างเดียวก็น่าจะเพียงพอแล้ว แล้วคราวนี้ เราจะมาดูกันครับว่าไอ้ที่ไม่ยากของผม ผมไปเจออะไรมาบ้างพร้อมทั้งแนวทางการใช้ Google ในการแก้ปัญหาของผมคร๊าบบบ ติดตามต่อ Part-2 น่ะครับ
ขอทิ้งท้ายก่อนจากกันในบนความนี้น่ะครับ
กล่าวสั้นๆ คือ จริงๆ การไปแก้ปัญหาของผมคือจุดหมายถูกไหมครับ แต่สิ่งที่สำคัญจริงๆ ไม่ใช่การแก้ปัญหาเลยครับ มันคือการเดินทางไปสู่การแก้ปัญหาต่างหากครับ ที่ทำให้เราเก่งขึ้น คหสต. น่ะครับ
เจอกัน Part-2 คร๊าบบบบ
