React Course For Beginners - Learn React in 8 Hours

[@PedroTechnologies]

The excuse api is down, please use the following url instead: excuser-three.vercel.app/v1/excuse/

[@srmback]

Yo, also wanted to mention!

[@Singh54321]

Wow

[@Smurfis]

Hey bro, is this relevant currently?

[@wrench77719]

@@Smurfis yeah

[@NinoAslanishvili-j3f]

hey do u use nextjs here?

[@simonmassey8850]

Great course, watched it over two days, just the right level as I had some awareness over the years but I needed a crash course to orient myself. Thanks!

[@PedroTechnologies]

Wow! Thank you so much for the support :) I really appreciate it!

[@luanabaratta]

@@kaycampbell364 😂

[@--------------------------2792]

Insane commitment bro

[@ruthjemeli8950]

@@kaycampbell364 😂😂

[@HarshWadhwa-gu4zy]

@@PedroTechnologies this theme ? I am in bw this course. Loving this btw.

[@go4fazal]

This is by far one of the best getting started course on React. You will rock as long as you are familiar with basic ES6 concepts! Thanks for putting it together, mate!

[@PedroTechnologies]

Thank you so much for the support! Happy to hear u liked the course :)

[@jeklo3713]

Can I learn react if I have understanding of JavaScript fundamentals

[@smartphonecodes1]

@@PedroTechnologies Thanks from me too, best course I got which gives more in less time with latest things ♥

[@zombiefacesupreme]

Even better than some paid tutorials that I've done, so I felt like you deserved some more thanks for putting this out there for free!

[@PedroTechnologies]

Thank you so much for the support!!

[@HrishiKW]

which paid course you did?

[@ivannikolic4310]

Pedro, I'm already working as a front-end dev, but I've established and learned a lot from you. All praises for the courses and all your work.

[@PedroTechnologies]

I appreciate it

[@sahad_abd]

Heyy jam going to join as a fresher in developer role .. will this video be helpful in industry?

[@pokfan2017]

By far the most friendly React course I've had ever seen on the internet, thanks a lot Pedro!

[@PedroTechnologies]

Glad to hear that!

[@anjalithakur1693]

i wont lie dude u literally saved me .....guys this is the best channel for react. The way he teaches is the best ...thanks alot Pedro

[@AfreenSyed-rl1xf]

1:30 hours into the course and i absolutely love it. you made it look so simple. I guess I am lucky that I found this video

[@niquebon]

1 hour in and WOW!! I'm really glad I found this video to learn React! Other videos seem to be too complex for a beginner or outdated. Your flow is exactly what fits my learning style. Big thanks to you!

[@PedroTechnologies]

Glad it was helpful! Thank you for the feedback!!

[@MrStunless]

On my path of web development currently and this has been the best React video I ahve found when there seemed like a mind numbing amount. Thanks so much for your effort

[@Nightw4lker]

I've done a paid course on React and honestly this is much better. The escalation of complexity is handled perfectly and you are very easy to listen to. You've got a gift for teaching Pedro!

[@johnerwinchan7279]

agree especially for newbies

[@spotnuru83]

Thank you so much, really learnt so much which I was not confident about in ReactJS, its so simple and easy to learn. Anything on good Looking UI as a CSS tutorial along side of ReactJS will be great help, thanks in advance.

[@PedroTechnologies]

Thank you for the support :) I am happy I was able to help you!!

[@augustineakotolarbi-ampofo6769]

Hi Pedro, just wanna thank you for your content. You're quite literally one of the best teachers of React on youtube. I have seen almost all your videos on React. My absolute favorite is your video on All React Hooks in 1.5hrs. It has been my go-to video for interviews. I pretty much have a hang of React now...but I'm still going to watch this video anyway...why? cos it's from PedroTech....there's always going to be something new to learn. Cheers man.👍

[@MirzabekUmaraliyev]

Nice and comprehensive lessons. There is no need to go expensive courses to learn the same thing . Honestly Your videos are much more helpful and understandable to me.

[@fun2rideadventure]

Your way of teaching and explanation is the best ..... Thank you :) !

[@PedroTechnologies]

Wow, thank you so much for the support :) I really appreciate it, glad you liked the vid.

[@devinbridgelall8394]

Dude you are literally the best! This is by far the best React tutorial I’ve ever seen. This deserves an award or something lol. Thank you!!!

[@patricklepamplemousse884]

Just discovered this channel and I have to say this a gold mine, everything is very well explained and put together

[@soumelee5661]

PLEASE DON'T DELETE COMMENT I NEED THIS TO REVISE 🙏🙏🙏 ✨some notes~ 0:58 key topics we will learn- components and props, states, hooks, redux, typescript, forms, state management. at last we will make a project using firebase. (React, sometimes referred to as a frontend JavaScript framework, is a JavaScript library created by Facebook. Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.) MODULE 1- 8:39 you need to have npm and node js installed for creating your first react applicaiton 9:24 to generate the boilerplate code-> npx create-react-app . (in the same folder) or npx create-react-app appname (in new folder). At the end it says "Happy hacking!" which means we have all necessary files and folders. 11:12 package.json is json file that contains information about your project and the dependencies. used for documentation purposes. 12:50 the html file in public folder- When working with react we are not gonna create html files, we write everything in js (or typescript) files. In react we create single page applications. The whole app will be present inside this index.html file. On running the app, all the react code we write will be put inside the root div in index.html. 14:57 npm start --this will run our react application in live-server. localhost:3000 16:18 deleting some files which we will not use. MODULE 2- 18:24 what is JSX? in app.js what we see looks like a js function that returns html div. but that is actually not html or js. It's JSX. It is the syntax presented by react which makes it easier for us to mix rendering logic with ui stuff. every single time we are gonna display some UI on our screen, we are gonna create a funciton that will return some html. 19:55 Hello World 20:05 creating variable- const name="Pedro" then put {name} inside the return statement to display it on the webpage 21:52 creating a variable that doesn't just store string but also html 23:52 our code is getting bigger, we can create a const variable that stores the UI. const user=( {name} {age} {email} ); 25:49 Better way to store the UI- by using a component. A *component* is a js function that returns some UI or some JSX. //this is a js function const GetName=()=>{ return "Pedro"; }; //this is a react COMPONENT const GetNameComponent=()=>{ return Pedro; }; 27:41 you cannot create a component that starts with a lowercase letter, start with uppercase letter only (in js function that is possible) 28:39 putting all the UI stuff in a component called User. The App component is the first component that is displayed in the website btw. You call variable like this {variable} and component like this 31:49 when we used the component 3 times, same info displayed 3 times. But we want to display different names, age, email. We can use props. Props is a js object that exists inside of the argument of some component. 32:57 example function App(){ return ( ); } const User=(props)=>{ return ( {props.name} {props.age} {props.email} ); }; 36:46 practice exercise~ problem: create a component- solution: const Job=(props)=>{ return ( {props.salary} {props.position} {props.company} ) } 37:47 solution

[@soumelee5661]

MODULE 3 39:13 in App.css we can add any css we want for our webpage we import the css file by writing: import "./App.css"; 39:55 If we rename our css file from App.css to App.module.css then our css file will become a css module stylesheet. means? 40:09 41:34 ternary operator in js. 42:48 age>=18 ? console.log("If :)") : console.log("else :)"); 44:08 conditional rendering example. we are conditonally changing what the ui is being shown. 45:39 using ternary operator 47:02 directly adding styles to inline elements This has COLOR 48:47 This has COLOR 49:45 using && for if statement //if isGreen value is true then button shows else not {isGreen && This is a button } working with lists or arrays in react~ 55:31 displaying the list function App(){ const names=["Pedro", ....]; return ( {names.map((name,key)=>{ return {name}; })} ); } 56:17 list as object function App(){ const users=[ {name: "PP", age: 21}, {name: "QPP", age: 22}, {name: "PoP", age: 25}, ]; return ( {users.map((user,key)=>{ return ( {user.name} {user.age} ); })} ); } 57:52 making component 59:19 when we make new components we want them to be in separate files cuz that way its more manageable.... component in diff file- 1:00:07 in App.js- 1:00:19 1:01:30 exercise- 1:03:02 solution

[@soumelee5661]

MODULE 4 States in react~ suppose we write a code in react that we have a button and a number, on button click the number will change. function App(){ let age=0; const increaseAge()=>{ age=age+1;console.log(age) }; return( {age} Increase age ); } now even tho the value of age will change the page will not show any changes, the page will not render again on a change of value, that is why this happens!! In js we used query selector or others to change the value on the page but in react we need not use that, we can use states. we will edit the code like this to make it work- import {useState} from "react"; function App(){ //let age=0; const [age, setAge] = useState(0); const increaseAge()=>{ //age=age+1;console.log(age) setAge(age+1); }; return( {age} Increase age ); }

[@webdev644]

21 year old guy mastered and teaching React 22 year old me learning from him Great course btw Fact that you have sticked to only functional Components combined with you simplified explanation on various hooks made the course very elegant

[@MrKukuri44]

24 Years old me just started learning react :D

[@YA-hx5dz]

@@MrKukuri44 36 years old me just started XD

[@--------------------------2792]

Hi Pedro , I am same age as you but I admire your hard working on managing making courses ,handling collage, job meanwhile I cant even manage collage .Have a productive year ahead and thanks for this course.

[@codewithguillaume]

My friend. That’s exactly what I needed. Will look at it entirely for sure !

[@sujiths8103]

Wonderful tutorial! Thanks!😃

[@PedroTechnologies]

Thanks!!

[@JamesTolias]

Wow.. I think this is the best React Course in all of KZbin.. And beyond the knowledge you have on the subject and the very good structure of the course I think the one thing that makes you stand out from other courses is that you can fully understand your students! Keep up the good work!

[@Sakshi01188]

can you explain this project in detail like what should i tell interviewer about this project please define it

[@mikeandrewfernandez9797]

Subbed! This is exactly how I dream that someone would teach me like. He exactly explains it in the way how he himself understood it. Very clear and straightforward!

[@cruzinsweetsntreats]

So did I, even before the first hour of the long video :D 2024-02-21

[@paulaneesh7]

By far the best ever React Tutorial on entire KZbin and even better some paid courses You are an absolute legend bro, keep going Huge respect 🙏

[@jadantoun8967]

The best React course on youtube by far! Thanks a lot, we hope to see more courses like this. Any plans to do a full course about Node or Angular?

[@AniketGawade]

Thanks for the amazing series! I thoroughly enjoyed your content.

[@PedroTechnologies]

Thank you so much for the support :) I really appreciate it!

[@fahadaameer5618]

You made it so easy for us to learn, thank you so much

[@PedroTechnologies]

My pleasure 😊 Thank you fir the support!

[@Sakshi01188]

Hi can you explain this project in detail like what should i tell interviewer about this project please define it

[@Sakshi01188]

​@@PedroTechnologieshi can you explain this project in detail like what should i tell interviewer about this project please define it

[@godloveinaction]

Gone and gone untill i landed here and got what i was looking for, thanks Pedro this is the best react course ive seen

[@vouneo]

My favourite channel for learning react Thanks Pedro.

[@PedroTechnologies]

[@Wilzzub0b]

Amazing tutorial Pedro! You progressed slowly through the most important elements of React and then showed how to do things better and more efficient. Your teaching actually made me understand what I was writing, which I can't say for most of the tutorials out there. Thanks again!

[@luther4287]

This is one of the best React beginners course I have seen on KZbin. My learnings have been absolutely exponential. Thank you for creating content like this, much appreciated!

[@Sakshi01188]

can you explain this project in detail like what should i tell interviewer about this project please define it

[@topherreynolds3999]

Thanks man! I really enjoyed this tutorial and learned a lot! Keep it up!

[@viniclunc8553]

Faço o curso pela playlist e tem me ajudado muito a entender todos os conceitos apresentados.

[@outofplace2024]

In module 5 we can use index of array like: const deleteTask = (key) => { setTodoList(todoList.filter((task, index) => index !== key)); }; deleteTask(key)}>X

[@rockbluestudios9200]

the most well-explained, concise React course by far; goes well above a lot of paid courses in terms of understandability and content. This is amazing!

[@karanchauhan-em8ti]

"This 7-hour video on ReactJS is an absolute game-changer! 🚀 Initially, I found the topic to be quite challenging and overwhelming, but your video simplified everything in such a concise and easy-to-understand manner. 🙌 It's truly impressive how you managed to cover such a vast subject in just 7 hours. Thank you for making ReactJS accessible and helping me grasp its concepts effortlessly. You're a rockstar! 🌟"

[@hssageni9893]

dude I am learning back end development should i understand and get deeper in firebase?

[@Sakshi01188]

​@@hssageni9893can you explain this project in detail like what should i tell interviewer about this project please define it

[@PsychoDude]

Firebase is an easy backend solution not actually backend you would want to dive deep

[@pankajbisen6524]

1:29:55 (useState challenge) I solved without seeing the solution, but additionally added the if condition on the decrease button because it goes to a negative value. Thanks pedro for great explanation....

[@atharvpatil3106]

I've tried so many react courses and left in the middle but this is the only one I've managed to stick till the very end.

[@State_exam_preparation]

Kid you not, first time going beyond 2:00:00 including rest all react course Thank you man Appreciate🙏

[@RavinderSingh-un7ky]

I am a backend developer and I used to think that frontend is not my cup of tea. But after I found your channel I have learned so much in React. Amazing Work!

[@TheMRTIMBUK2]

I just finished , i recommend this to all beginner and intermediate to watch it

[@სერგიორმოცაძე]

this video is so much underrated this man deserves everything for saving our lives

[@Muhammed-nani964]

I haven’t used react in 6 months and I checked every part of the crashcrouse and it’s the best thx man

[@PedroTechnologies]

[@thaidoan868]

Thanks!

[@PedroTechnologies]

Thank you so much!!

[@romyt9816]

I am around 1h10m, I've found very nice the explanation of why React doen't show the change of the variable and the console does it instead, because you showed the passage as you were really a newbie React learner like us. Thank you.

[@Umangnaik]

Thanks!

[@PedroTechnologies]

Thank you for the support!

[@bicycle461]

Your React videos are the best! I have watched so many different ones and I learn the most from yours by far!

[@tasneemibnealam9960]

I have tried different ReactJs tutorials on youtube, I have to say that yours is the best one. Keep up the good work!

[@ar2_]

Great course even for a beginner like me. I've some doubts: 1:44:56 If we log array after setTodoList in addTask method, it doesn't show latest element in it? When we use filter method, does entire task list gets rebuild based on True or false, or only false ones removed from screen? 1:57:11 instead of that, can we use just (todoList.length+1) as id? Ans- This will cause a bug when we delete an element, add new one and delete latest element.

[@ahmedsiddiqui2083]

"I have never seen a premium and best explanation of React before, but when I watched this course, I realized that it was something different. It truly teaches React the way it should be taught - making it right.

[@volodymyrsanotskyi3473]

what a gem!!!! exactly what I was looking for, my love for react is only growing!!

[@HarmanSingh-tp7xs]

Loved the way you clear small doubts and gives different examples to digest the new concept. Literally, no other course did this. And giving exercises after every concept is awesome. Please do create more tutorials and projects on MERN. Thanks a lot Pedro !

[@almirc777]

nothing but the best react tutorial out there. Greetings from Brazil!

[@cherie4665]

I just started watching this video, and it's so much better than the other tutorials I've come across. I finally feel confident in tackling React. Thank you for the work you do!

[@bryantony9836]

i love this course. Edit: i don't have money to donate so i usually watch the ads.

[@hiwotina26]

Bravo! I followed all your react course and learned a lot. Please consider doing more react projects to solidify our knowledge.

[@velafarD]

its my first react course. just finished module5. the way you are teaching things is amazing! thank you for this amazing course!

[@killerkyun]

TINHA QUE SER BR MESMO PRA FAZER O MELHOR CURSO DE REACT obg meu mano

[@slimiestsnake3904]

Concordo.

[@motivationofKing]

you can also use for change color for completed task import { useState } from "react"; export const Task = (props) => { const [state, setState] = useState(props.completed); const changeColor = () => { setState(true); }; return ( {state ? ( {props.taskName} ) : ( {props.taskName} )} Complete props.deleteTask(props.id)}>X ); };

[@BrandonFunk]

3.5 hours into this im really reallly getting alot more out of this than I have anything else. its really helping things make sense. Great work. Can't wait to finish the rest.

[@rajendersharma5291]

I've been watching this from 4 days still not done yet but I'm learning alot😄😄

[@Sakshi01188]

can you explain this project in detail like what should i tell interviewer about this project please define it

[@mateusleitepedrosa]

Muito bom! Parabéns, Pedro!!

[@137-amankumar6]

the way you clear all small concept is damn🔥

[@KDEWORLD]

The greatest explanations I have ever watched on KZbin....

[@iafofkhadze4628]

Pedro u did so great ! it's freaking awesome

[@mahdisalmanizadegan5595]

best course ever, thank you Pedro for your kindness and teaching style.

[@danielkamau8436]

I love this course, details are on point Pedro....A question for you Pedro, How long did it take you to learn react and feel comfortable using it in varied projects. like this course?

[@PedroTechnologies]

I feel like about 6 months!

[@misanduschool6281]

Just finished the whole course and learned heaps. Keep up the great work 🙌

[@Breakfast_Time-r3c]

Pedro, my man. This is the best course so far on youtube! Thank you!

[@HassanFakhry-x5x]

Loving this course! I'm aiming to learn the basics of React in a week before diving into my first projects. I'm halfway through and have already gained so much knowledge. Thank you, Pedro 🙏

[@DASH_Book_Reviews]

wow that is such a nice course I enjoyed it😍

[@FefoTheBadger]

Awesome ! 😀 Never struggled this much before to find the right tutorial. Some were slow, some presented with a boring weird english, many were not up to date. Pedro's is a really nice one!!!

[@user-uc7zf1xd8p]

Actually an amazing tutorial, easy to follow, and not a snooze fest, Good Job!, these kinds of things especially for programming are rare!

[@thesuperflexibleflyingtaoi8866]

at @1:03:05 you should add a else with return null since map always expects some sort of return.

[@victortimi]

True🥰

[@jmtricks4474]

YOOOO I LIKE THIS! I AM NOT EVEN JOKING! I LITERALLY LEARNED STATES THE BEST WAY

[@The_C0LLECT0R-c9y]

I need to learn React as fast as possible and that course of yours is the best to start with so far.

[@mauroreis4006]

About to start chapter 14 and i want to say thank you for this amazing course, you are an amazing teacher.

[@hmm1778]

Day 1 @1:28:27 Day 2 @2:06:08 @2:57:09

[@bobdaawid2218]

Just Finished the course and woow this is so great pedro! Would be going for your 6 project building next. Thank you so much.

[@ryanzogheib7982]

I looked at several react courses and this one is by far the best for begginers and to learn all the basics you need to know to become a react developer

[@AhmedSiddiqui-dz3up]

best tutorial for all the developer who wants to learn react js from zero to hero recommended

[@mihaipascu4975]

A very good course, beautifuly and coherently explained! You are a TRUE professional!!! Thank you very much!

[@heitormbonfim]

Best free course ever, there's even TypeScript and how to deploy the project.

[@KAMIL-jc8nn]

Great tutorial, you gave me big motivation. You still remember when you where beginner and I dont feel that stupid. Just thank you

[@Brian-zc6yp]

this helped me so much man thank you im excited for more content!

[@christophermawela3318]

Amazing, Have not the completed the course yet but decide to leave other channels and browse tutorials on this channel. Some people are born to teach and code. First few minutes on the videos I decided to engage this channel. Thanks...

[@miksvillamor]

Thank you so much Perdo! For sure everyone is looking for a part 2 of this video on the advance topics.

[@gavenlrobertson7352]

Your a naturally gifted teacher. Love all your courses and everything you post. God Bless you!

[@MistaBakes]

You're a great tutor, no buzzwords and tech jargons just meaning with true clarity, thank you

[@luisguedes7256]

BRO your didactics and your diction are so good that only with intermediate English I could understand everything. Seriously, thank you very much.

[@seroslav6934]

I can't emphasize enough how awesome this guide is. Thank you!!

[@ananthac6472]

I learnt react from your channel two years ago, which helped me become a freelance web developer , i can't thank you enough brother❤

[@battlebear]

I tried a few React tutorials and yours is so amazing! This is actually my fav course. It's to the point and all useful topics. If possible, videos on MERN would be great. Thank you.

[@lucasdamasceno7068]

Damn tava procurando um vídeo top de react, vai salvar dms amigo. Parabéns pela fluência ✌️👋

[@kararrifat]

His voice is very much similar to Bucky Roberts. Made me remember the old days of learning programming. Great Video by the way.

[@buddika6536]

Thank you. I just followed few modules in this course. This course really helpful. Thank you agin ❤

[@zscoder]

Would love to see React Native in the future, thanks for posting 🙌

[@touseefibnkhaleel3643]

thank you so much for putting your valuable time into creating such a masterpiece. Would love to see how you guys work on a feature in real applications.

[@huijuanzheng9070]

Thank you so much for your wonderful lesson! 2 days getting a in-depth view of react, What a wonderful experience!

[@IamTiernO]

Bit weird but you look like a younger version of Wagner Moura (the brazilian guy who played Pablo Escobar in Narcos)

[@PedroTechnologies]

Hahahaha i am Brazilian so maybe there is a similarity there. I love his movies!!

[@junyorff12]

Hhahaha "pomo ou plata"