การสร้าง React Starter Project

Kms74 Oct 5, 2022

บทเล่า

ก่อนอื่นผู้บันทึกขอชี้แจงคร่าว ๆ ก่อนว่า React นั้นไม่ใช่ภาษาโปรแกรม แต่เป็น ui-framework ที่พัฒนาขึ้นมาโดยทีมงาน Facebook และเป็นที่นิยมในกลุ่มผู้พัฒนาเว็บแอปเป็นอย่างมาก ซึ่งผู้บันทึกเองจะไม่ขอลงรายละเอียดลึกซึ้ง (เพราะผู้บันทึกก็ไม่ได้มีความรู้ลึกซึ้งในเรื่องนี้) 😁 เชื่อว่าผู้เข้ามาศึกษาน่าจะรู้จัก และมีพื้นฐานเกี่ยวกับ React มาพอสมควรบ้างแล้ว

เตรียมพ้อม

ในการเริ่มต้นสร้าง React Project ในบทบันทึกนี้ จะใช้ตัวช่วยติดตั้งแพ็กเกจ Node Packgage Manager หรือ npm ลองตรวจสอบดูว่าเครื่องของเรามีการติดตั้งไว้เรียบร้อยหรือยัง ด้วยการเปิดหน้าต่าง cmd.exe (สำหรับวินโดวส์) พิมพ์คำสั่งดังนี้แล้วกด Enter

node -v

ถ้ามี Node Packgage Manager ติดตั้งไว้อยู่แล้ว ระบบจะแสดงหมายเลขเวอร์ชั่นออกมา แต่หากยังไม่ได้ติดตั้ง ก็กลับไปดูวิธีการติดตั้งได้จากบทบันทึก Chocolatey Package Manager สำหรับวินโดวส์ ทำการติดตั้งให้เรียบร้อยแล้วดำเนินการขั้นต่อไป

Get Started

create-react-app

ทีมงาน Facebook ได้จัดเตรียมแม่แบบโครงสร้าง React Starter Project เอาไว้ให้แล้วใน Node Package ชื่อว่า creat-react-app เราสามารถเริ่มสร้างโปรเจคด้วยแม่แบบโครงสร้างนั้นผ่าน Command Line ด้วยคำสั่งดังนี้

npx create-react-app myapp

โดยแทนที่ myapp ด้วยชื่อแอปโปรเจคที่เราต้องการสร้าง รอสักครู่ Node Package Manager จะทำการติดตั้ง React Starter Template ลงในโฟลเดอร์ /myapp หรือโฟลเดอร์ที่เป็นชื่อแอปโปรเจคที่เรากำหนดไว้ในคำสั่งข้างต้นนั่นเอง

creat-react-app-0

รอต่อไปจนกระทั่งปรากฏข้อความ Happy hacking!

creat-react-app-1

ทดสอบผลการติดตั้ง

ทำการย้ายพาธคำสั่งไปที่โฟลเดอร์แอปโปรเจคที่เพิ่งสร้างขึ้นมา

cd myapp

ทดลองสั่ง run

npm start

Node Package Manager จะทำการจำลองเซิร์ฟเวอร์ขึ้นมาแบบนี้ (สังเกตจะแสดงที่อยู่เว็บแอปและพอร์ตมาให้)

creat-react-app-2

และถ้าไม่มีขั้นตอนอะไรผิดพลาด เมื่อพิมพ์ที่อยู่ตามที่ Node Package Manager กำหนดมาให้ลงในเว็บเบราเซอร์ ในตัวอย่างคือ http://localhost:3000 ก็จะแสดงโลโก้ React ขึ้นมาแบบนี้ เป็นอันเสร็จเรียบร้อย

creat-react-app-3

ติดตั้ง React App ด้วยวิธีอื่น

นอกจากคำสั่ง npx ข้างต้น เรายังสามารถทำการติดตั้ง [React Starter Project] ด้วยคำสั่งอื่น ๆ ได้อีก เป็นต้นว่า

• ใช้คำสั่ง npm พิมพ์คำสั่ง

npm init react-app myapp

• ใช้คำสั่ง yarn พิมพ์คำสั่ง

yarn create react-app myapp

หรือจะสร้างโฟลเดอร์ขึ้นมาเองดื้อ ๆ เลยก็ยังได้ โดยอ้างอิงโครงสร้าง React App ที่กำลังจะกล่าวถึง

โครงสร้าง React App

ทำการเปิดแอปโปรเจคด้วยโค้ดเอดิเตอร์ที่ถนัด (สำหรับบทบันทึกตัวอย่างนี้จะใช้ VS CODE เป็นโค้ดเอดิเตอร์) ถ้ายังอยู่ในหน้าต่าง cmd.exe ผู้ศึกษาสามารถเปิด VS CODE ได้ด้วยคำสั่ง

code .

หรือจะเปิดจากสตาร์ทเมนูของวินโดวส์ตามปกติก็ได้เช่นกัน สำหรับผู้ศึกษาที่ต้องการใช้งาน VS CODE แต่ยังไม่ได้ทำการติดตั้ง สามารถศึกษาวิธีติดตั้งได้จากบทบันทึก Chocolatey Package Manager สำหรับวินโดวส์ ได้เลย

เมื่อเปิดเข้ามาแล้วจะเห็นโครงสร้าง React App ของเราโดยหลัก ๆ จะเป็นดังนี้

myapp/  
  node_modules/  
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
  package.json
  README.md

ดูใน VS CODE ก็จะเห็นโครงสร้างประมาณแบบนี้

creat-react-app-4

หลังจากนี้เราสามารถเพิ่มหรือแก้ไข component ต่าง ๆ ในโฟลเดอร์ src เพื่อแสดงผลเว็บแอปให้เป็นไปตามความต้องการของเราได้ โดยจะนำมาแนะนำในบทบันทึกต่อ ๆ ไป

บทบันทึกที่เกี่ยวข้อง

• Chocolatey Package Manager สำหรับวินโดวส์

ความคิดเห็น