React Fundamentals - Full Course for Beginners

[@freecodecamp]

Check out our React playlist for more React tutorials: kzbin.info/aero/PLWKjhJtqVAbkArDMazoARtNz1aMwNWmvC

[@Andrii87]

0:59 - Part 1: Environment set up 6:42 - Part 3: JSX 9:37 - Part 4: Components 14:09 - Part 5 : Props 17:38 - Part 6: State 20:17 - Part 7: Lifecycle 22:30 - Part 8: Asynchronous Calls 26:28 - Part 9: Containers 29:42 - Part 10: Lists and Keys 34:48 - Part 11: Refactoring List Components 36:31 - Part 12: Forms (Input) 40:03 - Part 13: Conditional Rendering 45:35 - Part 14: Images (Loader Component) 49:16 - Part 15: Setting Up React Router 54:05 - Part 16: Setting Routes 56:55 - Part 17: Using Route Params

[@abdullahalmomin7664]

one of the best tutorials I've ever watched . I'd recommend every beginner of react to watch this video. Will be waiting for your new videos. You are awesome man!

[@dhavaljardosh]

Everything was great, I would like to recommend just one thing. To increase the font size in the editor. Was having a very hard time reading on my laptop, can't imagine if I used the iPad. But overall 10/10 for simplified teaching and great presentation.

[@mohanvamsi007]

I second that

[@americanocoffee541]

If you guys don't know how to increase the font size yourself on your computer, perhaps you should sell cars instead of trying to code. :)

[@dhavaljardosh]

Sounds like a good idea :)

[@joelgreek]

That is really good feedback...

[@bobans]

What? Very poor trolling skills!

[@joelomoglio1125]

Excellent video, been struggling to learn React, many other videos cover to much all at once, your video has the right amount to really teach the basics. Only suggestion is increase the font size.

[@candela2908]

Tremendo curso! Amigable para los dummies, conceptos claros... Estoy luchando con un proyecto de React y creo que ahora voy a poder leerlo y entenderlo por completo!

[@deepaks.m.6709]

Thank you so much for this video, team. This means a lot. You guys are awesome! :D

[@khusroosyed4860]

Started react development with this tutorial loving it !!

[@KingdomSecrets]

Am having an error at 31:52 props.list.map() error message is "map function is undefined..... Please can u unblock me. Is the code on github?

[@punkgrl325]

I'm getting the same exact error. Wish he'd provided the source code.

[@denizbalc8685]

You're the best teacher ,this video is excellent

[@frncscbñz]

It's 2021 but I want to start learning React from here to their newest tutorials. Happy coding! 🤗

[@juanmillord8878]

Thank you, with this tutorial I learned the basics and made something useful in the process. :).

[@steviecoyle]

Great beginner example. You covered everything that some videos gloss over. And to have a working React project at then end 👍🏻

[@hn031]

Great tutorial. You covered something that have been missing in my fullstack react project....

[@frankl216]

Ohh man took me a whole day to finish it but DAM . very nice. Thank you very much and GL with everything. xD

[@majorbrightside1435]

Thank you so much :) i really appreciate it *-* coding is love, coding is life

[@skyblaze6687]

nice really clear my view of each component u make them use from scratch to clear view

[@julianorjuelapelaez1239]

Really nice video man, you covered many things in such a simple and easy way to understand, you're awesome!

[@davidvalentine4889]

Just wanted to say thank you. This tutorial was awesome! The pace was really good! Learned a lot in such a short time! Off to do the 5hr one now 🙌

[@lohithakodhanda7743]

Excellent Tutorial.Loved it

[@abrahamemmanuel4906]

Nicely put... Great for beginners. Thanks for sharing knowledge...

[@eppachan]

I don't thing naming all the component file as index.js is a good idea man.Apart from that it was great!!

[@paolo-1283]

It really depends, it's confusing at first and agree with you but you notice if you follow along, when you import you don't have to type the name of the js file anymore just the folder.. Try naming your components ex: App.j inside the App folder, and import it using just the folder like: import App from './components/App/' it won't work, it will work only if you use index.js or you include the name of the js file like this: import App from './components/App/App/' so it's kinda redundant.

[@kurororushirufuru2850]

@@paolo-1283 My apologies for the heads up. In OOP style, you group related components in a directory and name them with their class/function name. In that way, you won't be having a problem with namespace, and it's easy to manage.

[@jbarriossandrea]

This course was very helpful. Thanks Ed!

[@aaryan3461]

Absolutely perfect for beginners.

[@tharunnarannagari2148]

Thanks. Great tutorial on React. Was really struggling to understand from other resources. Neatly explained each concept.

[@Vinc3n7]

Totally awesome course. I took my time and learned a bunch. Thanks so much for taking the time to put this together! This only issue that I had was that the SeriesListItem key error message was persisting. I referred to the React documentation and refactored things more like their example. From there it was smooth sailing. Here is the link in case anybody else ran into the same issue: reactjs.org/docs/lists-and-keys.html#keys

[@grovatron]

In case anyone is still having trouble after reading the documentation, this is the key sentence: "A good rule of thumb is that elements inside the map() call need keys." Instead of assigning a key to the SeriesListItem in its function, assign the key to the SeriesListItem element in the map function. "" edit: haha oops, just continued watching and saw he showed how to correct it himself.

[@joelgreek]

Awesome course btw. Though I really recommend people watching it in 0.75 speed if you want to 'code along'.

[@Rajeshkumar-bj4vj]

Thanks a lot. I got a better clarity on react components :)

[@SimPwear84]

I need more from this guy! Great leassons - clear and on point Where can I find more of his stuff?

[@musikosv]

Real nice introduction. Thanks!

[@mohamedessammorsy967]

Awsome series it was really helful, Thanks you so much

[@bmmb9905]

it's great thank you. One question. What is difference of following types of components 1.class Series extends Component {} 2.const Series = () => {return ()}

[@nicolasguarini]

with the first type (class-based component) you will able to use states, handle events, and use lifecycle methods (componentDidMount(), shouldComponentUpdate() etc...)

[@NorseMatt]

Thank you very much for this. Great job showing everything in detail, and explaining everything along the way. Please upload in a higher definition because it was really hard to see what you were typing at times, and please ensure that the font size is turned up or the focus was on your code and zoomed in please. But 9/10. THANK YOU!

[@alanstarobinski3902]

Really good tutorial especially for beginners especially to get into react quickly and right now starting using react to your next web application, or website thanks

[@rupamkundu3574]

This is an excellent tutorial and exactly what I was looking for. It would be great if the source code demonstrated in the tutorial were to be made available so that we can use it as a valuable reference.

[@Andrii87]

You should follow along, and type it yourself.

[@ruhulaminmolla436]

Really great tutorial. Thank you so much.

[@niebboycyrax]

Really good material man. Thank you very much.

[@akiij]

Great tutorial! a bit fast paced but I slowed down the speed lol. I was also wondering if FCC could teach us how to work with reactstrap & styled components :3

[@Zzzzzzzzzzzzzzzzzzzzr]

npm and npx did not work with my pc so i dowloaded yarn and it worked simple on windows 7 most of a developers time sometimes is taking up by just configuring

[@jeevanprakash4815]

Very useful for a kick-start in react.

[@rinatvaliullov3247]

What is props.list in SeriesList component? I'm confused a little... Why is not simply props.map(cb)? Timestamp - 31:45

[@snuckle]

If I'm not mistaken it refers to the Series component (class Series extends Component) when !isFetching &&

[@emekaani8873]

Great tutorial, thanks a lot.

[@antonrud]

Great tutorial. Thank you very much!

[@jamiedehuff1918]

Just finished the full video and as someone pretty new to React and programming it is pretty good as a code along React app with some API elements, just don't expect anything beyond that.. The presenter spends basically zero time explaining anything that is going on, only showing what to do. He often says phrases like "obviously we need..." and I doubt anyone who is new would be aware of what is coming next because there was near zero education. Without any background I think people would be very lost, and even with some background it is not that helpful in terms of helping you advance your React skillset (besides learning some muscle memory).

[@anoundhim4393]

YOU ARE BEASST Cool THanks A lot for this video... make it more more and more again support you always

[@patatedeoufleretour]

Really good tutorial.

[@joelgreek]

I just noticed how Visual Studio Code automatically updates import(s) when moving files between folders.

[@x0stardust-x2e]

He is using atom.

[@joelgreek]

@@x0stardust-x2e Yes? So?

[@daniellaerachannel]

great! more projects please! thanks a lot

[@katdragon]

Fantastic presentation! I was able to follow along easily and you didn't go into too much detail. It was right at the level i needed. Any chance the code is available someplace?

[@LazRammoss]

Hi friend. Good job. I have one recommendation... i would like that you manage the states in the immutable way

[@olliesish]

Rest in peace my neck from leaning over the last 30 min of this tutorial

[@alansamineedi1511]

Good Video. More Videos Please

[@deizianens]

It is great but please increase the size of your editor font and type a little slower. It is hard to keep up because you type too fast (at least for me). Thanks!

[@tomormiston6592]

Thanks for this. Any chance of a 1080p or higher version? Also why was the fetch poly-fill required, were you using IE or something?

[@Ladyhoat]

Great Course!!

[@pauljones9150]

I tried to follow along. I really did. But around 16 minutes, the small font combined with 720p screen recording did me in. I had errors, and I couldn't make sense of why the teacher was making the choices he did.

[@mdadoux]

Awesome thank you so much !!!

[@legionarius-z7x]

Was cool man

[@Jimi-bx3xf]

hello when i try to create the component for the gif loader... i got an error Uncaught Error: Loader(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. the input search is broken...

[@Jimi-bx3xf]

it's ok now i don't why i had this message...

[@brunokiafuka]

Great Video

[@johnwhite9906]

could you please advise why you have registerServiceWorker.js but I don't have, although I tried following all step-by-step in this tutorial

[@sriharijk3501]

Thanks for the upload....

[@TV.TaleCraft]

Very helpful

[@maciejpiekarski9416]

Very great tutorial but at the second part of the video the zoom of the code isn't like at the beginning so it's a little hard to see.

[@itech_review]

i need to know how you customize your Atom text editor. i mean the packages and the theme and the syntax color

[@sekonic5625]

Thank you for sharing this video. It helped me a lot. I just have a doubt, I am following the front-end course at freecodecamp and in the React section says to create a state in a component must be declared with "this.state" and you use just "state", are both ways correct? Thank you in advance. PS: Sorry for my poor english.

[@freecodecamp]

Both ways could be used depending on the situation. What is the time code where you see 'state'?

[@sekonic5625]

In the video at 18:03 the state object is created as 'state'. Maybe it´s because is not using the constructor inside the component, could be that? if the constructor is present must the state be declared as 'this.state'? That´s the only difference what I found between the video and the freecodecamp lesson.

[@SunilKumar-fh6jk]

Hey, you guys planning to upload some videos on react advance patterns? not live streams though.

[@wagolemusa3070]

Thanks so much for video

[@abhishek_nilekar]

Thank you very much...

[@85bbleite]

Thank you!

[@MrBurnyC]

Soooo good!

[@lukasfotbal]

Hey guys, I watched the whole video and was trying to code along but unfortunatelly somewhere in the middle made some mistake and never got back on the track to actually get the final code as shown. It is pity.

[@honeywaffles782]

index.js | index.js | index.js | index.js | index.js Litterally my tabs right now on Atom

[@anag2125]

Why do u install fetch? Isnt it native already? Is this tutorial too old? i'm confused...

[@Cuzinz]

is this video outdated ? or can i still learn the fundementals from here ?

[@jabaover9000]

Struggling to get props to work in the first section. It shows up as normal text and no code highlights in it as if it does nothing

[@PawanGrover]

Good One

[@emkhandigital]

The fundamental course focused more on how to building the Series App.

[@anujmishra4013]

can you make video on debugging as well

[@borys1142]

Any plans for next react tirurial?

[@whitecat1441]

great course, my only problem its hard to see the code if i watching it in mobile phone nonetheless great course

[@TakshvysDad]

Is this project on github? Please share the link

[@samidoi7071]

The content is great but I couldn't follow for more than 10 minutes without my head hurting because the video resolution and quality is very low. Could you provide us a link to a better version of this video please?

[@codingwithgokhan]

What is his youtube channel?

[@timmoon5372]

Thumbs Up!

[@gamestv4875]

My hello world doesn't render.Something must have changed seeing that this tutorial is more than a year old.

[@guilherme-g6f]

on here works normally.

[@jamiedehuff1918]

User error

[@gamestv4875]

@@jamiedehuff1918 correct , solved it

[@paolo-1283]

Great tutorial, just bad font-size, zoom it man please :)

[@04mittald]

do you have the source code?

[@aWiseCoder]

learning tons of thing .great teacher . but Video quality is not good at all . some time I took a screenshot then zoom it to understand

[@Albertmars32]

can someone provide me with the code, the quality is hurting my eyes

[@chrissabre1761]

The video quality goes up to 720, if thats what you mean.

[@porter2k7]

Could hardly see the code because of font size :( :(

[@lukasfotbal]

So this video is nice on the beginning when it does not speak so complex. but once it gets complex i am disappointed by the speed of how the guy speaking, typing and not explaining what is going on. I would definitely prefer to go slowly, explain it properly and observe possible mistakes that people may make. Overall if you want spend one hour watching it go for it but I would search some alternative, because of the above reasons

[@SunriseBusinessClub]

The fetching topic isn't a React fundamentals topic!!

[@KarlooAudi]

You are too fast dude, slow down.

[@americanocoffee541]

You ruined what could have been a very good tutorial because the font was WAY TOO SMALL!!!

[@lariskovski]

Awesome! Perfect explanation! For anyway who wants the code github.com/lariskovski/tv-series-app . There are a few tweaks because of react route v6.