เกี่ยวกับคอร์ส
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)
* ถ้าข้อไหนไม่เป็นให้ปรึกษาผู้สอนก่อนเริ่มเรียน