หลังจากเขียน React โดยใช้ Create React App มาสักระยะ จึงมาบันทึกวิธีการติดตั้งเพื่อใช้งานไว้อีกครั้ง เหตุผลที่ใช้มันก็เพื่อลดขั้นตอนการ Config ต่างๆ อาทิเช่น Webpack, Babel หรืออื่นๆที่เกี่ยวข้อง

ซึ่งมันจะติดตั้งทุกอย่างเป็นค่าเริ่มต้นพร้อมใช้งานให้เราทั้งหมด นั่นทำให้เราสามารถเริ่มต้น Code ได้เลยทันที เพราะหากจะสร้าง React App โดยเริ่มต้นจากศูนย์ ดูเหมือนจะทำให้เสียเวลาในการขึ้นโครง Project เข้าไปอีก บล็อกนี้จะไม่ได้อธิบายพื้นฐานหรือ Concept ของ React นะครับ (สามารถหาจากเว็บอื่นซึ่งเขียนไว้ดีมากแล้ว) ตรงนี้จะเน้นเพียงการใช้ Create React App เท่านั้น เอาล่ะมาเริ่มกันเลยครับ

React คืออะไร ?

React คือ JavaScript library สำหรับการสร้าง user interfaces (UI) ซึ่งถูกพัฒนาโดย Facebook รวมถึงชุมชนนักพัฒนาและบริษัทแต่ละแห่ง อีกทั้ง React ยังสามารถนำมาใช้ทำ Single Page Application (SPA) ได้ด้วย

สิ่งที่ต้องติดตั้งก่อน

ก่อนอื่นเครื่องคอมพิวเตอร์ของเราจะต้องมี Node 8.16.0 หรือเวอร์ชั่นล่าสุด เพื่อที่จะใช้ความสามารถของ Node ในการใช้งานคำสั่งต่างๆในการพัฒนา React ได้ (Download และวิธีการติดตั้ง NodeJs)

สร้าง Project

เราสามารถเริ่มสร้าง Project โดยไม่ต้องทำการ configuration ใดๆ ด้วยคำสั่งด้านล่างนี้ โดยมี 3 ตัวเลือกจะใช้แบบไหนก็ได้ครับ

วิธีที่ 1 ใช้ npx (npx คือ package runner tool ที่ติดมากับ npm 5.2+ หรือเวอร์ชั่นสูงกว่า)

npx create-react-app my-app

วิธีที่ 2 ใช้ npm (npm init <initializer> มีอยู่ใน npm 6+)

npm init react-app my-app

วิธีที่ 3 ใช้ Yarn (yarn create มีอยู่ใน Yarn 0.25+)

yarn create react-app my-app

เมื่อสร้าง Project เสร็จแล้วภายในโฟลเดอร์ my-app จะมีโครงสร้าง Project รวมถึงติดตั้ง Dependencies ต่างๆไว้เรียบร้อยแล้ว ดังโครงสร้างด้านล่าง

  • node_modules – โฟลเดอร์นี้จะบรรจุ dependencies และ sub-dependencies ของ packages ที่ต้องใช้ภายใน application
  • package.json – เป็นไฟล์ สรุปรวมทั้งหมดของการ settings สำหรับ React application
  • public – โฟลเดอร์นี้จะบรรจุ assets เช่น css, รูปต่างๆ หรือไฟล์อื่นๆที่จะให้เข้าถึงได้โดยตรง
  • src– โฟลเดอร์นี้จะใช้บ่อยสุด เพราะ Code หรือ Components, ไฟล์ Components ที่เกี่ยวข้อง และ views ต่างๆ จะอยู่ที่นี่
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

สั่ง Run Project

ให้เข้าไปในโฟลเดอร์ Project ของเราก่อน ณ ที่นี้คือ my-app

cd my-app

จากนั้นพิมพ์คำสั่งเพื่อ Run Project ของเรา

npm start

หรือ

yarn start

จากนั้นให้เข้า URL http://localhost:3000 เพื่อดูผลลัพท์ บน browser

สั่ง Build Project

เราสามารถ Build Project เพื่อเตรียม Deploy ขึ้น Production ได้ คำสั่งดังนี้

npm run build

หรือ

yarn build

หลังจากนั้นไฟล์ทั้งหมดจะไปอยู่ที่โฟลเดอร์ build สำหรับนำไป Deploy ขึ้น Production ต่อไป

อ้างอิง