Quantcast
Channel: cc :: somkiat
Viewing all articles
Browse latest Browse all 1997

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

$
0
0

ในการเริ่มต้นพัฒนาระบบ 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

Viewing all articles
Browse latest Browse all 1997

Trending Articles