หมายเหตุผู้แปล: Tutorial นี้แปลมาจากต้นฉบับภาษาอังกฤษ JavaScript Stack from Scratch โดยส่วนมากจะแปลและแปลงสำนวนจากคำอธิบายดั้งเดิมตรงๆ และอาจมีบางส่วนที่อธิบายเพิ่มเติมขึ้นมาเพื่อให้เห็นภาพชัดเจนมากขึ้น สำหรับใครที่เห็นว่าคำแปลบางส่วนดูแปลกๆ หรืออธิบายเข้าใจยาก สามารถ Pull Request ที่แก้มาได้เลยครับ และน้อมรับคำติชมทุกประการครับผม :)
ยินดีต้อนรับสู่ Tutorial สอนการสร้าง และใช้งานเครื่องมือต่างๆ ของภาษา JavaScript: JavaScript Stack from Scratch
Tutorial นี้เป็น tutorial ที่จะสอนการใช้งาน JavaScript tool ต่างๆ ด้วยกัน โดยจะสอนแบบตรงไปตรงมา อธิบายทีละจุดทีละเรื่อง ซึ่งผู้อ่านควรจะมีพื้นฐานทางด้านการเขียนโปรแกรมมาบ้าง รวมถึงรู้เบสิคของ JavaScript มาบ้าง Tutorial นี้จะเน้นไปที่การรวมเอา tools ต่างๆ หลายๆ ตัวมาใช้งานด้วยกัน และให้ตัวอย่างโค้ดที่เรียบง่ายที่สุด สำหรับในแต่ละ tool เพื่อให้นำไปใช้งานต่อได้ง่ายและเข้าใจมากขึ้น ซึ่งคุณเองก็สามารถที่จะอ่าน tutorial นี้ไปแต่ละบท พร้อมกับสร้าง boilerplate ไว้ใช้งานเองได้ตามที่ต้องการ
ในความเป็นจริง คุณไม่จำเป็นต้องใช้ stack แบบที่เรานำเสนอในการพัฒนา Web Page เล็กๆ ที่ไม่จำเป็นต้องมี interaction อะไรมากมาย (ถ้าโปรเจคมีขนาดเล็ก ใช้แค่ Browserify/Webpack + Babel + jQuery ก็เพียงพอแล้วในการที่เราจะเขียนโค้ดตามมาตรฐาน ES6 แต่ก็ใช้ Library เดิมๆ อย่าง jQuery ได้) แต่ถ้าคุณต้องทำ Web Apps ขนาดใหญ่ รองรับต่อการ scale ขนาดของ Web Apps รวมถึงต้องการความช่วยเหลือในการ setup tool ต่่างๆ, Tutorial นี้จะช่วยเหลือคุณได้มาก
เนื่องจากเป้าหมายของ Tutorial นี้คือจะสอนการใช้ tool หลายๆ ตัวร่วมกัน ซึ่งผมเองก็จะไม่ลงรายละเอียดว่า tools แต่ละตัวนั้นทำงานยังไง ถ้าอยากก็รู้สามารถอ่าน documentation หรือ tutorial แบบ in-depth ตัวอื่นๆ ได้ ถ้าต้องการเข้าใจการทำงานของ tools แต่ละอันมากขึ้น
ซึ่ง stack ที่จะใช้ในบทนี้นั้นจะใช้ React เป็นหลัก ซึ่งถ้าคุณอยากเรียนรู้ React โปรเจค create-react-app นั้นก็ช่วยให้คุณ set up React environment ได้อย่างง่ายได้ โดยที่คุณไม่ต้องไป config อะไรเองเลย ซึ่งโดยส่วนตัวผมเอง(ผู้เขียน) ก็แนะนำให้ใช้ create-react-app สำหรับผู้มาใหม่ที่ต้องใช้ React และต้องเข้าใจเรื่องต่างๆ ให้รวดเร็วหน่อย แต่ใน Tutorial นี้ คุณไม่จำเป็นต้องใช้ config ที่ถูกตั้งค่ามาแล้วเหล่านั้น เพราะเราต้องการให้คุณเข้าใจทุกอย่างตั้งแต่แรกเริ่มไปจนถึงได้ Web Apps ออกมา
นอกจากนี้เรายังมีตัวอย่างโค้ดให้ด้วยสำหรับแต่ละบท และทุกบทนั้นสามารถ run ได้ด้วยคำสั่งง่ายๆ อย่าง yarn && yarn start หรือ npm install && npm start ผมเองก็ขอแนะนำให้ทุกท่านเริ่มเขียนทุกอย่างเองตั้งแต่ไม่มีอะไรเลย โดยทำตามขั้นตอนแต่ละขั้น ซึ่งจะอ้างอิงตาม tutorial ในแต่ละบท
ทุกบทนั้นจะมีการอ้างถึงและใช้งานโค้ดจากบทก่อนหน้า ดังนั้นถ้าคุณกำลังมองหา boilerplate ที่มีครบทุกอย่าง ก็ทำได้ง่ายๆ โดยการ clone โค้ดจากบทสุดท้ายมาก็พอแล้ว
หมายเหตุ: ลำดับการเรียงของบทนั้นไม่ค่อยเหมาะสมกับวิธีการเรียนแบบปกติ เช่น การทำ testing หรือ type checking ควรทำก่อนที่จะเขียน React ด้วยซ้ำ ซึ่งจะเป็นการยากหากเราจะทำการสลับบทเพื่อเรียงลำดับใหม่ เพราะยังมีการปรับแก้แต่ละบทอยู่เรื่อยๆ ซึ่งผม(ผู้เขียน) ขอให้ทุกอย่างเสร็จสิ้นก่อน แล้วเราจะพิจารณาเรื่องนี้อีกทีหนึ่ง
Code ที่อยู่ใน Tutorial นี้สามารถทำงานได้ทั้งบน Linux, macOS และ Windows
บทที่ 1 - Node, NPM, Yarn และ package.json
บทที่ 2 - ติดตั้งและใช้งาน package
บทที่ 3 - ตั้งค่าเพื่อใช้งาน ES6 โดยใช้ Babel และ Gulp
บทที่ 4 - การใช้ ES6 syntax ในการเขียน Class
บทที่ 5 - การใช้ ES6 syntax ในการสร้าง modules
บทที่ 7 - พัฒนาแอพฝั่ง Client โดยใช้ Webpack
บทที่ 10 - Immutable JS และ Redux Improvements
บทที่ 11 - การทำ Testing โดยใช้ Mocha, Chai และ Sinon
บทที่ 12 - เช็ค Data Type ด้วย Flow
Production / development environments, Express, React Router, Server-Side Rendering, Styling, Enzyme, Git Hooks.
- 中文 by @pd4d10
- Italiano by Fabrizio Bertone
- 日本語 by @takahashim
- Русский by React Theming
- ไทย by MicroBenz
If you want to add your translation, please read the translation recommendations to get started!
เขียนโดย @verekia – verekia.com.
ลิขสิทธิ์: MIT