จะเริ่มเขียน React ต้องรู้อะไรบ้างฉบับคนกาก 2017

สวัสดีทุกๆคนที่กำลังอ่านบทความนี้อยู่นะครับ สำหรับใครที่ยังไม่รู้ ผมชื่อว่า ชุน (Chun Rapeepat) ตอนนี้เป็นแอดมินอยู่กลุ่ม NoobProgrammer Thailand Community นะครับ เป็นกลุ่มที่รวบรวมคนที่ชอบการเขียนโปรแกรมที่ยังเรียนไม่จบ มาพูดคุยกัน หาโปรเจคทำกัน อะไรทำนองนี้ ถ้าเกิดใครที่ยังไม่เข้าก็ไปเข้ากันด้วยนะ อิอิ (โปรโมทแปป)

โม้มานานละเข้าเรื่องดีกว่า พอดีว่าช่วงนี้มีหลายคนทักมาถามเรื่อง React แล้วเพื่อนก็กำลังหัดเขียน React อยู่พอดี ผมก็เลยคิดว่ามาเขียนเป็นบล็อกไว้ดีกว่า จะได้เป็นการทบทวนความรู้ของตัวเองไปด้วยเลย

ย้อนไปประมาณ 1 ปีที่แล้ว ตอนนั้นผมยังเขียน PHP, NodeJS อยู่เลย แล้วช่วงนั้นก็มี React เริ่มผุดขึ้นมาตามหน้าเฟส ผมก็เลยลองนั่งอ่านดู จากนั้นก็เริ่มสงสัยว่า เห้ยมันดียังไงอ่ะ เขียน HTML ใน Javascript เนื่ยนะ แลดูยุ่งยากจัง พอมาลองเขียนจริงก็รู้สึกว่านี่มันอะไรกัน ทำไมมันยุ่งยากอย่างนี้ แค่จะ Setup project ก็ปาไปครึ่งวันแล้ว จะเอารูปมาลงในเว็บก็ต้องติดตั้ง image-loader จะเขียน CSS ก็เขียนไม่ได้ ต้องติดตั้ง css-module จะเขียน JSX เลยก็ไม่ได้อีก ต้องติดตั้งตัว Babel packages เพิ่มอีกตั้ง 4–5 packages + Config Webpack อีกชาติเศษ (แต่ก็นับว่าเป็นการเริ่มต้นที่ดีทำให้เราเข้าใจว่าไอ้พวก create-react-app มันทำงานกันยังไง แนะนำว่าใครเขียนมาสักพักแล้วลองไปทำตั้งแต่ 0 ดูจะทำให้เข้าใจอะไรหลายๆอย่าง) แต่ใช้มาได้สักพักก็เริ่มเห็นข้อดีของมัน เรามาดูดีกว่าว่ามันมี Concept อะไรยังไงบ้าง แล้วมันดียังไง จากประสบการณ์ 1ปีอันน้อยนิดของผมเอง

Component-Based

Component-Based มันก็เหมือนกันการสร้างบ้านสักหลังนั้นหละ ต้องใช้หลายๆอย่างประกอบกันถึงจะเป็นบ้านที่สวยงามสักหนึ่งหลัง

Component-Based เป็นสิ่งนึงที่เจ๋งมากๆ เราจะมองส่วนประกอบเล็กๆในเว็บเราเป็น Component เช่นพวก Button, TextField, Card อะไรพวกนี้ แล้วเราจะใช้สิ่งเหล่านี้มาประกอบกันจนเป็นเว็บใหญ่ๆนั้นเอง

มันก็เหมือนกับการสร้างบ้านสักหลังนั้นหละ บ้านหลังนึงก็จะประกอบไปด้วยเฟอร์นิเจอร์ต่างๆเยอะแยะไปหมด ไม่ว่าจะเป็นเก้าอี้ ทีวี หรืออะไรต่างๆ สิ่งเหล่านี้มันก็คือ Component นั้นหละ ที่เราจะเอามาใช้ประกอบจนกลายเป็นบ้านที่สวยหรูขึ้นมาได้ และแน่นอนว่าของเหล่านี้จะต้องไม่มีอะไรเชื่อมต่อถึงกัน ยกตัวอย่างเช่นเตาเผาละกัน ถ้าที่บ้านมาเตาเผา 2 อัน แล้วมันเชื่อมถึงกัน แสดงว่าถ้าเราเปิดเตาเผาอันนึง อีกเตานึงมันก็จะติดด้วย ถ้าเป็นแบบนี้คงจะแปลกน่าดู 55 ดังนั้น Component แต่ละอันเมื่อเราสร้างมาแล้ว แล้วเราเรียกใช้งาน มันจะไม่มีอะไรเชื่อมกัน เช่น TextField เราเรียกมาใช้งาน 3 ตัว เวลาพิมพ์ไปที่ TextField ตัวไหนสักตัว ไอ้ 2 ตัวที่เหลือมันจะไม่มีอักษรพิมพ์ตาม ถึงมันจะเป็น Component เดียวกันก็เถอะ

Learn once write everywhere

ศึกษาอย่างเดียวทำได้แทบทุกอย่าง

เรียนรู้ครั้งเดียวเอาไปเขียนได้ทุกอย่าง สามารถเขียนเว็บก็ทำได้ เอาไปเขียน Mobile Application ทั้ง Android & IOS ก็ทำได้เพราะมี React-Native เอาไปทำเว็บ VR ก็ทำได้เพราะมี React VR และยังสามารถเอาไปทำเป็น Desktop Application ได้ด้วย อาจจะใช้เป็นตัว Electron + React.JS บอกเลยว่าเรียนรู้แค่ครั้งเดียว แต่เอาไปใช้เขียนอะไรอย่างอื่นได้ตั้งเยอะแยะ คุ้มจริงๆ

Understand props & state in React

Props ; ส่งข้อมูลจากแม่สู่ลูก

Props เป็นการส่งข้อมูลไปให้ Component โดยมันจะส่งข้อมูลจากบนลงล่าง หรือพูดอีกแบบก็คือ Component แม่ส่งค่าไปหา Component ลูก โดยการส่งค่า Props นั้นเราจะส่งผ่าน HTML Attribute นั้นหละ โดย Props นั้นเราไม่สามารถที่จะแก้ค่ามันได้ เราสามารถอ่านมันได้อย่างเดียว ยกเว้นว่า Component แม่จะส่งค่าใหม่มาให้ สามารถดูตัวอย่างการใช้ Props ตามโค้ดด้านล่างนี้เลย

<Component something={1 + 10}/>
<Component something={() => this.someFunction()}/>
<Component something="Or you can put some text here"/>

ส่วน State นั้นมันจะเป็นการเก็บข้อมูลภายใน Component ของมันเองซึ่งเราสามารถที่จะแก้ไขค่าด้านใน State ได้ เมื่อ State มีการเปลี่ยนแปลงเมื่อไร มันจะไปอัพเดรตตัว Render ให้เราด้วย โดย State จะเก็บอยู่ในรูปของ Object ตัวหนึ่ง

สมมุติว่าผมอยากจะสร้าง Component ง่ายๆมาสักอัน เอาเป็นว่าผมจะสร้างเป็นปุ่ม แล้วพอกดก็จะนับ Score แล้วก็แสดงค่า Score ออกมา โดยผมจะใช้ State เนี่ยหละเก็บค่า อันดับแรกเลยเราก็จะสร้าง State เริ่มต้น (Initialize State)โดยใช้ Method constructor ในการประกาศ

constructor() {
  super()
  this.state = {
    score: 0
  }
}

สังเกตว่าตอนนี้ผมเก็บค่า Score เอาไว้โดยให้ค่าเริ่มต้นมันเป็น 0 ต่อมาเราจะมาเขียนในส่วนของการ Render กัน

render() {
  return (
    <div>
      <h1>Your Score: {this.state.score}</h1>
      <button onClick={() => this.incScore()}>CLICK MEE!!</button>
    </div>
  )
}

สังเกตว่าเราจะทำการดึงค่าจาก State มาแสดงโดยใช้ this.state และในส่วนของปุ่มสังเกตว่าเมื่อกดปุ่มไปผมจะไปให้มันไปเรียก Function ชื่อว่า incScore ซึ่งเป็น Function ที่มันจะอัพเดรต State และเพิ่ม Score ให้ เรามาลองเขียนกันดีกว่า

incScore() {
  this.setState({
    score: this.state.score + 1
  })
}

ตอนนี้ Component เราก็สามารถที่จะใช้งานได้แล้ว ง่ายไหมหละ

Understand Redux

สมมุติว่าเรากำลังทำโปรเจคกันอยู่โปรเจคหนึ่ง เป็นโปรเจค TODO-LIST ง่ายๆ แล้วคราวนี้ลูกค้าอยากให้เพิ่ม Feature ใหม่ขึ้นมาเป็น Dashboard ที่นับจำนวนว่าตอนนี้เรามี TODO-LIST อยู่จำนวนกี่อัน ดูเหมือนง่ายนะ เราก็สร้าง Dashboard Component ขึ้นมาอีกอันนึง แต่ประเด็นคือเราจะคุยระหว่าง Component Todolist กับ Component Dashboard ยังไง เพราะ State มันอ่านข้าม Component กันไม่ได้หนิ ซึ่ง Redux สร้างมาเพื่อแก้ไขปัญหาตรงนี้

Without Redux vs Redux ; สังเกตว่า Redux มันเหมือนจะสร้าง STORE เอาไว้เป็น Global State

ถ้าเราไม่ได้ใช้ Redux เราก็จะโยนค่ากันไปมาอย่างงี้ โยนค่าขึ้นไปด้านบนแล้วก็ลงมาด้านล่างอีกทีซึ่งแบบนี้ถ้าเป็นโปรเจคใหญ่ๆก็จะเป็นอะไรที่มันซับซ้อนมาก ซึ่ง Redux เนี่ยมันจะทำการสร้าง State หลักของ Application ชื่อว่า Store โดยทุก Component สามารถที่จะเข้าไปอ่านค่า และ อัพเดรตค่าด้านใน Store ได้นั้นเอง

รูปนี้ผมว่าเป็นรูปที่อธิบายขั้นตอนการทำงานของ Redux ได้ดีสุดละ ; thenewboston

เรารู้ว่า Redux คืออะไรกันแล้วต่อมาเรามาดูดีกว่ามันทำงานยังไงบ้าง ตอนผมศึกษาใหม่ๆรู้สึกว่ามันซับซ้อนอยู่พอสมควร ดังนั้นใครอ่านไปไม่เข้าใจไม่เป็นไร ลองไปหาศึกษาต่อจากหลายๆสำนักดู เรามาเริ่มกันเลยดีกว่า

(ให้ทุกคนดูภาพด้านบนตามไปด้วยนะ) ตอนแรกเลย Users เมื่อมีการทำอะไรต่างๆบนหน้าเว็บ เช่นกรอกเพิ่ม TODO-LIST เราก็จะสร้าง Action ขึ้นมาตัวหนึ่ง โดย Action จะเป็น Javascript Object ตัวหนึ่งประกอบไปด้วย 2 ส่วนหลักๆคือ Type และ Payload โดย Type จะเป็นตัวบ่งบอกว่า ชนิดของ Action คืออะไร ส่วน Payload ก็คือสิ่งที่แนบไป ยกตัวอย่างเช่นผมกำลังเพิ่ม TODO-LIST ก็จะส่ง Action ไปแบบนี้

{
  type: 'ADD_NEW_TODOLIST',
  payload: 'do homework & play games'
}

ไอ้ก้อน Action เนี่ยมันจะส่งไปหาสิ่งที่เรียกว่า Reducers (มันเป็นตัวรับ Action แล้วไปอัพเดรต Store) ซึ่งเมื่อ Store มีการอัพเดรตเมื่อไร ตัว Component ที่ subscribe กับไอ้ตัว Store เอาไว้มันก็จะอัพเดรตตัว Render ใหม่ เหมือนกับ State ใน Component เปลี่ยนนั้นหละ เหมือนกันเลย

หลักๆก็จะประมาณนี้การทำงาน แต่ก็ยังมีบางอันที่ไม่ได้อธิบายไป ก็คือ Provider และ Container ถ้าได้ดูจากรูป ตัว Provider นั้นจะเป็น Component ตัวหนึ่งที่เราจะต้อง import มาจากตัว package ที่ชื่อว่า react-redux โดยเราจะเอาตัว Provider ครอบ App เราเอาไว้ทั้งหมด เพื่อให้ App ของเราสามารถเรียกใช้ หรือเข้าถึง Store ได้ทุกตัวนั้นเอง ส่วน Container ก็เหมือนเป็นแอพของเรานั้นหละ โดยเวลาเราจะดึงค่าออกมาจาก Store มันจะเข้ามาในรูปแบบของ Props นะ ไม่ใช่ State

เรื่องพวกนี้ต้องลองไปเขียนเล่นกันดูถึงจะเข้าใจการทำงานได้ทั้งหมด ลองไปค้นดูคลิปสอนใน YouTube ก็ได้ เหมือนผมก็ใช้เวลาเกือบสัปดาห์เลยกว่าจะเข้าใจ 55

Initialize project with create-react-app

Create React apps with no build configuration.

create-react-app เป็น tool ตัวหนึ่งที่จะช่วยประหยัดเวลามากในการเริ่มต้นโปรเจคด้วย React ซึ่งถ้าไม่มีไอ้เจ้า Tool ตัวนี้คงต้องนั้น setup webpack กันเองทั้งวันทั้งคืนเสียเวลานานมาก ซึ่งไอ้เจ้า tool ตัวนี้ใช้โครตง่าย อันดับแรกก็ทำการติดตั้งแบบ global โดยใช้ yarn หรือ npm จากนั้นก็เริ่มใช้งานได้ทันที ตามนี้

create-react-app <your project name>

แค่นี้มันก็จะ ติดตั้ง package ที่เราจำเป็นต้องใช้งานทั้งหมด รวมถึง generate code มาให้บางส่วนด้วยทำให้เราสามารถที่จะเริ่มต้นเขียนโปรเจคด้วย React ได้ในทันที

ส่วนนี้จะไม่พูดอะไรมากละกันลองไปเล่นกันดูเองเลย

Web styling with Styled Component

สมมุติว่าเราจะเขียนปุ่มขึ้นมา แต่ว่าต่างกันแค่ Background Color กับ Text Color เราจะทำยังไง ถ้าปกติก็คงจะเขียน Button ขึ้นมากันก่อนสัก class นึงแล้วก็ค่อยทำการก็อบแล้วเปลี่ยนสีตัวอักษร กับสีพื้นหลัง แล้วก็เปลี่ยนชื่อ class กันใช่ไหมหละ แต่ตอนนี้มันมีมิติใหม่แห่งการเขียน CSS แล้วนั้นแล้วก็คือ styled component นั้นเอง

ตัวอย่างการเขียน Styled component

Styled component ก็คือเราจะเขียน CSS ลงไปในโค้ด Javascript ของเราเลยแล้วเราสามารถเขียนใช้งาน CSS นั้นในรูปแบบของ Component ตัวนึง ซึ่งมันทำให้เราสามารถใช้งานความสามารถของ Javascript ลงไปในการเขียน CSS ของเราได้นั้นเอง ไม่ว่าจะเป็นการใช้ Function, Template string, และอื่นๆแล้วแต่จะทำ

โดยใน Styled component นั้นเราสามารถโยนค่าต่างๆเข้าไปผ่าน Props ได้ มันก็เหมือนกัน React Component นั้นหละ

ยกตัวอย่างสมมุติว่าผมจะสร้างปุ่มขึ้นมา 2 แบบคือปุ่มแบบเล็กกับปุ่มแบบใหญ่ โดยใช้ Styled component วิธีการก็ง่ายๆดังนี้

const Button = styled.button`
  /* If it's a small button use less padding */
  padding: ${props => props.small ? '0.25em 1em' : '0.5em 2em'};

  /* …more styles here… */
`;

แล้ววิธีเรียกใช้งานก็ง่ายๆเหมือนการเรียกใช้งาน Component เลย สังเกตว่าเราไม่จำเป็นต้องสร้าง class แยก ใช้ Props แยกเอาแทน

<Button>This is a normal button!</Button>
<Button small>This is a small button!</Button>

แนะนำว่าให้ไปลองอ่าน Tip & Trick เพิ่มเติมได้ คลิกที่นี่เลย

Serverside Rendering with Next.JS

ไม่ได้ทำ Serverside Rendering ; สังเกตดูว่าจะไม่มี Content อะไรอยู่ใน source code เลย เพราะทุกอย่างมันอยู่ใน Bundle Javascript file ทั้งหมด

สำหรับใครที่ไม่รู้ว่า Serverside Rendering คืออะไรโปรดอ่านก่อน ปกติแล้วการ render เว็บเพจของเราจะแบ่งออกเป็น 2 ฝั่งก็คือ Client-side กับ Server-side โดยสำหรับไอ้เจ้าตัว React เนี่ยมันทำงานบนฝั่ง client (สังเกตได้จากรูปด้านบน ซึ่งเวลากด view page source ดูมันจะมีแค่ div id = root กับ bundle javascript file) พอเวลาเว็บโหลดตัว bundle.js มาเสร็จมันก็จะทำการพ่น html css ออกมาใส่ใน div id = root นั้นเอง ส่วน Serverside render มันก็คือ การที่มันจะทำการพ่นตัว html, css ใส่ div id = root ไว้ตั้งแต่ฝั่ง server แล้วค่อยส่งก้อน html ทั้งหมดมาให้นั้นเอง

Serverside Rendering ; สังเกตว่าข้อมูลทุกอย่างจะถูกใส่มาให้เรียบร้อยตั้งแต่ฝั่ง server แล้ว ทำให้เราเห็นข้อมูลทุกอย่างเวลากด view page source

รู้จัก Serverside rendering กันแล้ว มาดูกันต่อดีกว่าว่ามันดียังไง อย่างแรกเลยคือ UX ที่ดีเพิ่มขึ้นนิดนึง ถ้าเกิดไม่ทำ Server render สังเกตจาก source code ดูก็ได้ว่าเว็บมันจะไม่มีอะไรเลย ดังนั้นเวลาผู้ใช้เปิดเว็บขึ้นมามันจะไปโหลดตัว Javascript มาก่อนพอโหลดเสร็จ มันถึงจะมา render หน้าเว็บมาให้เรา ทำให้เว็บหน้าขาวไปพักนึง ยิ่งถ้าตัว bundle.js ยิ่งใหญ่ เน็ตช้าๆ ยิ่งขาวหนักเลยทีเดียว ดังนั้นการทำ server render มันจะ render มาตั้งแต่ server เลยทำให้หมดปัญหานี้

ข้อดีอีกอย่างเลยคือเรื่อง SEO (Search Engine Optimization) สมมุติว่าเราเปิดเว็บใหม่พึ่งสร้างด้วย React แล้วไม่ทำ Server render พอ Google Bot มาเข้าเว็บเราสิ่งที่มันจะดึงไปได้ก็คือ ความว่างเปล่า เพราะว่าเว็บเราไม่มี Content อะไรอยู่ใน HTML เลย ดังนั้นการทำ Server render มันก็จะมาช่วยในเรื่องนี้

Note: Server render ไม่จำเป็นต้องทำทุกครั้งเสมอไปนะ ไม่ใช่ว่าจะทำโปรเจคอะไรก็ทำ server render มันทุกโปรเจค เราต้องดูด้วยว่าถ้าเราทำ server render ไปมันคุ้มค่ากับเวลาที่เสียไปรึป่าว เช่นจะทำเว็บเก็บแบบสอบถามก็ไม่จำเป็นต้องทำก็ได้ แต่ถ้าเป็นเว็บข่าว หรือว่าเว็บบล็อกก็ควรจะทำ

มีข้อดีก็ต้องมีข้อเสียเหมือนกัน ข้อเสียก็คือมันเสียเวลาในการทำ ต้องมานั่งเขียน Server อะไรเองอีก แถมยังยุ่งยากอีกด้วย บางทีก็มีอาการ Error โผล่มาให้ปวดหัวเป็นระยะๆ แต่ตอนนี้ความยุ่งยากเหล่านี้จะหมดไปเมื่อมี สิ่งเล็กๆที่เรียกว่า Next.JS (เกริ่นมาตั้งนานกว่าจะได้เข้าเรื่อง)

Next.JS คือ Framework สำหรับทำ Serverside Rendering คือเราไม่ต้อง Config อะไรเลยก็สามารถที่จะทำ Server render ได้ทันที เรียนรู้ง่าย แล้วก็เริ่มโปรเจคได้ภายใน 3–5 นาทีเท่านั้น ประมาณว่าเอามาม่ามาต้มรอได้เลยทีเดียว ส่วนเรื่องเทคนิคหรือการเขียนโค้ดแนะนำว่าลองไปอ่านดูได้เองเลย ถ้ามีพื้นฐาน React มาก่อนแล้วก็ศึกษาได้ง่ายๆ สามารถคลิกดูได้ที่นี่เลย

จบแล้วนะครับมีความคิดเห็นอะไรพิมพ์ไว้ใน comment ได้เลยครับ!!

That’s it~