ไม่ต้องตั้งค่าใดๆก็สร้างโปรเจค React ได้ด้วย create-react-app

เบื่อไหมกับการสร้างโปรเจค React แล้วต้องมานั่งตั้งค่า Webpack, ESLint และอื่นๆ? ถ้าเป็นนักพัฒนามือฉมังคงไม่ลำบากอะไร แต่สำหรับโปรแกรมเมอร์ตัวน้อยผู้เริ่มต้นหัดเขียน React ผมเชื่อว่าคงอยากทุ่มโพเดี้ยมซักร้อยรอบเป็นแน่ เราอยากเรียน React นะทำไมเราต้องมายุ่งยากกับการ config Webpack ด้วย มันยากไปสำหรับมือใหม่หัดขับรู้ไหมเออ

บทความนี้เราจึงจะแนะนำเครื่องมือหนึ่ง ที่ทำให้คุณสร้างโปรเจค React ได้ด้วย Webpack แต่ไม่ต้องลงไปตั้งค่าใดๆให้เสียเวลา และเครื่องมือที่ว่านี้ก็คือ Create React App ครับ

รู้จัก CLI ฝั่ง Front-end

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

boilerplate นั้นยังไม่ดีพอเพราะมันมีแค่โครงสร้างโปรเจคที่พร้อมใช้งานเฉยๆ แต่ถ้าเราอยากสร้างไฟล์เพิ่มหละ เราก็ต้องมานั่งสร้างไฟล์ใหม่ จากนั้นจึงค่อยๆเพิ่มโค๊ดลงไปในไฟล์นั้นจากศูนย์ จะดีกว่าไหมถ้ามีคำสั่งให้เราเรียกใช้เพื่อสร้างไฟล์ขึ้นมาพร้อมโค๊ดในไฟล์ เพื่อให้เราสามารถเขียนต่อยอดได้เลยโดยไม่ต้องเริ่มจากศูนย์ โปรเจคที่มาพร้อมกับคำสั่งสร้างไฟล์พร้อมโค๊ดในไฟล์นี่หละครับเรียกว่า CLI (Command Line Interface)

โปรเจคที่ผมสถาปนาให้เป็นเจ้าพ่อ CLI สำหรับ Front-end Framework สมัยใหม่ก็คือ ember-cli ถือว่าเป็น CLI ที่ดีและสมบูรณ์จน Angular2 ยังต้องขอหยิบยืมไปทำต่อยอด

หลังจากเกริ่นซะเยิ่นยาวไปดาวพลูโตซะขนาดนี้กลับเข้าฝั่งกันเถอะ Create React App ที่เรากำลังจะพูดถึงกันนี้ไม่ถึงขนาดเป็น CLI ที่สมบูรณ์แบบ ember-cli เพราะมันสร้างได้แค่โปรเจค แต่ผมเชื่อว่ามันคือเครื่องมือที่จะย่นเวลาให้มือใหม่หัดขับเรียนรู้ React ได้ง่าย ที่สำคัญผู้พัฒนาหลักของโปรเจคนี้คือ Dan Abramov ศาสดาผู้พัฒนา Redux เชียวนะเออ

แรกเริ่มใช้งาน Create React App

เรามาดูกันซิว่า Create React App จะช่วยให้คุณพัฒนาโค๊ดได้เร็วขึ้นอย่างไร เนื้อหาของบทความต่อไปนี้สรุปและเรียบเรียงใหม่จาก Create Apps with No Configuration

ก่อนอื่นเลยเพื่อนๆต้องติดตั้งเครื่องมือนี้ก่อนครับ

1$ npm install -g create-react-app

ติดตั้งเสร็จแล้วจะรออะไร สร้างแอพพลิเคชันไหว์ครู hello-world กันเถอะ

1$ create-react-app hello-world

ถ้าเราแอบเปิด package.json ดูจะพบว่าเครื่องมือนี้มาพร้อมกับสามคำสั่งให้เราใช้งานคือ

• start สำหรับรันโปรเจคบนโหมด development
• build สำหรับสร้างไฟล์และ optimize สำหรับ production
• eject สำหรับคนที่เป็นนักดัดแปลงตัวยง

1{
2  "name": "hello-world",
3  "version": "0.0.1",
4  "private": true,
5  "devDependencies": {
6    "react-scripts": "0.1.0"
7  },
8  "dependencies": {
9    "react": "^15.2.1",
10    "react-dom": "^15.2.1"
11  },
12  "scripts": {
13    "start": "react-scripts start",
14    "build": "react-scripts build",
15    "eject": "react-scripts eject"
16  }
17}

โครงสร้างไฟล์ของเราตอนนี้จะเป็นแบบนี้ครับ

1hello-world
2|----- node_modules
3|----- src
4  |----- App.css
5  |----- App.js
6  |----- index.css
7  |----- index.js
8  |----- logo.svg
9|----- favicon.ico
10|----- index.html
11|----- package.json
12|----- README.md

เมื่อทุกอย่างพร้อมลองรันแอพพลิเคชันของเราขึ้นมาดูกันครับ npm start จะเป็นการรันโปรเจคของเราบนโหมด development

1$ npm start

เมื่อเพื่อนๆเข้าไปที่ http://localhost:3000/ ก็จะพบกับหน้าเพจจากไฟล์ src/App.js ครับ

ข้อดีของ Create React App

เหมาะสำหรับมือใหม่

โปรเจคนี้เหมาะกับมือใหม่ที่พึ่งเรียนรู้ React อยากสร้าง React ด้วย Webpack แต่ไม่อยากตั้งค่า Webpack หรือเครื่องมืออื่นๆให้เสียเวลา นอกจากนี้ผู้ใช้งานยังสามารถเรียนรู้โครงสร้างไฟล์ที่ดีผ่านโปรเจคนี้ด้วย

มาพร้อมกับ Babel

คุณสามารถใช้งาน ES2015 ได้แน่นอนในโปรเจคนี้โดยไม่ต้องลงมือไปตั้งค่า Babel ด้วยตัวเอง

แสดงผลข้อผิดพลาด

เมื่อเจอข้อผิดพลาด เครื่องมือนี้จะแสดงผลข้อผิดพลาดนั้นออกทางหน้าจอ เพื่อให้คุณได้ทราบและแก้ไขได้ถูกจุด

ESLint

เครื่องมือนี้มาพร้อมกับ ESLint ที่จะขึ้นข้อความแนะนำให้กับคุณในกรณีที่คุณเขียนโค๊ดไม่ได้มาตรฐานตามที่ ESLint ตั้งกฎไว้

Production

เครื่องมือนี้มีคำสั่ง build เพื่อสร้างไฟล์สำหรับ production คุณสามารถออกคำสั่ง

1$ npm run build

เครื่องมือนี้มาพร้อมกับอะไรบ้าง

• Webpack และเหล่าปลักอิน ได้แก่ webpack-dev-server, html-webpack-plugin และ style-loader
• Babel
• Autoprefixer
• ESLint
• FlowType
• อื่นๆ

วิธีดูไฟล์ทั้งหมดของโปรเจค

ถ้าเพื่อนๆกลับไปดูที่โครงสร้างไฟล์อีกครั้ง จะพบว่าโปรเจคเราไม่มีอะไรเลย config ไฟล์ก็ไม่มีซักนิด ทั้งนี้เนื่องจาก create-react-app ต้องการให้คุณโฟกัสอยู่แค่โค๊ดที่คุณจะเขียนด้วยการซ่อนไฟล์ตั้งค่าออกจากโปรเจคคุณนั่นเอง แต่ถ้าคุณต้องการดูไฟล์ทั้งหมดที่เกิดขึ้นก็ย่อมสามารถทำได้ครับ ออกคำสั่งตามผมดังนี้

1$ npm run eject

คำสั่งนี้จะมีคำถามขึ้นมาว่า ต้องการทำจริงไหม มันมีผลถาวรนะ แก้กลับไม่ได้นะครับ ถ้ามั่นใจแล้วก็ตอบ Y

1Are you sure you want to eject? This action is permanent. [y/N]

ตอนนี้คุณจะได้โครงสร้างไฟล์ใหม่ดังนี้ครับ

1hello-world
2|----- config
3  |----- flow
4    |----- css.js.flow
5    |----- file.js.flow
6  |----- babel.dev.js
7  |----- babel.prod.js
8  |----- eslint.js
9  |----- webpack.config.dev.js
10  |----- webpack.config.prod.js
11|----- node_modules
12|----- scripts
13  |----- build.js
14  |----- openChrome.applescript
15  |----- start.js
16|----- src
17  |----- App.css
18  |----- App.js
19  |----- index.css
20  |----- index.js
21  |----- logo.svg
22|----- favicon.ico
23|----- index.html
24|----- package.json
25|----- README.md

ผมแนะนำเป็นอย่างยิ่งให้มือใหม่หลังจากเรียนรู้ React จนช่ำชองแล้ว ให้ย้อนกลับมาดูวิธีการตั้งค่าต่างๆของ Webpack, ESLint, FlowType และ Babel ผ่านคำสั่ง eject กันด้วยนะครับ

ข้อจำกัดของเครื่องมือนี้

มีหลายความสามารถที่ผู้ใช้ React ต้องการแต่ไม่รวมอยู่ในเครื่องมือนี้ ได้แก่

• Server rendering
• Testing
• CSS Modules
• Css preprocessors เช่น LESS หรือ SASS
• Hot reloading บน components

ในความเป็นจริงเครื่องมือทำนองนี้มีเยอะครับในโลก React เพื่อนๆจะเลือกใช้เครื่องมือไหนก็ได้ครับตามความสะดวก แต่สำหรับมือใหม่แล้วผมแนะนำตัวนี้ เพราะจากยอด star บน Github ถือว่าสูงมากเมื่อเทียบกับโปรเจคอื่น อีกอย่างคือผู้พัฒนาหลักคือ Dan Abramov ครับ ไม่ต้องคิดอะไรมาก แต่จงศรัทธา!

เอกสารอ้างอิง

facebookincubator. Create React apps with no build configuration.. Retrieved July, 23, 2016, from https://github.com/facebookincubator/create-react-app

Dan Abramov (2016). Understanding Critical CSS. Retrieved July, 23, 2016, from https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html