LEARN BY DOING

What you'll build

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

50 TOPICS

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

Create your first React app

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

React Component

Create your first JSX component using React

Styling in React

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

Styles and Props

Render different styles depending on different properties passed to your component

Understanding Hooks

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

useState Hook

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

useEffect Hook

Manage with your component's lifecycle with the useEffect hook

useRef Hook

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

Props

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

Conditional Rendering

Render different UIs depending on different conditions and states

Load Local Data

Load local JSON data into your React application

Fetch Data from an API

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

Toggle a state

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

useInput Hook

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

Gatsby and React

Create a static content-oriented website using React on Gatsby

NextJS and React

Create your first NextJS React application

React TypeScript Part 1

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

React TypeScript Part 2

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

useScrollPosition Hook

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

useOnScreen hook

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

useContext Hook

Manage global states throughout the entire application

Fragments

Group multiple children together with React Fragments

Lazy Loading

Lazy Load heavy components to improve performance

React Suspense

Wait for data with React Suspense and React.lazy

Environment Variables

Make environment variables secret with a .env file

Reach Router

Create a multiple-pages React application with Reach Router

URL Params

Create unique URL with URL Params

SEO and Metadata

Optimize a React application for search engines with React Helmet

Favicon

Add an icon to a React website

Dynamic Favicon

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

PropTypes

Implement props type-checking with PropTypes

Custom PropTypes

Create a custom PropType using a validator function

useMemo Hook

Prevent unnecessary re-renders when the component stays the same

forwardRef Hook

Forward a ref to a child component

Handling Events

How to handle events in React

Spread attributes

Learn how to make use of the spread operator

useMousePosition Hook

Detect the user's mouse position on a bound element

useReducer with useContext Part 1

Create a reducer to be used in a context

useReducer with useContext Part 2

Incorporate useReducer with useContext

useReducer with useContext Part 3

Connect the context and reducer with the frontend

Netlify

Deploy to production using Netlify

Gatsby Cloud

Deploy to production using Gatsby Cloud

Gatsby Plugin Image

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

useOnClickOutside Hook

Toggle a modal visibility with a useOnClickOutside hook

useWindowSize Hook

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

usePageBottom hook

Detect if the user scrolled to the bottom of the page

useLocalStorage Hook

Store an item in a browser's local storage

Three.js in React Part 1

Bring your website to life with beautiful 3D objects

TEMPLATES AND SOURCE CODE

Download source files

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

Design template

Source code for all sections

Video files, ePub and subtitles

What's included?

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

120+ hours of video

Subtitles in English, Chinese

Source files, ePub

UI, icons, illustrations

Premium, support chat