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?

[@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 ); }

[@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?

[@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!!

[@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!!

[@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

[@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

[@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

[@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.

[@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

[@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....

[@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.👍

[@sujiths8103]

Wonderful tutorial! Thanks!😃

[@PedroTechnologies]

Thanks!!

[@thesuperflexibleflyingtaoi8866]

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

[@victortimi]

True🥰

[@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

[@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.

[@State_exam_preparation]

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

[@--------------------------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.

[@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!!!

[@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.

[@topherreynolds3999]

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

[@patricklepamplemousse884]

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

[@codewithguillaume]

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

[@AniketGawade]

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

[@PedroTechnologies]

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

[@outofplace2024]

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

[@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

[@viniclunc8553]

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

[@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❤

[@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!

[@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

[@vouneo]

My favourite channel for learning react Thanks Pedro.

[@PedroTechnologies]

[@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.

[@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 🙏

[@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

[@TheMRTIMBUK2]

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

[@thaidoan868]

Thanks!

[@PedroTechnologies]

Thank you so much!!

[@hmm1778]

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

[@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

[@Umangnaik]

I am front end engineer majorly working with Angular framework I wish to learn quickly react js but with the effective manner due to hectic daily schedule at office and bla bla excuses unable to continue reactjs learning but I saw your video weeks ago while am surfing and now I have completed your wonderfully explained video in 2 days demo and deployment to fire base Thank you Your video is far better than tons of udemy instructor’s Thank you once again

[@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 ); };

[@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!

[@Umangnaik]

Thanks!

[@PedroTechnologies]

Thank you for the support!

[@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.

[@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]

[@ShacoCreations]

Excelente conteudo e didatica! Aprendi com vc o que muitos cursos por ai nao sabem ensinar, keep up the good work, abraços do Brasil!

[@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?

[@drummer4040]

Here is my journey: 30 mins : He explained everything beautifully...no ugly mess....everything is uderstood by me till this point 1 hour : everything is explained perfectly.....I can still follow along 1 and half hours in : yayy i am slowly liking react 2 hours in : Yess the project was done properly....he really knows how to explain stuff to a beginner

[@UtkarshSinghP]

dnt leave inbetween watch the whole video

[@drummer4040]

@@UtkarshSinghP ohh i finished it bro....forgot to update

[@bestinbabu4244]

@@drummer4040 how do i learn html and css for this

[@bernardusoren8450]

Hello, first of all sorry i'm new to this react world but at 3:42:59 for useQuery part, I got stuck because it says "Bad argument type. Starting with v5, only the "Object" form is allowed when calling query related functions." can someone help..?

[@chippandenga6722]

Stuck at the same place and seems like we are on our own here, buddy. Lets go hit them books and find our way out of this.🤣

[@codistiano]

look at the new tanstack migration v5 docs which shows how the new implementation of useQuery is

[@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!

[@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.

[@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

[@DASH_Book_Reviews]

wow that is such a nice course I enjoyed it😍

[@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

[@mateusleitepedrosa]

Muito bom! Parabéns, Pedro!!

[@bryantony9836]

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

[@killerkyun]

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

[@slimiestsnake3904]

Concordo.

[@jmtricks4474]

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

[@almirc777]

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

[@velafarD]

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

[@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!

[@KDEWORLD]

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

[@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...

[@iafofkhadze4628]

Pedro u did so great ! it's freaking awesome

[@halith_s]

[ 1:30:12 ] : --for decrement count > 0 && -1

[@miksvillamor]

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

[@luisguedes7256]

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

[@huijuanzheng9070]

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

[@mauroreis4006]

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

[@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!

[@rajendersharma5291]

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

[@volodymyrsanotskyi3473]

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

[@AhmedSiddiqui-dz3up]

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

[@betao7070]

8h viraram 2 semanas... bom. Muito obrigado. Ajudou. :D

[@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.

[@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 🙏

[@buddika6536]

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

[@heitormbonfim]

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

[@mahdisalmanizadegan5595]

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

[@Brian-zc6yp]

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

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

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

[@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

[@zurazura309]

“I learned React without buying any paid courses, without going to class, without bootcamps, without anything, it was all teaching myself.” - Same story, I also started studying 3 years ago, but you know much more (I'm still trying to master Redux). Thanks for the course, it's great to refresh and repeat some topics, as well as learn something new. good luck to you!

[@mouniika]

Can you plz give me guidance to how to learn react..

[@zurazura309]

@@mouniika It is difficult to fit everything into one comment, but in general I recommend not to make the mistake that I had at the beginning. * Try to focus on the structure, on how everything works together. Don't spend a lot of time on syntax or any specification at first (only after you understand the whole concept of each hook and it will be much easier)! * I definitely recommend watching this course as well as some other courses; * if you do not understand some specific concept, watch also separate videos about it as well; * Repeat; and the most important thing... * Try watch at online courses where they build and you too try at the same time.

[@mouniika]

@@zurazura309 tq

[@Sakshi01188]

​@@zurazura309hi you seem helpful can you explain this project in detail like what should i tell interviewer about this project please define it.or we can chat on whatsapp or emal please do reply

[@slimiestsnake3904]

Qual a extensão que você usa em 57:40 que deixa o return entre parênteses e identado?

[@jimitsoni18]

In the todo-list, can we not use arr.push() and arr.splice(), instead of having to iterate over the entire array using arr.map() and arr.filter() ? (01:50:00) another question, (01:55:00) instead of creating a seperate object for the tasks in todo-list, can we not use the array index as a key?

[@tharindulakshan9700]

yes same here this veios doing some task with errors

[@miftahulhadi4585]

I've seen some tutorial videos about reactJS. and this video is the best. Thanks. Greetings from Indonesia

[@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

[@borteavsaroglu6853]

I watched the entire 8-hour lesson step by step and did it myself. It was a very good series. Your narration was fluent and clear. Thank you very much for this amazing series, You are the best Pedro

[@redcityyy]

Obrigado, amigo. Estou aprendendo muito com seu curso!!!

[@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!

[@pamplo7976]

Hi Pedro, thank you so much for all your videos!! they are just great!!! Great course!

[@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!!!

[@mihaipascu4975]

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

[@resourcelookup8678]

Love all your content my best intructor online hoping to see some day

[@Deevicode]

Thanks for making this course free, i have being watch this course for more than a week now. i have learnt alot of stuff