Courses Tutorials Livestreams Pricing

React Hooks
Handbook
50 SECTIONS - 5 HOURS OF VIDEO

ADD TO FAVORITES NOTIFY ME

An exhaustive catalog of React tutorials

covering hooks, styling and some more
advanced topics

TAUGHT BY STEPHANIE DIEP

UPGRADE NOW
Contains 50 sections

Purchase includes access to 50+ courses,

320+ premium tutorials, 300+ 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.

Intro to React 3:39 Create your first 4:23 React 2:54

1 Hooks
2 React app
3 Component
An overview of React Hooks Create your first React Create your first JSX
and the frameworks you ca… project from the Terminal… component using React

Styling in React 5:06 Styles and 2:22 Understanding 3:21

4 5 Props
6 Hooks
How to style your React
components using inline… Render different styles Learn about the basics of
depending on different… React Hooks, which…

useState Hook 2:54 useEffect Hook 3:41 useRef Hook 3:00

7 8 9
Use the useState hook to Manage with your Learn about the useRef
 Use the useState hook to Manage with your Learn about the useRef
manage local state in your… component's lifecycle with… hook, which replaces the…

Props 3:11 Conditional 4:21 Load Local Data 4:04

10 11 Rendering
12
Learn about props in React Load local JSON data into
to pass data from parent to… Render different UIs your React application
depending on different…

Fetch Data from 5:40 Toggle a state 4:05 useInput Hook 6:04
13 an API
14 15
Learn how to toggle a state Create a hook to get the
Learn the basics of from true to false and back… value and the onChange…
asynchronous functions an…

Gatsby and 6:44 NextJS and 5:24 React 8:19

16 React
17 React
18 TypeScript Par…
Create a static content- Create your first NextJS Learn how to create a React
oriented website using Rea… React application TypeScript application usin…

React 7:35 useScrollPositio 4:26 useOnScreen 8:08

19 TypeScript Par…
20 n Hook
21 hook
Learn the basics of Create a custom hook to Create a custom hook to
TypeScript and how to use… listen to the current windo… listen to when an element i…

useContext 8:32 Fragments 2:43 Lazy Loading 4:05

22 Hook
23 24
Group multiple children Lazy Load heavy
Manage global states together with React… components to improve…
throughout the entire…

React Suspense 3:13 Environment 4:43 Reach Router 5:31

25 26 Variables
27
Wait for data with React Create a multiple-pages
Suspense and React.lazy Make environment variables React application with Rea…
secret with a .env file

URL Params 4:04 SEO and 6:47 Favicon 3:03

28 29 Metadata
30
Create unique URL with URL Add an icon to a React
Params Optimize a React application website
for search engines with…

Dynamic 2:14 PropTypes 3:54 Custom 3:58

31 32 33 PropTypes
Favicon Implement props type-
Change the favicon's fill checking with PropTypes Create a custom PropType
using a validator function
color depending on the…

useMemo Hook 4:05 forwardRef 3:28 Handling Events 5:44

34 35 Hook
36
Prevent unnecessary re- How to handle events in
renders when the… Forward a ref to a child React
component

Spread 3:35 useMousePositi 4:55 useReducer with 7:33

37 attributes
38 on Hook
39 useContext Pa…
Learn how to make use of Detect the user's mouse Create a reducer to be used
the spread operator position on a bound element in a context

useReducer with 6:48 useReducer with 5:43 Netlify 5:08

40 useContext Pa…
41 useContext Pa…
42
Deploy to production using
Incorporate useReducer with Connect the context and Netlify
useContext reducer with the frontend

Gatsby Cloud 6:19 Gatsby Plugin 8:11 useOnClickOutsi 6:32

43 44 Image
45 de Hook
Deploy to production using
Gatsby Cloud Use gatsby-plugin-image for Toggle a modal visibility with
automatic image resizing,… a useOnClickOutside hook
 automatic image resizing,… a useOnClickOutside hook

useWindowSize 4:14 usePageBottom 4:48 useLocalStorag 5:27

46 Hook
47 hook
48 e Hook
Create a hook to determine Detect if the user scrolled to Store an item in a browser's
the width and height of the… the bottom of the page local storage

Three.js in React 17:33 Three.js in React 11:18

49 Part 1
50 Part 2
Bring your website to life Bring your website to life
with beautiful 3D objects with beautiful 3D objects

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
Videos

Download source files ePub

Download the videos and assets to refer and learn

offline without interuption. Assets

Subtitles
Design template

Source code for all sections

Video files, ePub and subtitles

What's included? SOURCE FILES

Design templates and source
All courses come with downloadable files to help code files are included to help
you design, code and follow the course offline. you learn.

300+ hours of video

EPUB FILES
Subtitles in English, Chinese Read offline using Books for iOS,
Mac or other apps that can read
 this format.
Source files, ePub

UI, icons, illustrations

VIDEO FILES
Download the videos so that you
Premium, support chat can watch later or offline using
any video player.

Meet the instructor

We all try to be consistent with our way of teaching
step-by-step, providing source files and prioritizing
design in our courses.

7 COURSES - 36 HOURS

Build Quick Apps with 11 hrs

SwiftUI
Apply your Swift and SwiftUI
knowledge by building real,…

Stephanie Diep Advanced React 3 hrs

Hooks Handbook
IOS AND WEB DEVELOPER
An extensive series of tutorials
Developing web and mobile
covering advanced topics…
applications while learning ne…

SwiftUI Concurrency 3 hrs

Concurrency, swipe actions,
search feature,…
 CREATE A PROFILE
UI DESIGN
Certificate SWIFTUI
Certificate FIGMA Get
certificates
FLUTTER
Certificate
Certificate

After passing a test, we’ll

award you with an online
certificate. You can add
them to your profile after
completing the courses.

View profile

STORIES

How students learned

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

Jiani Li Haawa
Artem Adams
UI/UX iOS
Designer/Developer Developer Artchitect at IBM

Learned a lot from your

course to port my app from
#AppleWatch to #iPhone,
#iPad and #Mac. All SwiftUI,
one code base, iCloud, learn
words with Widgets.

VIEW ON THE APP

STORE

Bucket is now live in Hey MengTo, I

@AppAirport! Thanks to launched my Christiano
@designcodeio by @MengTo, I iOS/watchOS app
was able to learn #SwiftUI and RunnerGoal almost Mere
completely built with
Designer
built the app in 2 months. SwiftUI. Thank you for
the design lessons and
My studies of swiftUI with a
 many controls and My studies of swiftUI with a
VIEW ON THE APP animation that I used little help and inspirations of
STORE from you SwiftUI @designcodeio and
course. Man bowing @MengTo. Thanks for the
deeply. today's live. Illustrations by
@FireartStudio

VIEW ON THE
APP STORE

TRUSTED BY TEAMS

120,000 people
Kenny Chen Felipe Elioenay
Many startups look for designers who code
UX DESIGNER AT INDEPENDENT
GOOGLE DESIGNER and developers who design. They use our
courses to help train new hires and expand skill
I found and bought So far the best
Design+Code by "online course" I've sets.
Meng To which ever purchased. It's
takes you through like a modern
each step of the degree in Digital More stories
process from Design. Can't
design to code to believe I'm finishing
app store my first React App
submission. :D

Home Downloads
 Site made with React, Gatsby,
Courses Search Netlify and Contentful. Learn how.

Design+Code © 2025
Tutorials Account
Terms of Service - Privacy Policy

Pricing Licenses Need help? Contact Us

Updates UI Kit