วิธีติดตั้ง Create React App

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

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

React คืออะไร?

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

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

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

สร้าง 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 ต่อไป

อ้างอิง

https://github.com/facebook/create-react-app