React JS Full Course (20 HOUR All-in-One Tutorial for Beginners) - PART 1!

[@arslanaliwarsi6309]

Unbelievable....You are a blessing for the students like me who couldn't know the path and also can't pay for the courses ....May God bless you 💖💖💖💖

[@aftostok6080]

Log: 22-04-23 11:54 AM : Introduction. Intro to react 23:13 ✅ 22-04-23 12:16 PM : Create React App files explanation 34:05 ✅ 22-04-23 05:16 PM : Our first react component 45:52 ✅ 22-04-23 05:38 PM : props 52:55 ✅ 23-04-23 01:46 PM : usestate, tailwind install 01:08:23✅ 24-04-23 12:51 PM : styling with tailwind, map through state with array 01:28:28 ✅ 24-04-23 02:50 PM : Pop up Modal, add form 01:44:50 ✅ 25-04-23 05:29 PM : Profile Form Data in Modal, Update Parent State from Child 02:05:15 ✅

[@hassansyed6087]

Caleb, in highschool, I read a book called "The Giver". I can't remember the story much It had an old man on the cover of it but the old man looked like a sage. A wise and giving soul You sir, are The Giver. This course alone is $1500 through an institution. Thank you for this video

[@Lidrock25]

This is one of the best React tutorial videos, you can find online.

[@mughisfarhan3699]

Caleb, I can't thank you enough for this course! Really clear and to the point. Please never stop doing such amazing work.

[@jp-honeybadger]

@ 1:41:57 your answer is Update

[@Erliortmejurur]

Hey, brushing up on react and loving this, really easy to follow. One question, Why are you wrapping everything in the Header? Shouldn't it be something more like this?

[@anthonynarine5292]

just finished a bootcamp that taught this exact stack. I'm not super confident. Hoping this project changes that! 3hours into this and i feel like i'm stealing education. Caleb if you make this course available on udemy i will buy it.

[@juanalmonte1642]

TimeStamp: 2.46 / I think it's a good practice to use the keyword "page" to differentiate a page from a component. E.X. HomePage.jsx, AboutPage.jsx, etc

[@keithrfield]

I just watched your intro and I'm looking forward to going through the entire course. I'm an experienced developer looking to update his skill set. I already learned the basics of React and Django. Learning how to make them work together will be a valuable skill. My goal is to get a job as a full stack developer. This tutorial will help me develop many of the necessary skills. I also watched your Django REST Api series and loved it. Thanks!!!

[@jiaojiaocheng4141]

been doing a bootcamp your video helps a lot and you seems become more mature and confident now cos i been through ur react videos a lot hahhahha love to see these changes wish me luck as well

[@gikagelashvili6362]

Please some1 help me at 3:36:49 in my code everything is same but saying that -> Can't read properties of undefined (reading 'mapp') this part here: return ( Here is a Definition: {word.map((meaning) => { return {meaning.definition[0].definition}; })} );

[@hosseinabolhassani9822]

i had the same problem, the problem is because in your example, word is initialized with useState() without specifying a default value. Consequently, word will initially be undefined. Then, after the data is fetched from the API and setWord() is called, the state is updated, and the data is displayed. The condition {word && word.map(...} ensures that the mapping is only performed if word has a value, to avoid errors if word is still undefined. this ist the way it will execute: import { useEffect, useState } from "react"; export default function Definition() { const [word, setWord] = useState(); useEffect(() => { fetch("api.dictionaryapi.dev/api/v2/entries/en/hello") .then((response) => response.json()) .then((data) => { { setWord(data[0].meanings); console.log(data[0].meanings); } }); }, []); return ( Here is a definition: {word && word.map((meaning) =>{ return {meaning.definitions[0].definition} })} ); } In this one, word is also initialized with useState(), but since no default value is specified, the initial state of word is also undefined. However, in this case, an attempt is made to call word.map() directly without checking whether word already contains data.

[@umamkhan8109]

great video, In AddEmployee at 2:18:00, you can just remove the value property instead of resetting the state, it works

[@dilbert9812]

I've been wanting to learn React for a while... I finally have some spare time and you make it very easy to pick it up quickly.

[@CodingCleverly]

Caleb is the GOAT! 🐐

[@p_varma17]

You are a blessing for the people like me..thankyou ❤️

[@motech8026]

Caleb we love you bru, I watched your videos from start,you are funny interesting and a good mentor all love

[@DanteMishima]

Hey Caleb.... Just wanted to say thank you, your Nextjs Mongodb videos have been a godsend

[@TheDevOpsEngineer]

Thanks Caleb, this is one of the best ReactJs course I have ever seen, and I have been through a lot, PLEASE DO A NEXTJS COURSE, PALEEEEEZ!!!

[@mortenmller4489]

Great series! I had to check for "data[0]?.meanings" before calling "setWord(data[0].meanings);" otherwise the app broke when searching for "texas". I tried to clone your repo and checked out the "404s" commit. It's the same, but it only writes the error in the console - mine is showing the error (Uncaught (in promise) TypeError: Cannot read properties undefined (reading 'meanings')) on the page. The error is showing in your console @4:02:30.

[@tomfge01]

Getting the same thing

[@demolazer]

Working on a side project with some colleagues now and there's no frontend dev yet, so I've decided, with zero frontend experience, to make a fully interactive live transaction reporting app in a week. Wish me luck 😄

[@aliki212]

Thank you for this!You have helped me so much w sql and theory!You are great in teaching!Keep it up!

[@charlesorih3336]

Nice on Caleb. It is not only awesome, it is broad.

[@bakarytrawally3630]

good stuff, keep it coming, we are learning a lot

[@ThisIsntmyrealnameGoogle]

This came in at the PERFECT time omg

[@seth20smith]

You killed me at 7:12:26.... switching the POST to GET.. Figured it out though 😮‍💨👍👌

[@anthonynarine5292]

Just wondering why not use navigate("/customers/") instead of passing state in the request and having to use the useLocation hook? @7:42:20

[@mohamedsallam76]

I really appreciate your effort, keep up the awesome work. Thanks for all your time and help

[@sarimdev]

Thank you for the incredible tutorial , And for The Time And Effort Put into it 🙃

[@troynelson6394]

This is great so far! Is there a part 2?

[@codebreakthrough]

Part 2 coming tomorrow!

[@stevencoy]

I just finished your JavaScript series and I am excited to begin React. Wil there be a part 2 all-in-one video?

[@hensondedoro9585]

Thank you for the incredible tutorial... great as always.......

[@ignabelitzky]

Timestamp 1:17:57

[@CheMansur]

Really a great course, thank you so much. And I really laughed at 3:26:05 😂

[@Ash-fo4qs]

what are the prerequisite for this course?

[@sayedmuzahid4451]

thanks for your efforts feeling very blessed that i will be learning react from you in single video .....❤️

[@alexanderkomanov4151]

Wow! Thanks a lot for this content!

[@shawon791]

I just love your contents man.

[@anthonyacosta9655]

We appreciate you so much, I wish you the best success.

[@littlegirllost2654]

I’m an HTML/CSS PHP/MySQL developer. I can’t find employment so I’m learning React. What I’m wondering how to do is have an input box where you can put a single employee from a list and describe all the attributes of that employee. I’ve come here to learn

[@rangabharath4253]

Awesome as always 😊👌

[@themarksmith]

Excellent - well done!

[@juanalmonte1642]

From the how to push to state array lecture: If I want to prevent to enter empty values to the employee array; if I do if (name === '' || role === '' || img === ' ') { console.log('please provide input values'); return; }. This piece of code doesn't prevent to enter empty values to the UI. How can I prevent this to happen?

[@zannatulferdousbristy235]

great videos, i can understand the hooks , states properly

[@contraspower6302]

What are the prerequisites of this course??

[@n0tmephisto905]

Is this series enough for beginners? And can I build web apps from scratch after completing this?

[@rishbizzbuzz]

Caleb, what plug-ins you use for indentation and auto formatting?

[@littlegirllost2654]

I pay for treehouse and LinkedIn and I can’t get the content that you have, furthermore, I can’t get the tailwind and craco to work. This is the reason I came here. I pray my deps will work from your tut

[@rawwwwwr]

your efforts are appreciated 👍

[@lupitchr1]

Great video Caleb...really loving the series...hope I can make it thru the full 12 hours! 😬(queue Rocky theme music)

[@codebreakthrough]

Don’t forget part 2 😄

[@moodymonstrosity1423]

Thank you Caleb, I love this♥️♥️♥️

[@sibusisothabethe3109]

Hey, how do you save the code and then it does the reformatting afterwards? is it an extension or whAT?

[@gersonmachado-q8q]

top! great man, hey I was wondering, what would you recommend as a webpage to be always updated with new trends and tendencies wit coding react or js. Every month we have new settings new templates new tools how do you keep track on all that? thank you man keep helping people learn

[@mdyousufgazi4030]

much respect to you man

[@Aly_Fahmy]

Is this beginner friendly?? And by beginner I mean never seen react code in my life. But I do have a good understanding of html, css and js.

[@surendrababuchalla]

Thank you very much. The one just What I am thinking about

[@AkashRoy-jb8bw]

Why the code is not provided in the description?

[@femiezekiel3622]

Pls help.. My bootstrap is not working, have uninstall the node js several time still it won't work. It keep showing this error. npm Err! Code ETARGET npm ERR! notarget no matching version found for boostrap@5.2.3 And many others notarget errors. Pls help...

[@abdu5822]

Next course recommendations, React Native or Ruby and Ruby on Rails. A rare skill with lots of opportunities since everyone is running after new shiny libraries or languages.

[@dijarhpearl5420]

Thank you so much for this tutorial 💗 I just started but I'm loving it 😍. God bless you 🙏

[@geramisadeghi4296]

@56:04 General Kenobi

[@stevencoy]

Will you be releasing part 2?

[@chaturabuddika7063]

The tutorial is very awesome and is not boring to continue the watching. Everything Caleb teaching is very clear to understand from the bottom of the learning curve.. So, in this comment, I've a little problem to resolve in my code which I'm getting in the front-end console. Could someone please provide me a fix to resolve the following error Uncaught (in promise) SyntaxError: Unexpected end of JSON input. I really don't understand clearly which is the proper way to resolve this. However, I hope the error is coming from the Python back-end. Thank you!!!!!

[@MrSudatt]

I wanna learn React ...so tonight I am gonna download this video please don't remove this from your channel ..

[@calebopule2490]

Thank you Caleb.

[@saisatishpatnala5079]

super explanation sir

[@vaykanne7754]

Can i use vite?

[@ryomensukuna9513]

Thankyou sir 🔥♥️

[@soereshchotkan2001]

Great tutorial

[@Fl_ninja]

FYI just in case anyone else has this problem during Fetch an API to Display of Page section. I received an error message "Cannot read properties of undefined (reading 'map')" and was able to fix by changing: const [word, setWord] = useState(); to const [word, setWord] = useState([]); Hope this helps someone stuck on the same error 🥳

[@redx12ae33]

same

[@edwardmike7523]

Wait ooo.. this guy does all this Courses, on KZbin and Udemy, and has lots of connections..and work experience, yet he was laid of...well, no one is safe then...man guy, wishing you all.the best you will overcome...

[@sibusisothabethe3109]

ANYBODY else having problems with their tailwind? cause after i copied that first class it still doesn't apply tailwind even when i installed it correctly

[@sibusisothabethe3109]

should I install tailwind again?

[@arslanaliwarsi6309]

Kindly upload such tutorials for other JavaScript frame (next.js, redux.js etc) works from beginning to advance level .

[@sekmekci]

Thanks for the content. Next time could you record better resulution?

[@patriotlightning7791]

Amazing! ❤

[@ARSG2023]

Thank you!! For efforts

[@kels3772]

Shout out to everyone learning in 2024 Bonus Clip: NSFW 2:05:36

[@The1U22]

wen part 2?

[@dijarhpearl5420]

Please can you create web3 tutorials 😫 for beginners like this too? I want to start web3 once I'm done with your react tutorials

[@OgwalRichard-ib1bo]

fantastic

[@sibusisothabethe3109]

I had to leave the course just before the hour because my tailwind doesn't work even though I followed the right instructions

[@ngochuy7683]

thank you so much

[@gercius]

You are such a silly in a good way, haha.

[@monciego]

thank you

[@adi5962]

Awesome

[@stilkataoficial9135]

9:39:36

[@zachariayussuf7652]

3:26:50

[@AmenMipanga]

Make it downloadable

[@lalruatsangabawitlung3728]

Nice

[@abdulrahmansharief2987]

7:04:06

[@vinothkrishnan9497]

It's really great work. Each and every code clearly explains what and how it works. Really good teacher 🎉..

[@markjovendimaculangan7324]

2:13

[@contraspower6302]

🔥🔥🔥🔥🔥

[@scarswell12]

I appreciate using frameworks like tailwind and react bootstrap but I prefer building components from scratch. It reinforces concepts and it is easier to troubleshoot. My bootstrap button aren't loading the background color for some reason and I can't find any resources on why that might be the case. Sure I can style it myself, even using tailwind, but little issues like that drive me crazy. P.s. yes i imported the react bootstrap css to the correct place. Otherwise good vid so far.

[@study3954]

Is React that important??? it's everywhere!

[@elimcfly350]

I'm a new grad in the market for a junior role. My experience looking through job posts, you can NOT avoid learning React. It's an absolute MUST. My degree was mainly Java projects and even looking around at Java roles they want you to know React. It's kind of bonkers. That's why I'm here and stoked that Caleb put this together.

[@swibay]

@@elimcfly350Same situation... though I'm a CS diploma grad

[@stilkataoficial9135]

Took me 30 hours to finish this course. I better be the next Bill Gates after that

[@Abbos_700]

Whats your thoughts were there any problems or errors

[@stilkataoficial9135]

@@Abbos_700 actually the course was really nice it was just to much info in a 11 hours video.

[@Abbos_700]

@@stilkataoficial9135 Thanks for your response but were there any errors with projects that we cant handle

[@philipk419]

promosm

[@EyeIn_The_Sky]

OMG tailwind is an abomination. Literally tries to fix a "problem" that does not exist and introduces a tone of new ones. I can't bring myself to touch it. It is basically inline styles with extra steps and you can't even chain them together.

[@minhphong5418]

1:07:41 day 1