Khóa học: Học lập trình React js và Redux qua bài tập thực hành

Học lập trình React js và Redux qua bài tập thực hành

Thể loại: Công nghệ thông tin

Số bài học: 89

Thời lượng video:

Cấp độ: Chưa xếp hạng

Sở hữu khóa học trọn đời Có

Cấp chứng nhận hoàn thành Có

0 VNĐ

Học lập trình React js và Redux qua bài tập thực hành

Lợi ích từ khóa học

Với khoá học này bạn sẽ:

- Nắm được kiến thức bài bản từ đầu về thư viện Javascript nổi tiếng phát triển bởi facebook React JS.

- Nắm được logic hoạt động, các khái niệm, cách thao tác, lập trình chức năng và cách kết hợp Redux và React JS.

- Học từ đầu về cách thao tác với cơ sở dữ liệu PostgreSQL.

- Hiểu cách xử lý Router trong lập trình React JS.

- Học cách tích hợp React JS với LocalStorage.

- Học cách tích hợp React JS với Firebase.

- Lập trình Node JS với cơ sở dữ liệu PostgreSQL.

- Đưa bạn từng bước đi từ chưa biết gì cho đến lúc bạn có thể tự tin apply vào các công ty lập trình React.

- Khóa học sẽ giúp bạn có thể thiết kế những trang web dựa trên nền tảng React một cách chuyên nghiệp nhất.

- Hoàn tất khóa học, bạn có thể apply vào các công ty lập trình Web có yêu cầu React với "Profile cá nhân của bạn có React JS là Headhunt sẽ gọi tới bạn liên tục"!

- Khóa học sẽ giúp bạn lập trình Node JS với vai trò API, và React JS với vai trò frontend thông qua một ứng dụng fullstack Javascript.

Đối tượng mục tiêu

React cực kì thân thiện đối với bạn nào đã từng học qua JavaScript, CSS hoặc HTML.

Sinh viên học lập trình web, muốn tối ưu tốc độ xử lý của website.

Những người muốn tiếp cận công nghệ lập trình web bằng React JS nhanh nhất qua bài thực hành.

Người muốn tìm hiểu về lập trình frontend bằng React JS một cách bài bản nhưng chưa biết bắt đầu từ đâu.

Các lập trình viên frontend đang sử dụng các framework khác, nay muốn nâng cao tay nghề thông qua việc học ReactJS.

Các lập trình viên backend, mobile muốn chuyển sang phát triển các ứng dụng frontend trong thời gian ngắn nhất.

Các lập trình viên đang băn khoăn, muốn lựa chọn một framework tốt cho phát triển ứng dụng frontend.

Tổng quát

Giới thiệu vể React JS - thư viện javascript phát triển bởi Facebook.
- Sức mạnh khủng khiếp mà Facebook mang đến trong React, đó chính là mô hình DOM, làm tăng khả năng trình diễn các đối tượng trên nền web một cách hiệu quả & tốc độ mượt hơn bất kì Java Script Framework nào trước đây.
- Mục đích mà Facebook nhắm đến trong React là "Learn Once, Write Anywhere" - Có nghĩa là sau khi hoàn tất khóa học React JS, ngoài việc bạn thiết kế được layout web, bạn còn sẽ có nền tảng vững chắc để tiếp cận React Native (Mobile App) mà không cần phải mất nhiều thời gian.

Yêu cầu của khóa học

Máy tính cấu hình bình thường. Khuyến cáo Ram từ 4G trở lên.

Giới thiệu - cài đặt - và chạy chương trình React JS đầu tiên

Giới thiệu React JS

13:41 phút

Cài đặt công cụ

13:36 phút

Chạy app react js đầu tiên

9:32 phút

Khái niệm và 4 cách định nghĩa component trong React JS

Khái niệm component

5:07 phút

Định nghĩa component cách số 1

5:23 phút

Định nghĩa component bằng Anonymous function và Arrow Function

5:06 phút

Định nghĩa component bằng Class

5:06 phút

Khái niệm và cách truyền thông tin qua Props trong Component

Khái niệm props trong component

10:35 phút

Phương pháp số 2 thao tác với props trong component

7:01 phút

Thực hành JSX và hàm 'Map' thông dụng

Cách viết JSX

7:23 phút

Cách sử dụng hàm map trong react js

7:13 phút

Thực hành kiến thức Component qua bài tập chuyển đổi giao diện từ bootstrap 4 sa

Thực hành 'component hoá' giao diện HTML bằng React JS

5:21 phút

Sử dụng Public_URL

5:02 phút

Sử dụng phím tắt cho việc tạo component

10:02 phút

Hoàn thiện phần giao diện từ bootstrap sang React js

12:08 phút

Hai cách viết tương tác trong React JS

Cách viết tương tác với hàm không có tham số trong React

10:31 phút

Cách viết tổng quát tương tác trong React js

5:30 phút

Khái niệm State - thao tác với state

Hiểu về State trong React js

7:46 phút

Thực hành với State trong React JS - Thay đổi State

7:03 phút

Học về LifeCycle của React Component

LifeCycle trong React JS

7:36 phút

Sử dụng thuộc tính Ref trong JSX

5:19 phút

Sử dụng LifeCycle cơ bản với Mounting

7:51 phút

Sử dụng 4 hàm trong LifeCycle updation

8:14 phút

Sử dụng các hàm Update cho Props trong LifeCycle phần 1

7:37 phút

Sử dụng các hàm Update cho Props trong LifeCycle - phần 2

11:25 phút

Học về React Router và thực hành tạo giao diện

Giới thiệu React Router

8:05 phút

Tạo giao diện trang chủ

11:21 phút

Tạo giao diện chức năng tin tức

12:30 phút

Tạo giao diện trang liên hệ

7:36 phút

Chuyển đổi từ giao diện thành React Component

Tạo component Home, Footer, Nav

12:59 phút

Chuyển 4 trang HTML thành 6 Component React js

14:13 phút

Tích hợp React Router để thao tác không cần load lại trang

Cài đặt React Router và sử dụng điều hướng cơ bản

11:19 phút

Xử lý điều hướng bằng Router không cần load lại trang

9:27 phút

Đặt trạng thái cho thanh điều hướng như Gmail bằng

4:48 phút

Tạo dữ liệu và load dữ liệu Json trong React JS

Tạo file dữ liệu Json chuẩn bị cho xử lý URL

11:15 phút

Load dữ liệu và tạo NewsItem

6:56 phút

Ánh xạ dữ liệu vào Component và tạo đường dẫn SEO

Mapping dữ liệu vào component

11:44 phút

Tạo đường dẫn thân thiện với SEO trong React JS

11:03 phút

Cách truyền tham số thông qua URL và nhận dữ liệu từ tham số

Cách nhận tham số truyền vào thông qua URL Parameter

5:15 phút

Cách phun dữ liệu ra giao diện dựa trên tham số truyền vào từ URL

15:34 phút

Hoàn thiện chức năng tin liên quan cho demo

Xử lý phần NewsRelated component

14:35 phút

Hoàn thiện phần tin liên quan

3:16 phút

Cách gửi nhận dữ liệu bằng Form trong React JS

Bắt đầu xử lý form gửi nhận dữ liệu với Redirect

10:31 phút

Cách nhận dữ liệu dưới dạng mảng trong react js form--loi

12:51 phút

Tối ưu hóa code React JS

7:53 phút

Xử lý phần thẻ select trong React form

5:15 phút

Xử lý phần nhận thông tin file trong React form

7:15 phút

Project thiết kế backend với dữ liệu LocalStorage

Giới thiệu Project làm giao diện backend quản lý User bằng React js

4:55 phút

Download giao diện Bootstrap Admin

7:17 phút

Thiết kế UX và cắt HTML CSS

Thiết kế giao diện UX demo chức năng trước khi code

19:32 phút

Code HTML phần giao diện quản lý theo thiết kế phác thảo

12:39 phút

Hoàn thiện giao diện quản lý demo trực tiếp trên Chrome

12:48 phút

Tạo Project React và chuyển đổi từ giao diện HTML sang React

Tạo project

5:49 phút

Chuyển đổi giao diện thành 4 component

10:31 phút

Thanh lọc các warning cho project

2:29 phút

Xử lý các tương tác cơ bản

Xử lý các tương tác cơ bản trên Frontend bằng React Js

7:38 phút

Xử lý hiển thị Form thông báo ứng với trường hợp chung

6:52 phút

Thực hành kết nối các component cha con và component ngang cấp

Cách kết nối từ component con sang component bố trong React Js

11:48 phút

Cách kết nối giữa hai component ngang cấp

8:18 phút

Hoàn thiện phần thực hành thao tác giữa các component

3:59 phút

Tạo dữ liệu cho project và đẩy dữ liệu ra giao diện

Tạo dữ liệu cho project và in test

8:10 phút

Đẩy dữ liệu ra bảng sử dụng Map

15:21 phút

Logic các bước làm và cách lập trình chức năng tìm kiếm

Tự động co dãn giao diện sử dụng col

2:56 phút

Kết nối component bố và con thông qua props

10:11 phút

Lấy text tìm kiếm trong Search Component đẩy về App Component

7:57 phút

Quá trình tìm dữ liệu sử dụng indexOf

12:10 phút

Đẩy kết quả tìm kiếm về giao diện

4:39 phút

Lập trình chức năng thêm mới thành viên bằng React JS

Logic các bước thực hiện chức năng thêm mới thành viên

2:51 phút

Đẩy dữ liệu vào state

7:05 phút

Lấy nội dung gửi lên App và đóng gói đối tượng

8:08 phút

Cập nhật thông tin thành viên mới vào dữ liệu Json

4:42 phút

Hoàn thiện chức năng thêm mới bằng cách tự sinh ID khi tạo mới dữ liệu

Xoá trắng nội dung sau khi thêm mới

3:26 phút

Tự tạo id không trùng lặp bằng UUID

4:25 phút

Phân tích logic thực hiện chức năng sửa thông tin

Chức năng sửa thông tin thành viên

4:33 phút

Kết nối component để truyền dữ liệu

5:49 phút

Truyền thông tin user cần sửa từ tableDataRow lên App

6:18 phút

Tạo Form sửa dữ liệu và load nội dung khi được kích hoạt

Tạo form sửa thông tin của người dùng

10:03 phút

Tạo hàm thay đổi trạng thái hiển thị của form

8:03 phút

Load nội dung cần sửa vào form

7:22 phút

Hoàn thiện chức năng sửa thông tin thành viên

Sử dụng state lưu trữ thông tin trong quá trình sửa thông tin

8:28 phút

Chuyển dữ liệu đã sửa lên Component App

12:35 phút

Hoàn thiện chức năng sửa dữ liệu

3:00 phút

Lập trình chức năng xóa thông tin thành viên

Gửi dữ liệu xoá lên component cha

7:52 phút

Xoá thông tin người dùng sử dụng hàm filter trong ES2015

8:09 phút

Dữ liệu hóa ứng dụng với LocalStorage

Bộ 3 hàm thao tác với localStorage - set - get - remove

6:53 phút

Lưu trữ dữ liệu vào localStorage và hoàn thiện ứng dụng

15:03 phút

Cách đóng gói ứng dụng và chạy ứng dụng trên Xamp server

Đóng gói ứng dụng chạy trên server với npm run build

4:06 phút

Cách chạy ứng dụng react app trên Xamp

10:19 phút

Cách chạy React App bằng cách sử dụng dòng lệnh

2:46 phút

Từng bước xây dựng ứng dụng website với ASP.NET MVC

0 VNĐ Xem ngay

Cuối tuần học iOS 10 qua 25 kỹ thuật cơ bản

0 VNĐ Xem ngay

Hướng dẫn sử dụng phần mềm CorelDRAW

0 VNĐ Xem ngay

Lập trình Backend cơ bản với Node JS & MongoDB, Mongoose, ...

0 VNĐ Xem ngay

Học lập trình React js và Redux qua bài tập thực hành

Thể loại: Công nghệ thông tin

Số bài học: 89

Thời lượng video:

Cấp độ: Chưa xếp hạng

Sở hữu khóa học trọn đời Có

Cấp chứng nhận hoàn thành Có

0 VNĐ