Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks

Full React Course 2020 – Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks



Learn the basics of React in this comprehensive course. You will learn about fundamentals, hooks, context API, react router, custom hooks, and more.

React is one of the most popular ways to build user interfaces using JavaScript.

🎥 React projects video:

✏️ Course from John Smilga of the Coding Addict channel. Check out his channel:

💻 Basic React Code:
💻 Advanced React:

⭐️ Course Contents ⭐️
⌨️ (00:00) Intro
⌨️ (01:09) About React
⌨️ (06:51) Goals
⌨️ (08:50) Structure
⌨️ (09:46) Course Requirements
⌨️ (11:45) Dev Environment Setup
⌨️ (16:26) Text Editor Setup
⌨️ (18:20) Command Line Basics
⌨️ (25:00) NPM Basics
⌨️ (35:07) Create-React-App
⌨️ (37:05) Install Create-React-App
⌨️ (43:19) Folder Structure
⌨️ (52:25) Clean Boilerplate
⌨️ (54:00) First Component
⌨️ (1:04:13) Text Editor Setup
⌨️ (1:12:29) First Component In Detail
⌨️ (1:19:18) JSX Rules
⌨️ (1:28:55) Nested Components And Tools
⌨️ (1:34:50) Mini Book Project
⌨️ (1:42:59) CSS Basics
⌨️ (1:54:41) JSX Css
⌨️ (2:01:31) JSX Javascript
⌨️ (2:09:30) Props
⌨️ (2:25:41) Props Destructuring
⌨️ (2:29:44) Props – Children
⌨️ (2:36:13) Simple List
⌨️ (2:45:12) Proper List
⌨️ (2:52:49) Key Prop And Spread Operator
⌨️ (2:58:52) Event Basics
⌨️ (3:11:12) Import And Export Statements
⌨️ (3:23:25) Free Hosting
⌨️ (3:28:22) Advanced Intro
⌨️ (3:30:42) Get Starter Project
⌨️ (3:31:35) Install Starter
⌨️ (3:33:43) Starter Overview
⌨️ (3:39:00) UseState – Simple Use Case
⌨️ (3:48:44) UseState – Basics
⌨️ (4:00:47) General Rules Of Hooks
⌨️ (4:03:39) UseState – Array Example
⌨️ (4:17:27) UseState – Object Example
⌨️ (4:23:00) UseState – Multiple State Values
⌨️ (4:26:17) Simple Counter
⌨️ (4:32:10) Functional Update Form
⌨️ (4:44:55) Matching Project
⌨️ (4:47:27) useEffect – Basics
⌨️ (4:57:47) useEffect – Conditional
⌨️ (5:01:40) useEffect – Dependency List
⌨️ (5:07:13) useEffect – Cleanup Function
⌨️ (5:19:24) useEffect – Fetch Data
⌨️ (5:31:29) Multiple Returns
⌨️ (5:37:09) Multiple Returns – Fetching Data
⌨️ (5:52:07) Short – Circuit Evaluation
⌨️ (6:02:50) Ternary Operator
⌨️ (6:11:30) Show/Hide Component
⌨️ (6:20:15) Form Basics
⌨️ (6:28:53) Controlled Inputs
⌨️ (6:38:09) Add Item To The List
⌨️ (6:50:32) Multiple Inputs
⌨️ (7:06:29) useRef
⌨️ (7:16:20) useReducer – UseState Setup
⌨️ (7:29:52) useReducer – Refactor
⌨️ (7:37:15) useReducer – Add Item
⌨️ (7:53:14) useReducer – Remove Item
⌨️ (8:00:56) Prop Drilling –
⌨️ (8:14:36) Context API / – useContext
⌨️ (8:26:22) Custom Hooks – useFetch
⌨️ (8:38:09) PropTypes – Setup
⌨️ (8:47:48) PropTypes – Images
⌨️ (8:55:48) PropTypes – Default Values
⌨️ (9:00:41) React Router Intro
⌨️ (9:05:52) React Router – Basic Setup
⌨️ (9:15:50) React Router – Error And Switch Component
⌨️ (9:18:51) React Router – Links
⌨️ (9:23:22) React Router – URL Params And Placeholder
⌨️ (9:37:51) React Optimization Warning
⌨️ (9:41:21) React.memo
⌨️ (9:49:50) useCallback
⌨️ (9:58:00) useMemo
⌨️ (10:04:15) useCallback – Fetch Example

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

24 thoughts on “Full React Course 2020 – Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks

  1. best react course ever i am saying it after viewing some courses
    discussed in so much detail
    thanks for giving us such free content

  2. ⭐ Course Contents ⭐

    ⌨ (00:00) Intro

    ⌨ (01:09) About React

    ⌨ (06:51) Goals

    ⌨ (08:50) Structure

    ⌨ (09:46) Course Requirements

    ⌨ (11:45) Dev Environment Setup

    ⌨ (16:26) Text Editor Setup

    ⌨ (18:20) Command Line Basics

    ⌨ (25:00) NPM Basics

    ⌨ (35:07) Create-React-App

    ⌨ (37:05) Install Create-React-App

    ⌨ (43:19) Folder Structure

    ⌨ (52:25) Clean Boilerplate

    ⌨ (54:00) First Component

    ⌨ (1:04:13) Text Editor Setup

    ⌨ (1:12:29) First Component In Detail

    ⌨ (1:19:18) JSX Rules

    ⌨ (1:28:55) Nested Components And Tools

    ⌨ (1:34:50) Mini Book Project

    ⌨ (1:42:59) CSS Basics

    ⌨ (1:54:41) JSX Css

    ⌨ (2:01:31) JSX Javascript

    ⌨ (2:09:30) Props

    ⌨ (2:25:41) Props Destructuring

    ⌨ (2:29:44) Props – Children

    ⌨ (2:36:13) Simple List

    ⌨ (2:45:12) Proper List

    ⌨ (2:52:49) Key Prop And Spread Operator

    ⌨ (2:58:52) Event Basics

    ⌨ (3:11:12) Import And Export Statements

    ⌨ (3:23:25) Free Hosting

    ⌨ (3:28:22) Advanced Intro

    ⌨ (3:30:42) Get Starter Project

    ⌨ (3:31:35) Install Starter

    ⌨ (3:33:43) Starter Overview

    ⌨ (3:39:00) UseState – Simple Use Case

    ⌨ (3:48:44) UseState – Basics

    ⌨ (4:00:47) General Rules Of Hooks

    ⌨ (4:03:39) UseState – Array Example

    ⌨ (4:17:27) UseState – Object Example

    ⌨ (4:23:00) UseState – Multiple State Values

    ⌨ (4:26:17) Simple Counter

    ⌨ (4:32:10) Functional Update Form

    ⌨ (4:44:55) Matching Project

    ⌨ (4:47:27) useEffect – Basics

    ⌨ (4:57:47) useEffect – Conditional

    ⌨ (5:01:40) useEffect – Dependency List

    ⌨ (5:07:13) useEffect – Cleanup Function

    ⌨ (5:19:24) useEffect – Fetch Data

    ⌨ (5:31:29) Multiple Returns

    ⌨ (5:37:09) Multiple Returns – Fetching Data

    ⌨ (5:52:07) Short – Circuit Evaluation

    ⌨ (6:02:50) Ternary Operator

    ⌨ (6:11:30) Show/Hide Component

    ⌨ (6:20:15) Form Basics

    ⌨ (6:28:53) Controlled Inputs

    ⌨ (6:38:09) Add Item To The List

    ⌨ (6:50:32) Multiple Inputs

    ⌨ (7:06:29) useRef

    ⌨ (7:16:20) useReducer – UseState Setup

    ⌨ (7:29:52) useReducer – Refactor

    ⌨ (7:37:15) useReducer – Add Item

    ⌨ (7:53:14) useReducer – Remove Item

    ⌨ (8:00:56) Prop Drilling –

    ⌨ (8:14:36) Context API / – useContext

    ⌨ (8:26:22) Custom Hooks – useFetch

    ⌨ (8:38:09) PropTypes – Setup

    ⌨ (8:47:48) PropTypes – Images

    ⌨ (8:55:48) PropTypes – Default Values

    ⌨ (9:00:41) React Router Intro

    ⌨ (9:05:52) React Router – Basic Setup

    ⌨ (9:15:50) React Router – Error And Switch Component

    ⌨ (9:18:51) React Router – Links

    ⌨ (9:23:22) React Router – URL Params And Placeholder

    ⌨ (9:37:51) React Optimization Warning

    ⌨ (9:41:21) React.memo

    ⌨ (9:49:50) useCallback

    ⌨ (9:58:00) useMemo

    ⌨ (10:04:15) useCallback – Fetch Example

  3. This is really a amaizing course. I have watched bunch of React videos but this is just different, he pretty much covers everything in 10 hour video. If you watch the whole video u'll have decent knowledge of React. Again this was amazing course.

  4. One of the best react course. The best thing about this course is, it's beginner-friendly. I have learned alot form this course. Thanks john for making this for free.

  5. Working in Windows.
    When using it in some directory, instead of the desktop,
    npx create-react-app my-app
    Error: EPERM: operation not permitted, mkdir 'C:UsersHome'

    command not found: create-react-app

    Solution: npm install -g create-react-app
    then,
    npx create-react-app <name the folder>

  6. defaultProps: what stops us simply declare default parameters in the component function? Is it not more simple and easy to do? Is there any benefit of implicitly declare defaultProps instead?

  7. okay man, when u said, "in the end, u will create your own complex project "… I'm giving my office hours for your video, will meet u at the end

  8. need a help people

    so i used the same code during the usestate tutorial but my terminal gives an error i.e." 'text' is not defined " and the same error keeps appearing for the clickhandler function as well , could anyone explain me ?

  9. Maybe if ReactJS doesn't refresh your localhost once you have saved your code, create a ".env" file in your root folder (in "tutorial" folder in this course) and then into it type :
    FAST_REFRESH=false
    Now close your VSCode and then open it again (This is important) … and now the autorefresh for each save is gonna work

Leave a Reply

Your email address will not be published. Required fields are marked *