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

aofleejay
aofleejay
Jul 24, 2017 · 2 min read

หลายคนที่กำลังเริ่มต้นจะเขียน 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 เท่าที่เราได้ใช้งานครับ เราจะได้โปรเจคที่เหมาะกับเราที่สุดจริงๆ

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade