Mô tả

You should take this course if you want to learn about React Hooks in a time-efficient and thorough way.


What are React Hooks?

React hooks are the largest update to React since its inception.

Hooks are a way for function components to “hook” into React functionality. Previously, when you wanted React components to have state or side effects, you needed to extend the base React Component class. Now, function components need only to apply a hook to gain this functionality.


Should I care about hooks?

As a web and React developer, and software engineer, you should definitely care about React hooks. This feature is the future of React. Since the feature is still so new, learning React hooks will set you apart as a web developer and engineer.


*****

When I first started exploring hooks, I was pleasantly surprised at the simplicity of the API. I was expecting to need a huge mental shift. But as I continued to create new components with hooks, I started to see the power of the new paradigm. If anything, I find React even more elegant than I did before!


*****

In this course, you’ll learn what hooks are, how they work, and why they’re so exciting. Here’s the course journey:

  • Dive into React hooks right away. You’ll gain relevant experience as soon as the first section. Time is a precious resource. And I want to make sure you feel like you’re spending your time wisely with this course. So in a matter of minutes, you will be writing React hooks code by building an application.

  • Build an interesting React app to explore hooks. The first project of the course is an application called Home. Home can serve as the home page of your browser. It has a bunch of useful widgets like a custom search bar, a photo gallery, a list of the latest hacker news, and more. It has a variety of use cases that will cover the essentials of React hooks.

  • Understand coding hurdles with hooks. When learning hooks, like any new technology, it will require a little bit of a mental shift. There’s a few coding hurdles to get through, and this course will show the right way to approach those situations.

  • Learn how hooks work under the hood. It’s not necessary to deep dive into the React engine to code with hooks. But it’s extremely helpful to explore how React works underneath the surface layer. So this course is going to dig deeper and give you that under the hood perspective of React with hooks.

  • Explore interesting cases with JavaScript and hooks. Hooks have a simple API. You call them as functions. But their behavior may not always align with your expectations as a JavaScript developer. In this course, you’ll cover a handful of interesting cases that appear when you try to jive hooks with JavaScript functionality.

  • Look at the big picture and answer the question of why. Why were hooks introduced to React - an already well established framework? Throughout the course, you’ll get the answer in tidbits throughout various videos. In addition, there will be a section completely devoted to answering this more thoroughly.

  • Build a project to master hooks. The second project in the course is an app called Reaction. This multi-user application allows people to share messages and react to them with emojis. The intent of the project is to give you the chance to both master previous material, and learn more advanced concepts with out of the box hooks.

*****

[2023 Update]

Also, this course contains optional content in Nextjs, React 18, and In-Depth JavaScript. Continue your learning React journey beyond hooks, here in this course!

Nextjs and React 18 are the modern ways to make a React application. In this course, you will also build a production-level Nextjs and React 18 project. During the Nextjs and React 18 project section, you will:

  • Go more into depth with server and client components.

  • Learn Nextjs server actions.

  • Explore the React 18 useTransition hook.

  • Expand upon Nextjs fundamentals, and create a shared layout structure.

  • Create dynamic segments with Nextjs and learn generateStaticParams.

  • Explore React Suspense and React lazy.

  • Dive deeper into advanced Nextjs hooks like useSelectedLayoutSegments, and useSearchParams.

  • Explore the React 18 useDeferredValue hook.

  • Learn how to deploy a Nextjs application.

Then follow with a bounty of In-Depth JavaScript content. During the In-Depth JavaScript section, you will find videos on:

* The Console, Operators, and Variables, Arrays, Objects.

* Functions - Declarations vs. Expressions, and Arrow Functions

* Methods and the `this` Keyword

* Callbacks

* A Dynamic Language and Types - "Almost Everything is an Object"

* Equality and Type Coercion

* Let, Const, Mutability, Var, and Scope

* Interview Question | Scope and Hoisting

* Template Literals and Ternary Operators

* The Property Shorthand and Destructuring Assignment

* JSON parse, JSON stringify, Custom and Lodash CloneDeep

* Closures

* Function Factories, and Higher Order Functions

* Prototypes and the Prototype-Based Inheritance, Object Prototype, __proto__, and the prototype chain

* Asynchronous Code with SetTimeout

* Fetch and Promise from Scratch

* JavaScript Engine and Runtime

* Await and Async


*****

In summary, you should take this course if you want to learn React Hooks in a time-efficient way, while building relevant and engaging projects.  Again, even if you only complete the preview content, you’ll walk away with a lot of valuable lessons learned.

See you there!


*****

Promo music provided by Ben Sound.

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

Updated for 2022-2023: Learn how to code with React JS and React Hooks from an engineer with 5+ years of industry experience.

How to code with React hooks: useState, useEffect, useReducer, useContext, and more.

An understanding of why React hooks were introduced.

A knowledge of how React hooks works under the hood at the React engine and runtime layer.

A grasp of how React hooks fits the mental model of React better than other patterns.

How to set up data fetching with the React hooks pattern.

How to build complete React applications using hooks.

Yêu cầu

  • Some experience with React will help. This course dives into React hooks right away, and might feel fast-paced for newcomers to React.
  • Familiarity with JavaScript.
  • Command line experience.

Nội dung khoá học

10 sections

Introduction

4 lectures
What You’ll Get From this Course
04:57
React Core Concepts Review
03:08
Required: Software Installations and Course Repo
00:50
Optional For Windows: Install Windows Subsystem for Linux and VSCode
08:40

Project One - Dive into Hooks Development

8 lectures
Project One Preview
02:00
Set Up Project One | Revised
06:55
First Hook: UseState | Revised
15:28
UseEffect
13:56
Challenge and Code: Stories Component with UseEffect | Revised
11:15
Build a Custom Hook: useFetch
14:04
[Optional] Function Keyword vs Arrow Functions
08:15
Section Summary and Section Code
00:55

Hooks Under the Hood

8 lectures
Section Preview - Hooks Under the Hood
00:47
The React Runtime and How React Applies Hooks
11:08
UseState Under the Hood
07:19
Tasks Component Part 1: Multiple useState hooks
11:36
Tasks Component Part 2
08:58
The Order of UseState
06:23
Local Storage for Tasks
08:18
Section Summary and Section Code
00:41

Project One Continued - Learn More React Hooks

6 lectures
Hooks with an Interval
12:15
Effects with Cleanup
06:17
Dynamic Delay and Increment
11:23
Challenge and Code: Matrix Component
11:54
Build a Custom Hook: useDynamicTransition
07:30
Section Summary and Section Code
01:34

Reflection on Hooks - the Why

1 lectures
The Why of Hooks
05:26

Project Two - Master Hooks Development

18 lectures
Project Two Preview
02:43
The Reducer Pattern Overview
03:24
Set Up Reaction App
04:34
Reactions Reducer State
10:51
UseReducer for Tasks | Part 1
10:24
UseReducer for Tasks | Part 2
09:59
PublishMessage Component
07:31
Challenge and Code: MessageBoard Component
03:56
UseContext and a Custom Context Hook
08:20
The PubSub and Reducer Architecture
03:54
Explore PubNub
10:31
PubSub Function and Reducer Connection
09:14
Set Username
09:08
CreateReaction Component
03:59
Reactions Reducer flow
08:09
Publish Reactions
05:31
MessageReactions Component
06:14
Section Summary and Section Code
00:59

Next.js and React 18 Project | React 18 useTransition and useDeferredValue hooks

17 lectures
React Fundamentals and Client vs. Server Components In Depth
07:32
Start the Next.js and React Project
08:41
Link to Pages with Next/Link | Grid Item
17:14
Style with Tailwind CSS
21:35
Next.js Fonts and Responsive Design
14:43
Connect Page Setup
11:03
Next.js Client Components
19:53
Next.js Server Actions (get-followers)
14:39
Mailjet API post-contact Server Action and Next.js Environment Variables
16:00
React 18 useTransition and Create Contact Form
24:49
Next.js Layout Structure, Loading.js, and Global Components
09:43
Next.js Dynamic Segments and generateStaticParams | record/[id]
18:02
Next.js generateMetadata | record/[id]/page.js
06:06
React Suspense and React lazy | Embed
19:54
Next.js not-found and Route Groups
13:56
Nested Dynamic Segments | record/[id]/[content]
14:05
Breadcrumbs Component and Next.js useSelectedLayoutSegments | nav-title
24:41

Optional Reference Content: Mega JavaScript Overview

2 lectures
Optional Mega JavaScript Overview Part 1
15:37
Optional Mega JavaScript Overview Part 2
09:45

Optional In-Depth JavaScript

49 lectures
The Console, Operators, and Variables
04:34
Booleans and Conditionals
11:55
Syntax - Semicolons and Comments
05:40
Undefined and Primitives
03:21
Arrays
06:53
Objects
04:26
Loops and Iteration
09:02
Functions - Declarations vs. Expressions
10:04
Arrow Functions
06:46
Methods and the `this` Keyword
06:08
More on `this` and Function Expressions vs. Arrow functions
05:40
Interview Question | The `this` Keyword
13:43
Callbacks
08:35
Interview Question | Callbacks
07:46
A Dynamic Language and Types
05:42
Almost Everything is an Object
04:18
Equality and Type Coercion
08:29
Truthy and Falsy
09:49
Null vs. Undefined
04:38
Explicit Type Conversion
03:58
Interview Question | JavaScript Types
16:53
Let, Const, and Mutability
05:56
Let, Const, Var, and Scope
10:09
Var and Function Hoisting
07:31
Interview Question | Scope and Hoisting
07:17
Template Literals and Ternary Operators
08:47
The Property Shorthand and Destructuring Assignment
10:10
Object methods
07:16
Spread Syntax
05:22
Object.is, References, and Shallow Clone
12:13
JSON.parse, JSON.stringify, and an Attempt at Deep Cloning
11:24
Custom and Lodash CloneDeep
17:18
Interview Question | Cloning an Object
12:10
Closures
09:10
Function Factories
05:35
Higher Order Functions
06:25
Interview Question | Closures, Higher-Order Functions, and Callbacks
12:47
Object-Oriented Programming
04:27
Constructor functions
10:08
Classes
06:03
Prototypes and the Prototype-Based Inheritance
10:27
Object Prototype, .__proto__, and the prototype chain
07:26
Interview Question | Prototype-Based Inheritance
13:29
Asynchronous Code with SetTimeout
06:29
Fetch and Promise
07:20
Promise from Scratch
05:35
JavaScript Engine and Runtime
14:56
Await and Async
05:34
Interview Question | Asynchronous JavaScript
04:54

Conclusion

2 lectures
Congratulations and Final Remarks
00:49
Bonus Content!
00:31

Đá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?

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.