ONLINECOURSE.HEADER

Mastering Web Development with React

เริ่มพัฒนาเว็บแอปพลิเคชันด้วย React อย่างถูกวิธี
2,990.00
บาท
3.9
4-6 ชั่วโมง
โปรเจคทำเกม Sudoku

SECTION_TITLE.OVERVIEW

สมัครเป็นแพ็กตั้งแต่ React พื้นฐานจนถึงการนำ React Hooks มาประยุกต์ใช้งานสามารถ ดูเพิ่มเติมได้ที่นี่

เริ่มต้นการพัฒนาเว็บอย่างถูกวิธีไปกับผู้เชี่ยวชาญในคอร์สออนไลน์ Mastering Web Development with React ตั้งแต่ระดับพื้นฐานอย่างการใช้ JSX, React Component และ Component Lifecycle ไปจนถึงการทดลองทำโปรเจกต์จริงด้วย React พร้อมลองใช้เครื่องมือและ library ที่สำคัญต่างๆ เช่น React Router, Styled Components และ Redux เพื่อให้สามารถนำ React ไปใช้ทำงานได้จริง

สอนโดย

คุณปัญจมพงศ์ เสริมสวัสดิ์ศรี (ปันเจ)

  • Google Developers Expert ด้าน Web Technologies
  • C-3PO (Product, Process, Programming) ที่ Cleverse
  • ทีมผู้จัดงาน React Bangkok Meetup
  • ประสบการณ์การเป็น Full-stack Developer กว่า 10 ปี

คอร์สออนไลน์นี้เหมาะสำหรับ

  • Software Engineer, Web Programmer, Web Developer ที่สนใจใช้ React ในการพัฒนาเว็บ
  • นักเรียน นักศึกษา ที่มีพื้นฐานการพัฒนาเว็บแอปพลิเคชัน

ความรู้ที่ต้องมี

  • พื้นฐาน JavaScript (ES6)
  • พื้นฐาน HTML / CSS

รายละเอียดเพิ่มเติม

ระหว่างเรียนคอร์สนี้ผู้เรียนจะได้ทำเกม Sudoku เพื่อให้ได้ประยุกต์ใช้ concept ที่เรียนมาและฝึกฝนการใช้ React ในการทำเว็บแอปพลิเคชันจริง

  • ผู้เรียนจะได้รับประกาศนียบัตร (Certificate of Completion) เมื่อเรียนจบคอร์ส
  • สามารถกลับมาเรียนทบทวนได้ ไม่มีหมดอายุ

สอบถามข้อมูลเพิ่มเติม

  • Facebook ของ Skooldio
  • สำหรับท่านที่ต้องการสมัครในนามบริษัท 5 ท่านขึ้นไป ติดต่อรับส่วนลด bulk discount ได้ที่ hello@skooldio.com

SECTION_TITLE.COURSE_OUTLINE

Intro

0:19

Main Concepts

1:16

JSX

2:32

React Element & Component

0:54

Virtual DOM

1:06

Recap

0:20

Setting Up Environment

Creating React App Using create-react-app

4:54

What We are Building

Introducing DevTools

Initializing Sudoku Board

1:40

Thinking in React

1:31

Creating <Cell />

4:35

Checkpoint 1

0:33

Event & State

4:41

Add More Props

2:41

Placing the State

2:20

Lifting State Up

6:37

Pre-filling State

2:32

Pre-filling State (Exercise)

Passing onChange into <Cell />

4:51

Completing the Game

5:04

Validation Function Explanation

Code Refactoring

0:58

Code Refactoring 1 - Separate Components

4:15

Code Refactoring 2 - Use Functional Component

3:23

Component Lifecycle

4:36

Component Lifecycle in Depth

Implementing Component Lifecycle

0:35

Adding Timer to Sudoku App

7:20

Checkpoint 2

0:19

Calling API in React

0:59

Calling API in Sudoku

10:27

Checkpoint 3

0:29

Recap

1:22

Additional Readings

Why Redux?

1:59

Digging Deep into Redux

1:13

Action Creator, Reducer, connect()

5:15

Creating Store & Provider

0:37

Recap

0:27

Why Styled Components?

1:36

Basic Example of Styled Components

0:46

How Does Styled Components Library Work?

0:26

Style Custom Component

0:57

Adding Props in Styled Components

1:00

Nesting and Using CSS

1:52

Recap

0:31

What is React Router?

1:21

Switch & Route

3:38

Route Props

3:49

Using withRouter()

3:53

Recap

0:30

Intro

0:50

Setting Up Directory Structure

1:02

Examples of Structure

2:40

Choosing the Best Structure for Your App

2:57

There is No Perfect Solution

0:54

Separating View and Logic

1:15

Higher-Order Components

4:47

Render Props

4:13

React Hooks

2:12

Recap

0:33

Congratulations!

0:49

Resources

SECTION_TITLE.INSTRUCTOR

ปัญจมพงศ์ เสริมสวัสดิ์ศรี (Google Developers Expert in Web Technologies) | Skooldio Instructor
ปัญจมพงศ์ เสริมสวัสดิ์ศรี
Google Developers Expert in Web Technologies
SECTION_TITLE.RELATED_ONLINE_COURSES