Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Mobile Development
React Hooks
Learn React Hooks in a Better Way

Learn React Hooks in a Better Way

Loại khoá học: Mobile Development

Master react hooks API and build a real world chat app using react hooks API

image
50.000 VND
429.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

You’re here because you know HTML+CSS+JavaScript+React and you want to move forward and learn react hooks API and use it in a real-world application.


I am here because I can help you accomplish your mission. I have B.s.c + M.s.c in mechanical engineering . I have been doing software applications for more than 20 years in the Hi-Tec industry and I have a lot of teaching experience. You can trust me and my teaching methods. I had learned many many technologies in the past (check my LinkedIn profile) and I know exactly what is needed to learn and how.



In this 7 hours course I teach in a better way than other courses :

Most courses in UDEMY explain using one big application - this is not the optimal way to learn.

The optimal way to learn according to my long time experience is the following :

1. learn the main concepts using very small sample code and practice using small exercises

2. use the concepts learned and practiced in a real-world application


That's the way I am teaching in this course


And most courses in UDEMY do not have quiz\assignment after each lesson - so how can you check that you understand what the lesson is about?

In this course you will have quiz\assignment after almost all lessons - so you can check that you understand the lesson


The course covers the following concepts :

  • useState

  • useEffect

  • hooks rules

  • useRef

  • useContext

  • custom hooks

  • useMemo

  • useCallback



    We will build a real-world chat app using react hooks, firebase and semantic ui react. State management in this app is implemented using useState + useContext. This chat app includes: chat messages,  chat rooms, authentication, form validation, attractive UI and much more




Bạn sẽ học được gì

Master React Hooks API

Build real world chat app

Use context for state management

Use firebase as chat server

Use semantic ui react for UI

Yêu cầu

  • Basic knowledge in HTML , CSS, JavaScript , React , ES6, ES7
  • IDE - VS code is recommended
  • Computer and internet

Nội dung khoá học

15 sections

Introduction

5 lectures
What is react hooks ?
01:45
Why use react hooks ?
01:49
Hello hooks problem
06:15
Hello hooks solution
03:42
Render your name , click on it will change color
1 question

UseState

6 lectures
Project setup
05:27
Project setup
2 questions
useState with two states
05:56
Toggle text color
1 question
useState with an object
05:58
User login form
1 question

useEffect

16 lectures
Fetch posts sample and problem
07:40
Fetch posts sample and problem
2 questions
useEffect(callback,[]) to solve fetch posts problem
02:47
useEffect(callback ,[]) in fetch posts
2 questions
Class component to set clicks on document title
06:44
Class component problematics
3 questions
useEffect(callback) to set clicks on document title
06:05
useEffect(callback) to set clicks on document title
2 questions
Fetch comments and albums sample and problem
12:41
useEffect in fetch comments and albums sample
2 questions
useEffect(callback,[resource]) to to fetch comments and albums - solution
03:52
useEffect(callback,[resource]) to to fetch comments and albums
2 questions
clock sample with a problem
06:53
clock sample with a problem
2 questions
useEffect(callback) and return to fix clock problem
05:36
useEffect(callback) and return to fix clock problem
2 questions

Hooks rules

4 lectures
Hooks rules problem
10:52
Hooks rules part 1
2 questions
Hooks rules solution
03:16
Hooks rules part 2
2 questions

useContext

4 lectures
Set language sample setup
04:58
Context
2 questions
useContext to share language state
07:52
Share user state
1 question

useRef

5 lectures
Set Interval setup sample and problem
04:45
Ref part 1
2 questions
useRef for Set Interval solution
05:23
Ref part 2
2 questions
User login form with ref
1 question

useReducer

3 lectures
Increment decrements counter setup sample
03:10
useReducer for Increment decrements counter
05:46
useReducer to fix setInterval problem
1 question

custom hooks

3 lectures
Setup sample with state based code duplication
10:37
Custom hook to reuse common state based code
06:35
useEmailLocalStorage
1 question

useMemo and useCallback

8 lectures
Sample setup and useMemo motivation
05:10
Sample setup useMemo
2 questions
useMemo
02:46
useMemo
2 questions
Sample setup and useCallback motivation
06:39
Sample setup and useCallback motivation
2 questions
useCallback
02:15
useCallback
2 questions

Chat App part 1 - setup

13 lectures
Chat app promo
02:05
Project setup
03:20
Project setup
2 questions
Initial layout
06:27
Initial layout
2 questions
Add input element and hard code messages
02:27
Add input element and hard code messages
2 questions
Design decision - server
02:16
Design decision - server
2 questions
Firebase setup
05:11
Firebase setup
3 questions
Send message to firebase database
04:54
Send message to firebase database
2 questions

Chat App part 2 - basic functionality

10 lectures
Retrive messages from firebase database - state problem
10:00
Retrive messages from firebase database
4 questions
useRef to fix messages retrieve problem
02:36
Fix messages retrieve problem
2 questions
Refactor panels to sub components
11:56
Refactor panels to sub components
3 questions
Design decision - state management
12:02
Design decision - state management
2 questions
useContext+useState to consume user and current room context
07:01
useContext+useState to consume user and current room context
2 questions

Chat App part 3 - more rooms and messages functionality

16 lectures
Send message with all info
10:21
Send message with all info
2 questions
Message timestamp
04:42
Message timestamp
2 questions
Set current room
05:06
Set current room
2 questions
Handle room change
10:58
Handle room change
2 questions
Display user timestamp using moment package and display #users
08:13
Display user timestamp using moment package and display #users
2 questions
Add room to firebase database
05:52
Add room to firebase database
2 questions
Fetch rooms from firebase database
08:21
Fetch rooms from firebase database
3 questions
Handle choosing chat room for the first time
03:06
Handle choosing chat room for the first time
2 questions

Chat App part 4 - UI with Semantic UI React

11 lectures
Design decisions - ui and styling
01:59
Design decisions - ui and styling
2 questions
Backgrounds , headers and padding
02:39
Backgrounds , headers and padding
1 question
Style user with image
03:57
Style user with image
3 questions
Style messages and send button
06:26
Style messages and send button
2 questions
Add room modal and final styling
12:42
Add room modal and final styling
4 questions
Semantic ui react styling
1 question

Chat App part 5 - Authentication

17 lectures
Motivation
01:51
Motivation
2 questions
Routing
05:56
Routing
4 questions
Register user form - initial form and API
11:32
Register user form - initial form and API
3 questions
Register user form - final form and API
06:07
Register user form - final form and API
4 questions
Login user form
05:07
Login user form
2 questions
Handle onAuthStateChanged
03:34
Handle onAuthStateChanged
2 questions
Add UserMenu and add possibility to register
08:12
Add UserMenu and add possibility to register
4 questions
Errors and validation login form
11:00
Errors and validation login form
5 questions
Errors and validation in register component
1 question

Chat App part 6 - Misc

2 lectures
Rooms loader
04:14
Rooms loader
1 question

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

The Complete UML Course (2024): Learn to Design UML Diagrams

The Complete UML Course (2024): Learn to Design UML Diagrams

25 VND
50.000 VND
Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

1.699.000 VND
50.000 VND
Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

1.499.000 VND
50.000 VND
Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

99 VND
50.000 VND
Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

1.699.000 VND
50.000 VND
Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi