เริ่มสร้าง React Component ตัวแรกกันเลย

เนื้อหาของคอร์สนี้ เรียบเรียงขึ้นจาก React.js Fundamental
ในบทความนี้จะเป็นการเริ่มต้นสร้าง React Application กันแล้ว

มาเริ่มกันเลย

React Installation

ให้เราทำการ install React ผ่าน NPM โดยให้เข้าไปอยู่ที่ root path ใน project folder แล้วพิมพ์คำสั่งต่อไปนี้

การรันคำสั่งดังกล่าวจะเป็นการติดตั้ง react react-dom เข้าไปในโปรเจ็กท์ของเรา โดย react คือ core module ของ React ทำหน้าที่เป็นแกนหลักของการพัฒนาระบบด้วย React  โดยทาง Facebook ซึ่งเป็นผู้พัฒนา React นั้นตั้งใจแยกตั้งใจแยกส่วนแกนกลางออกมา เพราะ React นั้นสามารถนำไปพัฒนาได้ทั้งบนเว็บ และมือถือ และตัว react module นั้นก็จะทำหน้าที่เป็นตัวกลางระหว่าง module ต่างๆ ที่ใช้พัฒนาในแต่ละ platform

ส่วน react-dom นั้นเป็น react module ที่ใช้สำหรับพัฒนาระบบ web application (DOM ในชื่อก็คือ DOM ของหน้าเว็บเพจนั่นแหละ)

ส่วนคำสั่ง –save นั้นเป็นการบันทึก module ตัวนี้ใน dependencies ในไฟล์ package.json ดังต่อไปนี้

สังเกตุมั๊ยครับว่า ตอนนี้ dependencies ของเราจะมีอยู่สองกลุ่ม กล่าวคือ devDependencies (ผ่านการรันด้วย –save-dev) กับ dependencies (ผ่านการรันด้วย –save) โดยกลุ่มแรกเป็น dependencies ที่จะรันในเครื่องที่มีสภาพแวดล้อมแบบ development เท่านั้น (ซึ่งจะไม่ถูกติดตั้งบน production environment) ส่วน dependencies นั้น คือกลุ่ม module ที่จะได้รับการติดตั้งในทุกๆ สภาพแวดล้อม

สร้าง template file

ก่อนอื่นให้สร้าง folder app ขึ้นมาที่ root project (react-fundamentals/app) ขึ้นมา จากนั้นสร้างไฟล์ index.html ในโฟลเดอร์ app/ โดยในไฟล์ดังกล่าวจะมีรายละเอียด code ดังนี้

Configure production script for NPM

ในขั้นตอนนี้เราจะทำการ setup ให้ NPM รันคำสั่ง bundle ที่เราได้เซตไว้ในไฟล์ webpack.config.js (ซึ่งเราได้เซตอัพไว้ในบทความตอนที่ 2) เพื่อสร้าง output ที่พร้อมต่อการนำไป deploy ลง production server โดยให้ทำการเปิดไฟล์ react-fundamental/package.json ขึ้นมาแล้วแก้ไข code ดังนี้

ตรง script นั้นคือคำสั่งที่ใช้ run สำหรับ npm ซึ่งในที่นี้คือคำสั่ง production ซึ่งหมายความว่า เมื่อใดก็ตามที่มีการรัน command ตัวนี้ npm จะวิ่งไปรันคำสั่ง webpack –p ซึ่งหมายถึง การรัน webpack โดยไปดึงค่า config จากไฟล์ webpack.config.js ขึ้นมาใช้

ให้เราไปที่ terminal แล้วรัน command ต่อไปนี้

คำสั่งนี้จะไป trigger ให้มีการรัน webpack –p ซึ่งจะส่งผลให้มีการสร้างโฟลเดอร์ dist/ ขึ้นมา โดยภายในนั้นจะมีไฟล์สองไฟล์ อันได้แก่ index.html และ index_bundle.js ขึ้นมา (โดยรายละเอียดก็เป็นไปตามที่ได้อธิบายไว้ในบทความตอนที่ 2 ไปเรียบร้อยแล้ว)

หากเราเปิดไฟล์ app/index.html ขึ้นมา เปรียบเทียบกับ dist/index.html เราจะเห็นความแตกต่างกันดังนี้

<!– Crayon Syntax Highlighter v_2.7 acheter pilule viagra.2_beta –>

จะเห็นได้ว่า webpack –p จะทำการ update ไฟล์ index.html โดยทำการ “ฉีด” ไฟล์เข้าไปที่ <body> ตามที่เราได้เซตไว้ใน webpack.config.js นั่นเอง

หากลองเปิดดูไฟล์ dist/index_bundle.js จะเป็นว่า มันเป็น javascript ที่ได้มีการ minify ไว้แล้ว (คือการตัด character ที่ไม่จำเป็นออกทั้งหมด เพื่อลดขนาดไฟล์ให้เล็กที่สุด สำหรับการนำไป deploy บน server) ซึ่งเป็นผลมาจากการใช้ babel-loader ในการแปลงไฟล์ .js ทุกตัวภายในโฟลเดอร์ app/ ให้กลายมาเป็นไฟล์ index_bundle.js แบบ minify ตามที่ได้เซตอัพไว้ในไฟล์ webpack.config.js นั่นเอง

สร้าง React Component ตัวแรก

ไล่กันทีละบรรทัด

สองบรรทัดนี้ คือการ import module เข้ามาจากโฟลเดอร์ node_modules/ โดยในที่นี้จะเป็นการ import สองตัว กล่าวคือ react และ react-dom โดยในขณะที่มีการ import นั้น ก็ทำการสร้าง variable พร้อมกับ instantiate ไปเลย โดย React เป็น variable ที่เป็น object ของ react module ส่วน ReactDOM เป็น object ของ react-dom module ตามลำดับ

บรรทัดนี้คือการสร้าง component ขึ้นมาชื่อว่า Hello โดยเราจะเรียกใช้ฟังก์ชั่นที่ชื่อว่า React.createClass ซึ่งมาจาก react module ในการสร้าง component ขึ้นมา
โดยภายใน component ทุกตัวนั้น จะต้องมีฟังก์ชั่น render เป็นภาคบังคับ ซึ่งหน้าที่ของ function render นั้น คือ การสร้าง ui ให้กับ component ตัวนี้นั่นเอง

บรรทัดนี้เป็นคือ ui ที่จะถูก render จาก Hello Component โดยในที่นี้คือซึ่งสำหรับตัวอย่างนี้ก็เป็นอะไรที่ง่ายมาก เพราะมันเป็นเพียงแค่การแสดง text เท่านั้น

นี่คืองานหลักของ React ล่ะครับท่านผู้ชม มันคือการ render component เพื่อแสดงบนหน้า web page โดยใช้ react-dom module ในการทำหน้าที่นี้ ซึ่งจะมีการเรียกใช้ฟังก์ชั่น render() ซึ่งฟังก์ชั่นดังกล่าวจะต้องกรอก argument สองตัว กล่าวคือ

  1. ตัว component ซึ่งในที่นี้ก็คือ Hello นั่นเอง โดยเวลาเรากรอกลงไป จะกรอกในรูปแบบ tag เลย อย่างในตัวอย่างนี้ก็คือ <Hello />
  2. ตำแหน่งที่จะเอา component ดังกล่าวนี้ไป render ใส่ในไฟล์ html หลัก และจากในตัวอย่างข้างต้น จะเป็นการนำ component Hello ไป render บน div ที่มี id=’app’ บนไฟล์ index.html นั่นเอง

Configure development server for NPM

คราวนี้ เราต้องการจะรัน server บนเครื่อง development (ซึ่งไม่ใช่ production server) และเราไม่ได้ต้องการจะรันคำสั่ง webpack –p ในเครื่อง development ของเราด้วย ดังนั้น เราจะต้องทำการ setup ให้ NPM สามารถรัน localhost application server ให้กับเราได้ โดยวิธีการก็ไม่ยาก เพียงแค่เปิดไฟล์ package.json แล้วเพิ่ม code ไปแค่บรรทัดเดียวเท่านั้น ดังนี้

โดยในครั้งนี้จะเป็นการเพิ่มคำสั่ง start ให้กับ npm command สำหรับโปรเจ็กท์ตัวนี้

จาก code ที่เพิ่มเข้ามา บอกกับเราว่า เมื่อใดที่เรารันคำสั่ง npm run start ตัว NPM จะไปสั่งรัน webpack-dev-server ซึ่งเป็น application server ที่เราได้ทำการติดตั้งไปตั้งแต่บทความตอนที่สองไว้เรียบร้อยแล้ว

เมื่อเสร็จแล้ว ให้ทำการรันคำสั่ง

จากนั้นให้เปิด browser แล้วพิมพ์ url ไปที่ http://localhost:8080 หากไม่มีอะไรผิดพลาด คุณจะเห็น text คำว่า Hello ReactJS Program! แสดงขึ้นมา

สำหรับผู้ที่ต้องการ code สำเร็จรูปเพื่อเอาไว้อ้างอิงในเวลาที่เกิด error จากขั้นตอนใด ขั้นตอนหนึ่งใน tutorial นี้ สามารถไปทำการ clone ได้ที่

https://github.com/himaeng/react-fundamentals

เมื่อทำการ clone มาแล้ว ให้เข้าไปที่ root path ของโปรเจ็กท์ แล้วทำการรันคำสั่ง

เพื่อดาวน์โหลดและติดตั้ง dependencies ที่จำเป็นทั้งหมดให้เรียบร้อยด้วย

สรุป

ในบทความนี้เราทำการสร้างชุดไฟล์ที่จำเป็นต่อการสร้าง React web application ขึ้นมา ซึ่งประกอบไปด้วย app/index.html (template file) และ app/index.js (core React component file)
นอกจากนี้เรายังมีการเพิ่ม script ให้กับ NPM อีกสองตัว อันได้แก่

  • production (สั่งรันด้วย npm run production) ที่จะไปเรียกใช้คำสั่ง webpack –p เพื่อ bundle ไฟล์สำหรับใช้บน production server
  • start (สั่งรันด้วย npm run start) เป็นการเรียกใช้ webpack-dev-server อันเป็น application ที่ใช้สำหรับรัน React app.

โดยภายใน component ของ React นั้น จะประกอบไปด้วยสองส่วนใหญ่ นั่นคือ ส่วนของการสร้าง component โดยการใช้ฟังก์ชั่น React.createClass ขึ้นมา หลังจากนั้นก็เข้าสู่ส่วนที่สองซึ่งก็คือการ render component ดังกล่าวลงบน template file (index.html) จากการเรียกใช้ฟังก์ชั่น render() ของ module react-dom นั่นเอง