React JS Course for Beginners - 2021 Tutorial

[@Aly_Fahmy]

Has anyone noticed free code camp has been absolutely KILLING it (even more than usual) ever since quarantine last year?! Truly thank you guys!!

[@kedardhane.1163]

Freaking yeah

[@ankitsharma1072]

Hell yeah!!

[@hectorg362]

Yeah, I learned a lot from them.

[@itsmariaa18]

they are starting our whole careers, I'm so grateful for them

[@Almighty_Flat_Earth]

React js is a stain, and shame to the JavaScript ecosystem. Most hyped childish library ever, the same functionality can be achieved with Angular, svelte and vanilla js. React js doesn't have any value. What's the point of using a complicated library that makes us to write complicated syntax and logic ? Why? Why suffocate? Devs are in peace of mind while they use Angular or anything other than which involves virtual dom nonsense. React js is the most hated. Angular is the king. React makes things more complicated, while the same functionality can be achieved in pure js or angular in more elegant way. Virtual dom is very slow in mobile because it takes a lot of RAM space. There are many blogs against react js. Please adapt to the trending Angular.

[@ahmadkhaled7497]

0:00 - Introduction 0:47 - The App 3:17 - The Movie DB - API Key 4:59 - What is React? 10:39 - Starter Files 14:06 - Quick about tooling 15:40 - Bootstrap with CRA 19:01 - Install dependencies 24:07 - Copy fils from starter files 28:24 - Setup API Key and walkthrough of API files 33:14 - React without JSX 40:00 - Short about JSX 42:42 - Crash course in Props and State 55:02 - Short about Styled Components 58:13 - Global Styles 01:07:51 - Header Component 01:20:59 - Header Component - Styles 01:25:30 - Home Component - Scaffold 01:33:35 - Short about built-in hooks in React 01:38:45 - Fetch data from the API for Home Page 01:52:34 - Custom hook for Home Page 01:59:39 - HeroImage Component 02:11:12 - HeroImage Component - Styles 02:20:13 - Grid Component 02:25:56 - Grid Component - Styles 02:29:34 - Thumb Component 02:34:49 - Thumb Component - Styles 02:37:18 - Spinner Component 02:41:53 - SearchBar Component 02:57:44 - SearchBar Component - Styles 03:02:06 - SearchBar Component - Logic 03:06:41 - Button Component 03:10:32 - Button Component - Styles 03:12:56 - Button Component - Logic 03:19:40 - Short about React Router 03:21:49 - Routing with React Router 03:34:05 - Movie Component - Scaffold 03:36:16 - Fetch movie data from the API 03:49:28 - BreadCrumb Component 03:54:39 - BreadCrumb Component - Styles 03:57:36 - MovieInfo Component 04:08:31 - MovieInfo Component - Styles 04:17:25 - MovieInfoBar Component 04:23:16 - MovieInfoBar Component - Styles 04:26:28 - Actor Component 04:31:59 - Actor Component - Styles 04:34:06 - Short about PropTypes 04:37:28 - Validate Props with PropTypes 04:48:07 - Short about SessionStorage 04:50:22 - SessionStorage - Home 04:59:24 - SessionStorage - Movie 05:03:07 - Build and prepare for Netlify 05:05:48 - Netlify drag and drop and Netlify CLI 05:10:19 - Netlify Continous Deployment 05:13:38 - Bonus - Classes - SearchBar Component 05:21:54 - Bonus - Classes - Home Component 05:33:04 - Bonus - Classes - Movie Component 05:40:29 - Bonus - Typescript - Introduction 05:42:10 - Bonus - Typescript - Bootstrap project and copy files 05:47:09 - Bonus - Typescript - Refactor base files 06:04:06 - Bonus - Typescript - Refactor Home and Components 06:14:45 - Bonus - Typescript - Refactor Movie and Components 06:25:42 - Bonus - Login - Short about TMDB login and rating system 06:29:15 - Bonus - Login - Global Context 06:34:24 - Bonus - Login - Login Component 06:50:39 - Bonus - Login - Login Component - Styles 06:53:37 - Bonus - Login - Login from Header 07:00:17 - Bonus - Login - Rate Component 07:04:25 - Bonus - Login - Rating from MovieInfo

[@蹦太君-o4d]

thinks

[@melchizedekmaranga516]

thank you!

[@mfg587]

Started with FCC years ago, went to a BootCamp well prepared and now am a software engineer, keep up the good work folks :)

[@battlebear]

I'm at 2 hours in. I'd say that this is not beginner friendly, especially if you don't know anything about React at all before this. It's easy to get lost and there're bunch of libraries involved. Not just React. But I think it is good for someone who knew basics and want to solidify the concept with practical website building. He also introduced many nice tools for development. It's clear that he spent much effort on this course.Thank you!

[@battlebear]

Ok! So I finished the main course (5 hrs). It was great! Thank you.

[@zikobht4623]

thank you very much!

[@TheTopProgrammer]

Maybe bears should stick to eating nuts & berries rather than trying to learn modern web frameworks!

[@priteshsoni3891]

@@TheTopProgrammer why being rude! the guy is being helpful! and FYI, React is not a framework :)

[@TheTopProgrammer]

​@@priteshsoni3891 I'm just poking the bear ;)

[@harshkc99]

If the initial timestamp in the description is changed to 0:00 from 0:00:10, KZbin will render them as chapters and it would make navigating between timestamps easier. Keep the killer content following...

[@YOGESHYADAV-vg4lt]

Hi, I am having some problems while working on this project, can you help me : )

[@aziz4bliss]

Absolutely loving it. Feels like watching Batman Dark Knight's Bane conducting the course. Thank you @Weibenfalk for this wonderful course.

[@jimbouch144]

I had to wait until I completed all the steps in the section - Header Component - Styles - for all of the styles to render, so be patient. It works. Thanks for this course. So far, it's a good intro.

[@joebu7538]

Why does it not render properly until finished? For me, until I finish the section, the logos and content cover half the screen.

[@goldenmonkey9085]

Follwwww up !!!! I am learning JS HTML CSS. React is my next station!! But most tutorial and course on udemy is outdated. It's the time !! let's go~~~ And super thanks English Substitle

[@karthikp6473]

You're good to go, once you learn HTML,CSS and JS with ES6 functionalities 👍

[@karthikp6473]

@Upskill 101 hey there... that's enough.... please go ahead... happy learning

[@karthikp6473]

@Upskill 101 no problem.... when I started I had the same confusion

[@sahul._]

No words to appreciate free code camp, You are better than many paid course on the internet, Thanks.

[@muscleinjury3331]

was just gonna buy one from udemy tomorrow....guess not. thank you so much fcc.

[@janvijasoria9289]

is this really good for beginners?

[@tejas7379]

@@janvijasoria9289 No

[@unbekannte]

@Wildan Alif R lol

[@patricialee8327]

Thank you so much for this, I'm switching from Angular to React, 7 hrs of tutorial! awesome!

[@Syntax753]

Really enjoying this course! Thanks for all the hard work that's gone into it!

[@bsal5347]

I haven't finished those two courses yet and another course already ! i will come back for sure after exams !!!

[@cheesball96]

Just out of interest, what exams do you have coming up?

[@legitMeastro]

Hhhhh hey dude we are in the same page, I study health college Exams are blocking my programming progress

[@programmerbd1486]

@@legitMeastro 🤔🤔🤔🤔 Wut

[@kedardhane.1163]

@@legitMeastro That is the biggest problem coders and programmer face. Confuse between what you want to DO (programming, hacking 😄). And what you have to DO( study school subjects 😑)

[@AdelAdel-pn1bq]

Just dont watch them all watch just one and start making projects or you will be wastin your time

[@ozz961]

THIS IS EXACTLY WHAT I NEEDED NOW THANK YOU i hope they post a react native course aswell

[@WalZKiller]

Thank you for your tutorial! I very much appreciate your effort in creating this 7-hour full React course. I hope you continue sharing your knowledge and keep inspiring others :D

[@codymccarty9327]

If your code in side of the backticks inside of global styles is all red or all blue. He is using an extention called vscode-styled-components to get syntax highlighting and intelliSense for styled-components.

[@MrTaken-tl4bw]

Thanks!!

[@tommasocastagnola2847]

Yesssssssssss exactly what I needed right now! The older one was 10 hours, less affordable

[@future_teknokrat7585]

Less affordable? Oh the irony of an extra three hours of "free"🤣🤣🤣

[@md.ahmmed8811]

NO 1. channel on youtube for COURSES

[@diogonunes2020]

You guys are the real MVP's

[@matthastings85]

Just finished! Thanks Thomas! Very helpful!

[@albertdutop670]

so grateful to have an opportunity to get new knowledge!! Thank you so much!!

[@nazarenoalt]

Very nice course and subtitled since the first time =) those of us who are learning english appreciate it

[@Ziemniaklotor]

Dziękujemy.

[@andreaspatounis5674]

Dude you are always the right video the right time

[@ismailech-cherrate]

A tresor! Thank you so much for all the efforts Sir!

[@giest95]

self note: 1:31:00 for good explanation on state set up

[@ivanyosifov2629]

Generating the API key is pain in the butt. I put some dummy data and got the key. Hopefully this is worth it

[@peregrinov]

Thank you! A fantastic course. Thank you for your effort and for your good work. You are a wonderful teacher.

[@lokeshnegi5051]

I've completed half of the course and I think I've already learned a lot.

[@eyosiyas_js]

I was thinking to buy a udemy course. Now you guys saves my money by uploading this in the right time..Thanks

[@EnesKab]

Before I start to that course, I checked the comments if this is React beginner friendly or not. I could not see any proper review, so I trusted the title of the course and started. I have spent almost 1.5 hours on this so far.. I know JS, I know backend etc. And I can assure you that this is not a beginner friendly nor intermediate, nor advanced friendly course. We are talking about what is JSX, and then immediately diving into props, components etc without any clue. Then we start to type "stuff", again without knowing anything. But on the other hand, we are talking about JS destructing meanwhile. So, if this is NOT beginner friendly, why we are talking about stuff like destructing? If this is beginner friendly, why we are NOT talking about what the heck is a component, props, states etc in advance? Why we are directly diving in ??? So heads up to anyone who is considering following this course. You will get lost in no time. If you don't believe me, be my guest and go on. You will agree with me soon or later.

[@Jbeat17]

Same here, I was so lost when he started with styled components, props, components and hooks. I would advice anyone to first look at Net ninja's React modern course since its alot more beginner friendly and he's a very good teacher as well.

[@LiveMahs]

@Upskill 101 point me to that other tutorial you found pls :)

[@LiveMahs]

@Upskill 101 traversy is clutch. I'm already a dev but trying to learn js and react to broaden my skillset. thanks for the help

[@vermusl6316]

Their teaching way is very stiff and usually almost like you're reading a book with no demonstraton. Beginners will have a hard time following up like myself used to. So I switch to learning from multiple sources on youtube and google, for me it's more effective this way.

[@EnesKab]

@@vermusl6316 I went for Net Ninja React course on KZbin. Super beginner friendly, gives you all the necessary basics in a very short amount of time. I love that guy and I have seen so many benefits out of his perfectly free courses on youtube. Highly recommended.

[@mdsaddamkhan8400]

Really yaar...these guys are really doing awesome work...keep it up so that the students who have no enough money they can learn these technology free of cost

[@adao5308]

What an incredible tut... Thank you so so much for this. 🙏 You've earned yourself a sub, awesome sir 👍

[@paulbelfrage]

If you get problems at 2:11:00 remove or comment out console.log(state);.

[@filipivendraminiguskuma5370]

i did it, but it's still getting problem, it says "Unexpected token" at this sign "". Can you help me?

[@ostap_combo]

@@filipivendraminiguskuma5370 the same error

[@josephisaac6664]

Im here from their 134 part js course and I can't seem to stop learning from them.🖤

[@andreynelepov1575]

Thanks!

[@SoulDen]

spent 3 months here and had learned more than 3 years of college

[@ebrahemhesham589]

exaggerated .... but still agree with you that the content is completely great

[@andresbolivar6959]

Second day doing the course, 1hr per day, I'm repeating every hour until I understand it lol wish me luck!

[@megh.835]

Good luck, I'm following a similar strategy :)

[@disrael2101]

Any update guys

[@CodeNight-dm2hv]

Loving the setState examples with the lamps and switches. Thank you!!

[@chromashift]

It'd be helpful to see a visual mapping of how the myriad imports & exports are relating; it's way too easy to get lost in the import/export/wrapped/styled/components ('infinite' nesting)... can't see the forest for the trees here;

[@gustavoviana5508]

Altho I already did the reactjs course on the website and with youtube tutorials, I would've love to have this when I started. Great work

[@landsfadern2]

I like how Beau pronouced Weibenfalk in the start. As a swede he should probably practice on it a bit more until he gets there.

[@marwan2920]

Daily uploads Free Helpful I really appreciate everything you are doing, stay safe, and keep killing it! Dont stop! Thank you !

[@trespasser3483]

Just finished the whole course and Dayum was it exhausting.

[@subhamdudheria9523]

Did you understand everything

[@muhammedkumsuz2727]

how did you find it

[@Abdullah-yq7jp]

Can we have a full React Native or Flutter course? There are actually none(high quality or comprehensive) on KZbin

[@ListenAlQuran]

it's miles the finest video ever and i'm simply love this kind video … thank you for share.

[@buikiem917a]

Are you serious. I just started learning react few days ago. Much thanks to you for the free course!!!

[@imranhussain8700]

This channel is awesome. React content is super awesome.

[@rennylangat]

5:11:59 Netlify changed their npm run build command to CI= npm run build

[@braydonthepirate]

tyvm!

[@WilliamBienvenu]

thank you for your amazing tutorial !! ps: love your voice

[@jaytalkss]

Was waiting this for a long time

[@unbekannte]

Thank you for this great tutorial! Greetings from Berlin!

[@Matiast9477]

If you have a different structure in your useEffect at 5:00:00 and you separated the fetch movie from the use effect your use effect shoudl look like this useEffect(()=>{ const sessionState = isPersistedState(movieId); if(sessionState){ setState(sessionState); setLoading(false); return; } fetchMovie(); }, [movieId, fetchMovie])

[@ResonantFractal]

Dropping bombs man. You guys rock!

[@srikanthchilakabathula194]

please add styled-components extension in your VS code. Because you can easy to write css in js file as well.

[@hritiksharma4944]

Please have a full course on react native with many big projects included in it....thank you for supporting the community !

[@YOGESHYADAV-vg4lt]

Hi there, I am having some issues with the project can you help me , I will be thankful

[@georga.9236]

FCC is at it again. Much love!

[@SoulPrints]

Omggg this is what I just started to learn !! Timing 💯💯💯

[@utkarshp1108]

i don't understand why this channel just have 4 million subs

[@RFICick22]

Excellent comprehensive course!!!

[@nguyendat4275]

awesome! I love tuts like this, you build everything from ground up.

[@admirmehmedovic4308]

Bootstrap + react tutorial would be a banger.

[@lumalabrian6313]

thats what we call free code camp. awesome every time

[@hosseinjafari2896]

it is great so far. love from Iran.

[@busyrand]

3:13:06 - 3:19:50 Button Component - Logic... I got stuck on this for two days, reviewing everything with a fine tooth comb because my button was unresponsive [clicked and nothing happened]. No warning signs, no IntelliSense warnings or highlights... The fix... Inside the Button Component, instead of 'onclick' it's camel case 'onClick."

[@jussipollanen1178]

Thank you

[@msundar661]

Super excited...❤️

[@AbHiShEkdAS1505]

This is an amazing refresher. Can you put a video on SVELTE

[@TheNamesJT]

4:17:16 I can't move on because my movieinfo component is giving me an error movie.directors is undefined? I even looked at the end code in project files and our code is exactly the same.

[@sreehariprathap5480]

New and better ❤️

[@jacobmartin6540]

You're a great teacher. Thank you so much.

[@malouette3991]

I followed only the half of the course and I can say already that it's very interesting and well explained. It helps me to clarify my theorical React lesson. But, I don't feel able to conceive alone a very complex website like this one. Any tips to practice on my own and become really autonomous in React?

[@SpeedBirb]

is that your squirrel in pfp?

[@chandlerchaudhary1363]

Hello Sir Thanks for this wonderful course, excited to start learning Have one question before going in- Is Functional components used in this course

[@RosasYo]

FCC been dropping some HEAT . My saves are nothing but FCC courses.

[@anindjha5925]

At 1:19:12 - we need to put return statement otherwise it was giving error. const Header = () => { return ( ); };

[@nipunanoob5801]

I tried this course until like 1:21:09 when i realized that my header component is blank and seems to occupy no space above the "Start here.". Is there something wrong with the svg files?

[@reallyhu2906]

yes the svg files have some problem. I try another svg file downloaded by myself and it shows properly

[@zinx6809]

I have similar problems with the svg. I tried more than an hour trying debugging thinking I did my usual stupid typo but found nothing. Later tried opening the svg in chrome and it didn't show anything. I suppose I'll still finish the tutorial with some other icon cuz I don't wanna just waste the time I've spent following the video so far

[@owaisali995]

For ALL THE BEGINNERS HERE. I just want you to know this is not a beginner course so if you know nothing or even just basic of react then this is not a course for you this is intermediate to advance level course. You should do scrimba react basic course before this one This guy is not gonna teach you basics of react. I know basics of JS and react but still this course is difficult for me. So before starting try to learn basic of React and JS specially ES6 modern Javascript.

[@avi12]

Please change the introduction timestamp to 00:00:00 so KZbin's timestamp extractor picks it up

[@disrael2101]

Does KZbin generates the timestamped automatically like the subtitles or it's all manually done?

[@avi12]

@@disrael2101 Both, actually If you want to see chapters within the video, it has to be provided by the uploader However, if you manage to Google something and some results will contain videos, Google may provide you in such video results auto-detected chapters that you might be interested in, and of course clicking a chapter will launch the video with the appropriate timestamp

[@bedji]

i try to make the tuto until 3:13:06 Button Component - Logic i have the button show more work but show only one thumb and with NoImage i think he coudnt find the poster_path can you help me pleas

[@ataozdamar9887]

Why someone change the fonts in ide? The lesson may be good but because of the fonts i can't read the code properly

[@monkyout]

Thanks I was looking for this.

[@owaisali995]

Do anyone have a problem with the button? My spinner is keep rotating and button is not showing with the loading condition. If I remove the condition then button shows but I have to remove the spinner then.

[@imgnl]

As a newbie, I have absolutely no idea what's going on. I looked for an hour, I don’t understand what’s going on at all. Before that, I watched other React courses and all the previous ones were different from each other! How so? Why is there no single standard in development? A little annoying. I hope I have the patience to watch and in the future there will be a little more understanding.

[@DWEthiopia]

Can we have an intermediate level React course with Redux? With a strong focus on Redux.

[@emonfromearth]

Another Blast! Love

[@ariosetiawan173]

Actually today, many Vacancy set Typescript as Requirements, this tutorial at least makes refactor to typescript showed simple thanks

[@Tentrilix1]

The font is NOT Victor Mono but it's close enough

[@tiagostit6]

How do I get my vs code to show the css tips in the JavaScript file?

[@BlenderDefender]

Could you please add the 0:00:00 Timestamp for the youtube chapters feature? Thanks!

[@reijuv6008]

Smilga is also good at react. Kudos both.

[@zaidelaymat797]

4:38 I can't find api key

[@dylansmith9240]

any one else have an issue when using the fragment aroud 2:10:00 me and my partner are both coding along and getting the same issue. × TypeError: Cannot read properties of undefined (reading 'results') pointing at the return in components/Home.js:18 pointing at the

[@ostap_combo]

the same problem..

[@dylansmith9240]

@Roo never found a fix

[@numby6091]

If you are still encountering this error, I think it may occur because of the undefined state value. I think you should write console state value. If it is undefined then you should probably check the custom hook.

[@tadaskuzminskas6876]

Have you found any solutions?

[@youpedia9617]

same...

[@notfound6714]

Here comes what I needed.

[@babykosh5415]

What you want is @58:00

[@vinuthmarasinghe3932]

Is there a big difference between 2020 vid and this one?... Thank you so much for this!!! And need react native too

[@tirtharajsen4415]

the api isnt working api isn't available now in the movie website

[@tirtharajsen4415]

@@shivani9840 yeah... Why not definitely

[@tsatsralt9112]

Seems like some tmdb accounts don't have permission to rate movies. Great course btw! really enjoyed it.

[@cybermindable]

Appreciate the content!

[@priosjaicar]

I got an issue when I wanted to use my editor to practice doing this course , the text was trying to write on java script , did not appear , for example ReactDOM.render(, document.getElementById("root") .

[@DEV_XO]

Amazing like always!!!!

[@nguyenanhnguyen7658]

Your fonts such made the following up MUCH HARDER :D