การติดตั้งและการเตรียมแอปพลิเคชัน React
ในบทเรียนนี้ เราจะเริ่มจากการติดตั้งและเตรียม แอปพลิเคชัน React เนื่องจากต่อไปเราจะ ใช้มันร่วมกับ Redux มีวิธีที่เร็วกว่า ในการสร้างเทมเพลตแอปพลิเคชัน React พร้อม Redux (ซึ่งก็ไม่เสมอไปว่า จะง่าย โดยเฉพาะสำหรับผู้เริ่มต้น) ที่ระบุไว้ ในเอกสารทางการ แต่เราจะเริ่มจากศูนย์
เริ่มแรก สร้างแอปพลิเคชัน React
my-app โดยใช้ Vite
(เป็นตัวแทนที่ทันสมัยของ Webpack)
เพื่อทำสิ่งนี้ เปิด เทอร์มินัล
และป้อนคำสั่งต่อไปนี้ (ในตัวเลือกที่เสนอ
ถ้ามี ให้เลือก React จากนั้น JavaScript):
npm create vite@latest my-app -- --template react
cd my-app
npm install
เรียกใช้แอปพลิเคชันที่สร้างขึ้น:
npm run dev
เปิดลิงก์ที่เสนอในเบราว์เซอร์
http://localhost:5173/ และจะเห็น
หน้าจอเริ่มต้นที่คุ้นเคย ทุกอย่างทำงานได้
ตอนนี้ ลบสิ่งที่ไม่จำเป็นออก ล้างโฟลเดอร์ public
ในโฟลเดอร์ src เก็บไว้เฉพาะ main.jsx,
index.css และ App.jsx (ใน index.css
และ App.jsx ลบเนื้อหาทั้งหมดออก)
ในไฟล์ index.html แทนที่ข้อความ
ไตเติลด้วย:
<title>React Redux App</title>
สร้างแอปพลิเคชัน React และตรวจสอบว่า มันทำงานได้
ลบไฟล์และโฟลเดอร์ที่ไม่จำเป็นออก