Education

React/Redux Bootcamp รุ่น#1

เกี่ยวกับคอร์ส

Bootcamp สุดเข้มข้นจากทีมงาน CodeSheep เหมาะสำหรับผู้ที่ชื่นชอบการเรียนแบบเจาะลึกและเน้นการฝึกปฏิบัติ เราเชื่อในการฝึกและฝึกและฝึกจนสามารถใช้ออกมาได้อย่างเป็นธรรมชาติ ในเวลา 5 วันนี้เราจะเขียนแล้วลบเขียนแล้วลบจนเข้าใจการใช้งานและแนวความคิดที่อยู่เบื้องหลังการสร้างแอพพลิเคชั่นด้วย React/Redux รวมถึง ecosystem รอบข้าง เช่น module bundler ยอดนิยมอย่าง webpack, การเขียน JavaScript ด้วย ES6+, การใช้งาน ESlint เพื่อตรวจสอบความถูกต้องของ Syntax และให้ style การเขียนเป็นไปในทิศทางเดียวกัน, การเขียน Unit test ด้วย mocha, chai, sinon, enzyme เป็นต้น

ปรัชญาในการเรียน

  • เรียนสบายๆ เน้นเป็นกันเองและการสื่อสารภายในกลุ่ม พูดคุยเหมือนเพื่อนแลกเปลี่ยนความรู้กัน
  • ทำซ้ำแล้วซ้ำอีกจนฝังลึกลงไปในจิตใต้สำนึกจนไม่สามารถจะทำผิดได้
  • ไม่เน้นสอนการใช้งาน boilerplate เน้นการเขียนเองจาก 0 เพื่อให้เข้าใจการทำงานทุกบรรทัด

เนื้อหาภายในคอร์ส

วันที่ 1 ปูพื้น JavaScript, Node.js, ES6, Promise, และเริ่มต้นกับ React

  • รู้จักกับ Node.js และการติดตั้ง package ด้วย npm หรือ yarn
  • ทำความเข้าใจ Node module แบบ CommonJS (module, exports, module.exports, require)
  • หลักการและการใช้งาน Promise เพื่อหลีกเลี่ยง Callback hell 
  • เรียนรู้ syntax ใหม่ๆ ใน ES6+ (let, const, arrow function, destructuring, default, rest, spread, import, export, etc.)
  • การใช้งาน Babel เพื่อให้ browser ทำงานกับ ES6+ ได้
  • การใช้งาน map, reduce, filter เพื่อแปลงค่าใน array
  • OOP concept ใน ES6+
  • ทำความเข้าใจตัวแปร this และ scope ของตัวแปร
  • การใช้งาน Webpack เบื้องต้นและการตั้งค่าที่เหมาะสมสำหรับ development environment
  • การใช้งาน ESlint เพื่อตรวจสอบ syntax แบบ realtime
  • ทำความเข้าใจเทคโนโลยีที่อยู่เบื้องหลัง React อย่าง VirtualDOM
  • การใช้งาน JSX และเจาะลึกเบื้องหลังการทำงานของ JSX

วันที่ 2 เจาะลึก React

  • เข้าใจความแตกต่างระหว่าง State และ Props
  • การจัดการกับ event และ state ใน React
  • การออกแบบโครงสร้าง Component สำหรับสร้าง web application
  • เจาะลึก Component life cycle แต่ละขั้นตอนว่าควรใช้ในสถานการณ์ไหน
  • การใช้งาน React-Router เพื่อทำ Single-Page Application (SPA)
  • การสร้าง Layout ของหน้าเว็บที่ใช้ซ้ำกัน
  • รูปแแบบ error ที่เจอบ่อย วิธีการ debug และการใช้งาน React DevTools
  • เริ่มสร้าง Twitter clone ด้วย React

วันที่ 3 เจาะลึก Redux

  • สถาปัตยกรรมระบบของ Redux และทำความเข้าใจเมื่อไหร่ควรใช้ Redux
  • แพทเทิร์นการสร้าง action, reducer, store และการใช้งานร่วมกับ React
  • Presentation component vs Container component
  • การใช้งาน Hot Module Reloading
  • การใช้งาน Redux DevTools และ Time Travel Debugging 
  • สร้าง Twitter clone โดยใช้ Redux ในการจัดการ state

วันที่ 4 สร้าง React + Redux สำหรับ real world application

  • สร้าง async action ด้วย redux-thunk
  • การใช้งาน react-router ร่วมกับ redux
  • การสร้างและ validate form ด้วย redux-form
  • ทำ client side authentication ด้วย JSON web token
  • การเก็บ state บนฝั่ง client ด้วย localStorage
  • ฝึกเขียน React/Redux โดยสร้าง Twitter-clone ที่สมบูรณ์

วันที่ 5 นำ React/Redux แอพขึ้น production และการทำ Unit Test

  • การ deploy ขึ้น production
  • เจาะลึกการตั้งค่า webpack แบบ advance สำหรับ production (uglify, minify, devtool, code splitting, common chunk, caching, etc.)
  • การทำ Server side rendering เพื่อ SEO
  • ทำ Unit Test ส่วน component, action, reducer ด้วย Mocha, Chai, SInon, Enzyme 
  • การใช้ Storybook เพื่อทำ Live document ของส่วน UI
  • แจกลายแทงสำหรับไปศึกษาหัวข้ออื่นๆต่อ

หมายเหตุ เนื้อหาอาจมีการปรับเปลี่ยนตามความเหมาะสมกับกลุ่มผู้เรียนในแต่ละคลาส


ความรู้ที่ต้องมีก่อนเรียน*

  • เขียนภาษา HTML และ JavaScript ได้
  • เข้าใจ CSS เบื้องต้น (อ่านโค้ดแล้วเข้าใจ ไม่จำเป็นต้องทำเองได้สวย)
  • เข้าใจ OOP เบื้องต้น (เข้าใจ inheritance, class method vs instance method)
  • ใช้ git เบื้องต้นได้ (git clone, git add, git commit, git push)

* ถ้าข้อไหนไม่เป็นให้ปรึกษาผู้สอนก่อนเริ่มเรียน 


สิ่งที่ต้องเตรียมมา

  • Notebook
  • Favorite Text editor 
  • Node.js version > 6.4
  • Git

วัน-เวลา สถานที่

7 พ.ย. - 11 พ.ย. 59 (5 วัน)  9:30 - 18:00

ชั้น 37 อาคารพญาไทพลาซ่า ติด BTS/Airport link พญาไท
(โปรดนำคอมพิวเตอร์ส่วนบุคคลมาเอง)

ราคา

13,000 บาท จำนวน 10 ที่นั่ง

D30e0398e336b5e5b1840d4320d4a20db825865f
Organized by
CodeSheep