Design+Code logo

Quick links

No results found

Suggested search

React Hooks Handbook

50 sections - 5 hours of video

icon

Add to favorites

icon

Notify me

An exhaustive catalog of React tutorials covering hooks, styling and some more advanced topics

Instructor avatar

Taught by Stephanie Diep

Purchase includes access to 30+ courses, 240+ premium tutorials, 120+ hours of videos, source files and certificates.

50 topics

All techniques are explained step-by-step, in a beginner-friendly format so that you can easily follow in a cohesive way.

1

Intro to React Hooks

An overview of React Hooks and the frameworks you can use to build your React application blazingly fast

3:39

2

Create your first React app

Create your first React project from the Terminal and save it on your local computer

4:23

3

React Component

Create your first JSX component using React

2:54

4

Styling in React

How to style your React components using inline styling, separate stylesheets or styled-components

5:06

5

Styles and Props

Render different styles depending on different properties passed to your component

2:22

6

Understanding Hooks

Learn about the basics of React Hooks, which introduced at React Conf 2018

3:21

7

useState Hook

Use the useState hook to manage local state in your React component

2:54

8

useEffect Hook

Manage with your component's lifecycle with the useEffect hook

3:41

9

useRef Hook

Learn about the useRef hook, which replaces the JavaScript getElementById way

3:00

10

Props

Learn about props in React to pass data from parent to child components

3:11

11

Conditional Rendering

Render different UIs depending on different conditions and states

4:21

12

Load Local Data

Load local JSON data into your React application

4:04

13

Fetch Data from an API

Learn the basics of asynchronous functions and promises by fetching data from an API using fetch, useEffect and useState

5:40

14

Toggle a state

Learn how to toggle a state from true to false and back again

4:05

15

useInput Hook

Create a hook to get the value and the onChange event of input fields

6:04

16

Gatsby and React

Create a static content-oriented website using React on Gatsby

6:44

17

NextJS and React

Create your first NextJS React application

5:24

18

React TypeScript Part 1

Learn how to create a React TypeScript application using the Create React App, Gatsby and NextJS methods

8:19

19

React TypeScript Part 2

Learn the basics of TypeScript and how to use TypeScript in a React component

7:35

20

useScrollPosition Hook

Create a custom hook to listen to the current window position of the user

4:26

21

useOnScreen hook

Create a custom hook to listen to when an element is visible on screen

8:08

22

useContext Hook

Manage global states throughout the entire application

8:32

23

Fragments

Group multiple children together with React Fragments

2:43

24

Lazy Loading

Lazy Load heavy components to improve performance

4:05

25

React Suspense

Wait for data with React Suspense and React.lazy

3:13

26

Environment Variables

Make environment variables secret with a .env file

4:43

27

Reach Router

Create a multiple-pages React application with Reach Router

5:31

28

URL Params

Create unique URL with URL Params

4:04

29

SEO and Metadata

Optimize a React application for search engines with React Helmet

6:47

30

Favicon

Add an icon to a React website

3:03

31

Dynamic Favicon

Change the favicon's fill color depending on the user's system appearance

2:14

32

PropTypes

Implement props type-checking with PropTypes

3:54

33

Custom PropTypes

Create a custom PropType using a validator function

3:58

34

useMemo Hook

Prevent unnecessary re-renders when the component stays the same

4:05

35

forwardRef Hook

Forward a ref to a child component

3:28

36

Handling Events

How to handle events in React

5:44

37

Spread attributes

Learn how to make use of the spread operator

3:35

38

useMousePosition Hook

Detect the user's mouse position on a bound element

4:55

39

useReducer with useContext Part 1

Create a reducer to be used in a context

7:33

40

useReducer with useContext Part 2

Incorporate useReducer with useContext

6:48

41

useReducer with useContext Part 3

Connect the context and reducer with the frontend

5:43

42

Netlify

Deploy to production using Netlify

5:08

43

Gatsby Cloud

Deploy to production using Gatsby Cloud

6:19

44

Gatsby Plugin Image

Use gatsby-plugin-image for automatic image resizing, formatting, and higher performance

8:11

45

useOnClickOutside Hook

Toggle a modal visibility with a useOnClickOutside hook

6:32

46

useWindowSize Hook

Create a hook to determine the width and height of the window

4:14

47

usePageBottom hook

Detect if the user scrolled to the bottom of the page

4:48

48

useLocalStorage Hook

Store an item in a browser's local storage

5:27

49

Three.js in React Part 1

Bring your website to life with beautiful 3D objects

17:33

50

Three.js in React Part 2

Bring your website to life with beautiful 3D objects

11:18

Learn by doing

What you'll build

Redesign your existing app or start from scratch as you follow along and learn the techniques.

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Browse all downloads

What's included?

All courses come with downloadable files to help you design, code and follow the course offline.

120+ hours of video

120+ hours of video

Subtitles in English, Chinese

Subtitles in English, Chinese

Source files, ePub

Source files, ePub

UI, icons, illustrations

UI, icons, illustrations

Premium, support chat

Premium, support chat

Source files

Source files

Design templates and source code files are included to help you learn.

ePub files

ePub files

Read offline using Books for iOS, Mac or other apps that can read this format.

Video files

Video files

Download the videos so that you can watch later or offline using any video player.

Flutter

Certificate

Figma

Certificate

SwiftUI

Certificate

UI Design

Certificate

Create a profile

Get certificates

After passing a test, we’ll award you with an online certificate. You can add them to your profile after completing the courses.

Stories

How students learned from our courses

See what people have learned and built by taking courses from Design+Code

Jiani Li

UI/UX Designer/Developer

Author avatar

Jiani Li

UI/UX Designer/Developer

Bucket is now live in @AppAirport! Thanks to @designcodeio by @MengTo, I was able to learn #SwiftUI and built the app in 2 months.

Christiano Mere

Designer

Author avatar

Christiano Mere

Designer

My studies of swiftUI with a little help and inspirations of @designcodeio and @MengTo. Thanks for the today's live. Illustrations by @FireartStudio

Mogens Egeskov

iOS Developer

Author avatar

Mogens Egeskov

iOS Developer

After months of hard work i'm excited to share my new app "Read" which helps you reach your yearly book goal by telling you how many pages or percent to read daily. You can time your read.

Anthony Collurafici

Designer

Author avatar

Anthony Collurafici

Designer

Simple Ratio is Live! After years of designing apps, I can finally say I built my own. Big thanks to Meng To for getting me started with SwiftUI.

Cyril Zakka

iOS Developer

I don’t know if you remember but I bought your first book a little less than 4 years ago. You started me on my path to code and design. Now I do iOS development and have also moved on to AI and deep learning. So thank you for that!

Ben Hylak

UX Engineer at GoogleARVR

If you want to make something beautiful, this is where to start. This is not a programming course, and this is not just a design course. Meng removes that line all together and simply teaches the art of making. From keyboard shortcuts to color theory, this course leaves no stone unturned. Everything you learn here you will use immediately -- there is simply no other course like this.

Trusted by teams

100,000 people

Many startups look for designers who code and developers who design. They use our courses to help train new hires and expand skill sets.