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

ปล. ถ้าไม่เชื่อลองไปดู

1. แนะนำติดตั้ง Yarn ซะ

เป็นตัวจัดการ library หรือ dependency ต่าง ๆ ใน project

แต่ถ้าตัวพื้นฐานที่ developer ทั่วไปจะใช้งานมาก่อนคือ NPM
โดยการทำงานภายในของ yarn นั้นก็คือ NPM นั่นเอง
แต่ทำการปรับปรุงการทำงานให้ดีและเร็วขึ้น
ดังนั้นถ้าใช้คำสั่งของ yarn แล้วมีปัญหาสามารถสลับมาใช้ NPM ได้

2. ทำการติดตั้ง Create-react-app

การเริ่มต้นสร้าง project สำหรับการพัฒนาด้วย ReactJS นั้นไม่ง่ายเลย
ต้องการความรู้ต่าง ๆ เยอะมาก ๆ
ดังนั้นเพื่อความง่ายสำหรับการเริ่ม แนะนำให้ใช้งาน create-react-app ซะ
เป็น command-line tool พัฒนาโดยทีมของ facebook นั่นเอง

ปล. เมื่อเข้าใจการทำงานต่าง ๆ แล้ว ก็อย่าลืมมาสร้าง project เองด้วยนะ

3. ลงเมื่อเขียน code เพื่อสร้างระบบ

React นั้นไม่ได้เป็นเพียง View หรือ View template เท่านั้น
ยังมีส่วนอื่น ๆ ที่แตกต่างและสำคัญมาก ๆ
ซึ่งนั่นคือ React จริง ๆ
ดังนั้นแนะนำให้ลงมือเขียน code เพื่อสร้างระบบงาน
จะทำให้เข้าใจเรื่องต่าง ๆ ของ React
แต่เริ่มจากระบบเล็ก ๆ ก่อนนะครับ

ตัวอย่างเช่น
เมื่อเริ่มต้นศึกษาและสร้างระบบงาน
มักจะมีคนแนะนำให้ใช้ React Router
เพื่อจัดการเรื่องของ routing ต่าง ๆ ของระบบ
คำถามคือ ระบบเล็ก ๆ เราต้องการมันจริงหรือไม่ ?
เราสามารถเขียนและจัดการเองได้หรือไม่ ?

ในการเริ่มต้นแนะนำให้เขียนเองก่อน
จากนั้นเมื่อเราเข้าใจ และ ระบบใหญ่ขึ้น ปัญหาจะเริ่มตามมา
จึงให้นำ library/dependency ต่าง ๆ มาใช้เพื่อแก้ไขปัญหา

ปล. ต้องเข้าใจ และ พบปัญหาก่อนนำมาใช้นะครับ
อย่าเอามาใช้ก่อนมีปัญหา

ดังนั้นจงให้เวลากับการคึกษาและลงมือเขียน React ให้มาก ๆ
เพิ่ม library/dependency เท่าที่ต้องการจริง ๆ เท่านั้น
แก้ไขปัญหาต่าง ๆ ด้วยตนเองก่อน
จากนั้นจึงเริ่มไปศึกษา library ต่าง ๆ ว่ามีประโยชน์อะไร เช่น React Router และ Redux เป็นต้น

ที่สำคัญอย่าลืมเขียนชุดการทดสอบด้วยนะ
ทั้ง unit test, routing test, service/integration test เป็นต้น

4. ทำการ deploy ระบบสิ

เมื่อพัฒนาระบบเสร็จแล้วไม่ว่าเล็กหรือใหญ่ก็ต้องทำการ deploy สิ
เพื่อเรียนรู้ว่า เราจะทำการ deploy ระบบที่พัฒนาด้วย ReactJS อย่างไร ?

เริ่มต้นจากการ build ด้วยคำสั่ง $yarn run build
ซึ่งจะทำการ generate static file ต่าง ๆ ออกมาให้
โดยจะถูกสร้างอยู่ใน folder build นั่นเอง
จากนั้นก็นำไฟล์ต่าง ๆใน folder นี้ไป deploy บน server ต่อไป

ให้เริ่มจากการ deploy แบบ manual ก่อน
จากนั้นให้เริ่มทำการ deploy แบบอัตโนมัติ
เช่นการใช้ Surge เป็นต้น
จะทำให้ชีวิตการพัฒนาสะดวกสบายขึ้นมาก

สุดท้ายแล้ว

ให้เริ่มด้วยระบบเล็ก ๆ
ใช้ library/dependency เท่าที่จำเป็น
เขียนชุดการทดสอบ
สุดท้ายก็ทำการ deploy แบบอัตโนมัติอยู่ตลอดเวลา

Reference Websites
https://hackernoon.com/simple-react-development-in-2017-113bd563691f
https://github.com/erikras/react-redux-universal-hot-example
https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711
https://medium.freecodecamp.com/what-to-learn-in-2017-if-youre-a-frontend-developer-b6cfef46effd