Full React Course 2020 – Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks
August 18, 2024 2024-08-18 5:10Full 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: https://www.youtube.com/watch?v=a_7Z7C_JCyo
✏️ Course from John Smilga of the Coding Addict channel. Check out his channel: https://www.youtube.com/codingaddict
💻 Basic React Code: https://github.com/john-smilga/react-basics-2020
💻 Advanced React: https://github.com/john-smilga/react-advanced-2020
⭐️ 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: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
source
Comments (33)
@KTP12275
6th/8/24: Finish the course with router, memo and callback I will revisited when I need them, thank you John
@chukwukapaul8765
apparently, all the link used in the fetch are failing but when i replace with dummy links like json placeholder i get a result. can i get the reason please?
@trkhchv
I’m out.This guy is horrible
@odezuluaugustine1456
Please I am trying to practicing the "Tour" app and could not access the api. It keeps giving error 403 (forbidden). Please I need help/guideon how to get it done
@kinemat1548
It has been roughly 11 days, completely watched the video while side by side doing the setup file coding, I may have to revisit some hard to understand topics like useReducer, useRef, useEffect's second parameter, forms…….
besides this everything worked really great or me…Thanks once again.☺☺
@Arbitrage_trading
my best online tutors are: John Smilga, Jonah Schmeted….. and Angela Yu. i love John Smilga the most
@brendon_t_newton
If you're doing this tutorial in 2024 and beyond, you need to use Node v16 for the advanced tutorial! Otherwise you'll get an error when using npm start
@theanonymousprogramer2358
Probably one of the best react courses on the web>i also did the node course.Both are a masterpiece
@hibstgetachew5088
Is this tutorial better than net ninjas?
@Sandeep-cc8mo
I love the way you teach everything in every single possible way…
@not_amanullah
Understood++
@codewithhyder1553
Thank you for this great course
@SwarnaB-vv4qj
Is this course for complete beginners?
@anAwesomeNameHere
Is the content relevant now? Any updations. Can anyone guide?
@myytkn8526
Oh my God! This Video-Content best React Content forever. I love this Video, thank you for this great Content!👍👍👍👍👍
@wanderingpalace
It’s fun learning react with professor snape
Thx for this wonderful gift this christmas
@furqanamjad90
I've watched many react courses and this is by far the best course that I've seen.
@homawasimkhan3845
best video ever …i learn many new things in this……unbelievable …ouitstanding way of teacching
@donaldyeh1
I am new to react, this the best that I have seen sofa. I am using Node.js v18.18.0 (Window 10-64) and get error such like 'code: 'ERR_OSSL_EVP_UNSUPPORTED'',. Could please help?
@bgmedits2515
Finally Completed , Thank You So Much John.Amazing tutorial 🔥🔥🔥
@dhineshkumar2044
if you are currently studying this course 2023, you need to know this 11-React-Router (9:05:52)
you need to update this code
return (
<Router>
<Navbar />
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/people' element={<People />} />
<Route path='/person/:id' element={<Person />} />
<Route path='*' element={<Error />} />
</Routes>
</Router>
);
we need use <Routes /> not switch that's a old version of react-router-dom. please update your code.
and one thing we don't need "exact" keyword in <Home /> path that's why we use <Routes />. Otherwise, its all same 😊
@viscy
44:40
1:03:52
@morris5648
Stale
@hanskosarkar
This is the most comprehensive course on react hooks. Every concept is explained clearly. This course is best to learn react hooks.
@dolybim
This is a gem!!!!!!!!!!! Thank you so much
@user-bd8dz2eb4g
at 1:41:14 how could get that image rendered without returning anything in image function, for me it didnt work
@abid101
just finished the course – took 2 weeks but wow, learnt a lot hopefully will finish the projects now and keep grinding
@jayBisht0001
Day 1- completed first half or 3:30 hrs, and deployed basic project in GitHub
@shanukulshrestha566
I start this code 1 aug 2023
@Joel-px2yy
Guys can i please know how long whoever reads this comment took to finish this beautifull course?
@naveenkumarm1190
Thanks You sir making the React are fun,Love You so much😍
@net_economy
The course is great for beginners, but what about making the course for intermediate ones, why does such a cool organization not make a course for advanced learners?
@forestfox00
amazing work John!