01204223/react-flask

หน้านี้เป็นส่วนหนึ่งของวิชา 01204223

เริ่มต้นและการติดตังซอฟต์แวร์ต่าง ๆ

node.js และ npm

เนื่องจาก react เป็น JavaScript framework เราจำเป็นต้องติดตั้งซอฟต์แวร์ที่เกี่ยวข้องเสียก่อน การใช้ JavaScript บนเครื่องเราเองนั้น เราต้องมีตัว runtime ที่ใช้ทำงานกับโปรแกรมภาษา JavaScript &nbps;  ในทางฝั่ง server Node.js น่าจะเป็นระบบที่มีคนใช้มากที่สุด ที่มาพร้อมกับเครื่องมือประกอบต่าง ๆ มากมาย (มากมายจริง ๆ)

ในการจะใช้เครื่องมือบน node.js ได้นั้น เราจะต้องติดตั้งโปรแกรม npm (Node Package Manager) ด้วย ดังนั้น ในขั้นแรกเราจะติดตั้งทั้งสองอย่างไปด้วยกัน

การติดตั้งบน MacOS และ Ubuntu:

การติดตั้งบน Windows

เมื่อติดตั้งแล้ว ให้ลองเรียกทั้งสองคำสั่งด้านล่างใน terminal

node -v
npm -v

ถ้ามีเลขเวอร์ชันขึ้นมาก็น่าจะเรียบร้อย

การสร้างโครง React project

ในการพัฒนาด้วย React เราจะเขียนโค้ดที่ไม่ได้ถูกนำไปรันบน browser โดยตรง เพราะว่าจะต้องมีการ preprocess อะไรก่อนมากมาย ซึ่งขั้นตอนเหล่านี้ถ้าเราต้อง setup เองทั้งหมดจะยุ่งยากมาก แต่เนื่องจาก environment ในการพัฒนาด้วย JavaScript นั้นมีเครื่องมือมากมาย เราจึงสามารถพึ่งพาระบบเหล่านั้นได้เลย

เราจะสร้างโครงโปรเจ็คด้วย vite โดยสั่ง (ให้เปิด terminal มาเรียกใช้งานเลย เพราะว่าจะมีคำสั่งที่ต้องเรียกค้างไว้ระหว่างพัฒนา)

npm create vite@latest first-react-app -- --template react

จะมีคำถามให้ตอบหลายคำถาม ถ้ามีการถามว่า

Install with npm and start now?

ให้เลือก No ไว้ก่อน เพราะว่าเราจะได้กดอะไรต่าง ๆ เอง เมื่อ npm ทำงานเสร็จ จะมีคำสั่งบอกให้เราเรียกเพื่อเริ่มติดตั้งไลบรารีและเริ่มเรียก dev server ดังด้านล่าง

 cd first-react-app
 npm install
 npm run dev

ให้ทำตามรายการคำสั่งดังกล่าว

ึึึคำสั่ง npm install จะติดตั้งไลบรารีที่เกี่ยวข้องลงในไดเร็กทอรี node_modules (ซึ่งจะใหญ่ขึ้นเรื่อยๆ อาจจะทำดิสก์เต็มได้) เมื่อติดตั้งเสร็จจะมีข้อความประมาณนี้

added 156 packages, and audited 157 packages in 33s

ส่วนคำสั่ง

npm run dev

จะเป็นการเรียก development web server ให้ทำงาน ให้เรียกแล้วเปิด terminal ทิ้งไว้ เมื่อเรียกเสร็จโปรแกรมจะแสดง URL ให้เราเข้าดูหน้าเว็บ (น่าจะเป็น http://localhost:5173/ ) นอกจากนี้ ถ้าเราแก้ไขอะไรในโปรเจ็ค vite จะจัดการ build โค้ดทั้งหมดให้รวมทั้ง reload หน้าเว็บของเราใน browser ให้โดยอัตโนมัติ

ถ้าไม่มีข้อผิดพลาดอะไร ใน browser จะแสดงโลโก้ Vite และ React

อ่านเพิ่มเติมเกี่ยวกับการทำงานของ vite