สำหรับสายงาน IT อย่างพวกเราการพัฒนาตัวเองให้ทัน Technology อยู่ตลอดเวลา Course Training ต่าง ๆ ที่มีมากมาย Course Online, Private Course ฯลฯ เป็นต้น โดยส่วนตัวก็ไม่ได้คิดว่าการเรียนแบบ Online มันไม่ดีนะ แต่เพราะอาจจะเป็นเพราะความสะดวกสบายของการเรียน Online นั้นแหละทำให้เราไม่ได้เรียน ในความคิดก็เพราะว่า “เพราะมัน Online จะเรียนเมื่อไหร่ก็ย่อมได้ จนไม่ได้เริ่มเรียนซะที” อีกข้อที่ทำให้การเรียน Course Online ยังเป็นสิ่งที่ยังไม่ตอบโจทย์การศึกษาของผมก็คือว่าติดปัญหาจะถามใครละ หรือถามได้แต่ได้รับการตอบที่ช้า จึงยังชอบการเรียน private Course ซะมากกว่า

Eventpop.me เป็น website ที่ผมใช้ค้นหา Course ต่าง ๆ และ Course “เขียนเว็บติดจรวดด้วย React” ก็เป็น Event นึงที่เจอใน website eventpop ครับ

คอร์สนี้พิเศษกว่า Course อื่นที่ผมเคยเข้าไปจองอย่างไร

1. ก่อนที่จะได้ไปสู่ขั้นตอนการซื้อ Ticker ต้องทำแบบทดสอบพื้นฐานให้ผ่านซะก่อน
- แบบทดสอบ 5 ข้อเมื่อทำผ่านก็จะได้ Email เชิญเข้าร่วมงานได้ แต่ละข้อจะเป็นพื้นฐานของ Javascript (ES5,ES6)
2. เพราะด้วยเนื้อหาของ Course 2 วันเต็มกับค่า Ticket 500 บาท ถือว่าถูกมากกับสิ่งที่ได้รับ
- เสื้อยืด Limited Edition มูลค่า 299 บาท
- ข้าวกลางวัน 2 มื้อ
- อาหารว่าง 4 มื้อ
- กาแฟให้ชงกินฟรีตลอดทั้งวัน Wifi Free

เนื้อหาใน workshop 2 วัน มีอะไรบ้าง

วันที่ 1

  • พื้นฐานและการทำงานของ React
  • เจาะลึกการใช้งาน JSX
  • รู้จักและใช้งาน state และ props อย่างเหมาะสม
  • Validate PropTypes ด้วย prop-types
  • การจัดการกับ event ภายใน component
  • การจัด style ด้วย styled-components และ ant design

วันที่ 2

  • รู้จักกับ Component Lifecycle และการใช้งาน
  • Fetch ข้อมูลจาก API ภายนอกด้วย axios
  • Component Testing ด้วย Jest, Enzyme, Sinon, Rewire
  • ใช้งาน react-router v.4
  • ทำ authentication ด้วย Firebase authentication
  • Deploy โปรเจคขึ้น Firebase hosting

สรุปสิ่งที่ได้รับในวันที่ 1

#เขีน React แบบง่าย ๆ ด้วย React.createElement
//example usag
React.createElement('h1',{className:'red'},'Hello Wolrd')
//result
<h1 class="red">Hello World</h1>

# JSX !== HTML jsx syntex ไม่ใช่ HTML แต่จะเปลี่ยนไปเป็น HTML ก็ต้องผ่านกระบวนการ compile ซะก่อน
# สร้าง React Project แบบรวดเร็วด้วย create-react-app
# การมอง UI เป็นก้อน Component เป็นหลักการพื้นฐานของการเขียน React Project เลย
# การส่งค่าระหว่าง Component ด้วย Props การเก็บค่าใน Component ด้วย state
# ตรวจสอบ value type ของ Props ด้วย
prop-types สามารถ custom prop-type ได้
App.propTypes = {name : (props,propName,componentName)=> { if(props[propName].length < 3){return new Error('Invalid Prop'+propName+'supplied to '+componentName+'.Validate failed' }},}
# สามารถทำ Layout UI ได้เพื่อการใช้งานซ้ำ ๆ
# state = {} สำหรับการ initial data, setState({}) เพื่อ update data
# การ map list ควรใส่ prop key ด้วยเพื่อ performance ที่ดี
# React Methods:
## Mounting

- constructor: สำหรับกำหนดค่าเริ่มต้นใน Class Component
-
static getDerivedStateFromProps (v. 16.3.0): ทำก่อนสร้าง DOM
-
render: สำหรับสร้าง DOM เราจะเขียน JSX syntex ใน method นี้
-
componentDidMount: ทำหลังจากสร้าง DOM
## Props/state updated
- static getDerivedStateFromProps (v. 16.3.0)]: ทำก่อนสร้าง DOM
-
shouldComponentUpdate: จะ Return True/False จะ Update DOM ถ้า Return True เท่านั้น
-
getSnapshotBeforeUpdate (v. 16.3.0): จะเก็บค่าก่อนการ Update DOM
-
render: สร้าง DOM
-
componentDidUpdate: เก็บ state หลังจากการ Update DOM
## Unmounting
- componentWillUnmount: จะทำงานเมื่อ DOM ทูกทำลายทิ้ง
## Error catching
- componentDidCatch (v. 16.0.0):
กรณีเกิด exception, catching
# React Techniques ต่าง ๆ
-
Container/Presentational
- Folder structure นิยม 2 แบบ Group by types, Group by pages
- Context API กำหนดค่า Global ของ Component Parent และ Component Child ในการส่งค่ากัน
- HOCs
- Render props

#style กำหนดค่าเป็น object ที่มีชื่อ key เป็น Camel Case และ value ต้องเป็นค่า string
#css global scope ทำให้เกิดปัญหา overide css class
#styled-components

- ทำให้เขียน css แบบปกติได้
- เขียน private css scope
- support scss
- generate prefix CSS class auto
- สามารถ extend css class ได้
- สร้าง animations ได้

#Ant Design React UI Library
#
React-router-dom สร้าง route ให้ react app
*** ท้ายบทจะมี Lab ให้ทำทุกครั้ง
จบเนื้อหาในวันแรก

สรุปสิ่งที่ได้รับในวันที่ 2

#Deploy React Project ด้วย Firebase Hosting
- พบปัญหา step การ integrate Firebase กับ React Project ของเราเรื่องไฟล์ index.html ของ Firebase มา Oervide ทับไฟล์ React เราทำให้ Deploy ไม่ได้ เป็นกันหลายคนมาก
#Testing ด้วย Jest

#Test By Testcase (it), Test by Group (describe)
# Test callback ด้วย
sinon
- expect จำนวนครั้งการ call, expect args ที่ส่ง
# Test Mock จำลองการทำงาน
# Test Component ด้วย
Enzyme
- test state initial, update state, track setState Behavior
- component Logic Lifecycle, Class function
- test event
- test pass props, state,
- jest snapshot เก็บค่าการ Test เป็นไฟล์ เอามาเปรียบเทียบอีกครั้ง ดูการเปรียนแปลง
- Disable lifecycle เพื่อ Test DOM ที่แม่นยำกว่า
- Asynchronous testing สามารถ Test Asynchronous callback ได้
- Test styled-components

*** ท้ายบทจะมี Lab ให้ทำทุกครั้ง
จบเนื้อหาในวันที่ 2

โดยส่วนตัวประทับใจทีมงานของ THiNKNET มากด้วยความเอาใจใส่ผู้เรียนติดปัญหาสอบถามได้ มีการวางแผนเตรียมงานกันเป็นอย่างดี สุดท้ายขอขอบคุณทีมงานที่มาให้ความรู้ครับ ^O^

Written by

Senior Developer @Telecom, Full Stack Developer [Subscribe Me @poolsawat.com]

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store