เขียน React แบบไม่ต้องเซ็ตอัพโปรเจคเองด้วย create-react-app

หลายคนที่กำลังเริ่มต้นจะเขียน React ผมเชื่อว่าต้องเจอกับการเซตอัพอะไรเยอะแยะ เซตอัพกันตาแทบแตก ไม่ได้เขียนโค้ด React ซักกะตัว ผมเองก็เป็นหนึ่งในนั้นครับ จนเจอกับสิ่งที่เรียกว่า create-react-app นี่แหละครับ
create-react-app คืออะไร ?
create-react-app คือ เครื่องมือที่ช่วยขึ้นโปรเจค React พร้อมการตั้งค่าที่เพียงพอต่อการใช้งานครับ ทำให้เราไม่ต้องเซตอัพโปรเจคเอง(สำหรับมือใหม่ผมว่ายุ่งยากพอสมควร) ทำให้เราสามารถสร้างโปรเจคได้อย่างรวดเร็ว และเริ่มเขียนโค้ดได้ทันทีครับ
create-react-app มีอะไรให้เราบ้าง ?
ก่อนที่จะไปเริ่มใช้งาน ลองมาดูกันก่อนว่า create-react-app นั้น มีอะไรให้เราใช้งานได้บ้าง
ติดตั้ง babel-loader มาให้เรียบร้อย
เชื่อว่าทุกวันนี้คนที่ใช้งาน React ส่วนใหญ่แทบจะเขียนโค้ดด้วย es2015 เป็นอย่างต่ำ ซึ่ง browser อาจจะยังไม่รองรับฟีจเจอร์บางส่วน ทำให้เราต้องเซตอัพ babel-loader เพื่อทำการ transpile โค้ดของเราให้กลายเป็น Javascript ที่ browser ทั่วไปอ่านได้ ซึ่งเจ้า create-react-app เซตอัพตรงนี้มาให้เรียบร้อยแล้ว เราสามารถเขียน React ด้วย Javascript เวอร์ชั่นใหม่ๆได้เลย
มาพร้อม development server
create-react-app มี development server คือเจ้า webpack-dev-server มาให้เราเรียบร้อยครับ ความสามารถของมันคือเป็นเซิฟเวอร์ที่ใช้ในการเดฟครับ มาพร้อมกับฟีจเจอร์ live reload ที่จะ reload browser เมื่อเราทำการแก้โค้ดครับ รวมถึงเมื่อมี error ก็จะแสดงขึ้นที่ browser ทันทีครับ
css-loader และ autoprefixer
create-react-app มาพร้อมกับ css-loader เพื่อทำหน้าที่แปลง css ให้เป็น object ที่ javascript อ่านได้ พร้อมกับ autoprefixer ที่ทำหน้าที่เติม prefix ให้กับ css ให้ใช้งานในแต่ละ browser ได้ด้วย
test environment
เราสามารถเขียนเทสได้เลยครับ โดย create-react-app จะเซ็ตอัพค่าต่างๆเกี่ยวกับการเทสไว้ให้เรียบร้อยแล้ว โดย test runner ที่ใช้จะเป็น jest ครับผม
สร้างโปรเจคกันเถอะ
ก่อนอื่นติดตั้ง create-react-app ด้วยคำสั่งนี้ครับ
npm install -g create-react-appและเราจะใช้ create-react-app สร้างโปรเจคดังนี้ครับ
create-react-app my-appเราก็จะได้โฟลเดอร์ my-app ซึ่งด้านในก็จะมีโค้ด React และการเซ็ตอัพไว้เรียบร้อย โดยเราสามารถเข้าไปในโปรเจค และมีคำสั่งให้ใช้ตามนี้ครับ
- npm start — เริ่มโปรเจคโดยสามารถเข้าไปดูได้ที่ http://localhost:3000
- npm run build — เพื่อ build โปรเจคเอาไปใช้ในระดับ production โดยไฟล์ที่ได้จะอยู่ใน folder build
- npm test — สั่งรันเทสของเราที่มีอยู่ในโปรเจค ในตัวอย่างจะมีไฟล์เทสให้อยู่ที่ App.test.js
- npm run eject — สำหรับใครที่อยากแก้ไขการเซ็ตอัพโปรเจค หรืออยากเห็นการตั้งค่า ก็สามารถใช้คำสั่งนี้เพื่อดูการตั้งค่าทั้งหมด โดยไฟล์การตั้งค่าจะอยู่ในโฟลเดอร์ config (คำสั่งนี้ใช้แล้วจะแก้กลับเป็นแบบเดิมไม่ได้นะครับ เอาการตั้งค่าออกมาแล้วก็เอากลับไปไม่ได้)
สรุปการใช้งาน
create-react-app เป็นเครื่องมือตัวหนึ่งที่สามารถขึ้นโปรเจคได้ไวมากๆ พร้อมการใช้งานที่เพียงพอต่อมือใหม่ ทำให้สามารถเอาเวลาไปโฟกัสกับการเขียน React มากกว่าการไปเซ็ตอัพโปรเจคซึ่งค่อนข้างยุ่งพอสมควรสำหรับมือใหม่
ส่วนตัวผมเองยังรู้สึกว่าขาดเรื่อง scss ไปครับ ซึ่งเราสามารถเข้าไปเขียน loader เพิ่มเองได้ และสำหรับใครที่อยากทำ seo ก็ต้องดูเรื่อง server side rendering เพิ่มด้วยนะครับ
แนะนำว่าเมื่อเราลองใช้ไปสักระยะเราจะรู้ว่าเราขาดเหลืออะไรบ้าง แนะนำว่าให้ไปลองฝึกตั้งค่าโปรเจคเอง และเลือกเครื่องมือหรือ library เท่าที่เราได้ใช้งานครับ เราจะได้โปรเจคที่เหมาะกับเราที่สุดจริงๆ
