React JS Crash Course

  Рет қаралды 842,480

Traversy Media

Traversy Media

Күн бұрын

Пікірлер: 576
@TraversyMedia
@TraversyMedia 6 жыл бұрын
Hey guys, if you want to learn all about React I just released a Udemy course "React Front To Back" which is great for beginners and intermediate React devs - www.udemy.com/react-front-to-back/?couponCode=TRAVERSYMEDIA
@pnwbjj
@pnwbjj 6 жыл бұрын
Just signed up for it. Looking forward to learning.
@manifestdigitalagency
@manifestdigitalagency 6 жыл бұрын
literally signed up a minute ago. Looking forward to learning from you, thank you!!
@niyongeregilbert1191
@niyongeregilbert1191 5 жыл бұрын
Looking to sign up and learn too!
@AntonioLopes-yr8ku
@AntonioLopes-yr8ku 5 жыл бұрын
You really have been a good instructor to me, and thank you very much for that, your classes have helped me a lot in my life as a developer and not only as a team leader. However, I need you to do a class about reporting using react, how to use, print an invoice report. And I wish you all the best
@nocturno7887
@nocturno7887 5 жыл бұрын
Thank you for the coupon Brad
@luanrodrigues4645
@luanrodrigues4645 6 жыл бұрын
Index: 0:46 - What is React? 1:19 - Some Advantages of React 2:53 - Virtual DOM 3:43 - Simple Application 5:05 - JSX JavaScript Syntax Extension 5:47 - What You'll learn 6:10 - Let's Code... 6:40 - Get Started / Instalation 8:15 - Create React App: ProjectManager 10:02 - React's Structure 12:03 - My App 12:56 - Projects Component 15:25 - Constructor & Props 17:44 - ProjectItem Component 23:00 - Review 23:38 - ComponentWillMount (Lifecycle Method) 25:13 - AddProject Component 26:42 - Form (Text) 27:33 - Form (Select) 29:47 - Form (onSubmit) 31:08 - Store Data Submitted 32:39 - Form Validation & Store Data 40:42 - Install Uuid (Generate Unique ID) 42:25 - Delete ProjectItem 47:25 - Props Types (Validation) 50:26 - Getting Data from Api 51:06 - ComponentDidMount (Lifecycle Method) 53:13 - jQuery Ajax Call 55:44 - Todos & TodoItem Components
@inponderland
@inponderland 7 жыл бұрын
I find the crash courses are best digested one action at a time. I'll watch it, pause it, try it myself, maybe even write some notes about why it works that way. This way I'm learning a bit more rather than just passively watching. However, this method takes like 4 or 5 hours for a 1 hour video ...
@Londonwebfactory
@Londonwebfactory 6 жыл бұрын
It took me about 5 hours with all the looking up and stuff.
@rikschoonbeek
@rikschoonbeek 6 жыл бұрын
I'm gonna try that, thanks for the tip
@inponderland
@inponderland 6 жыл бұрын
Florian Suess --> you're totally right. I have adopted this approach, but instead of a mental map I have been writing out the full outline on the first watch. pretty much the same thing, but yes I like this hybrid approach. Another strategy I like is when learning NEW technologies, I go to a couple Udemy courses and Amazon books on the subject and write out their outlines. It gives a good overall picture of what the topic will entail (and helps you solidify that understanding by seeing the topic laid out over different sources).
@AndyZoric
@AndyZoric 6 жыл бұрын
I do the same thing. then build my own app based on what I've learned
@major_stark
@major_stark 6 жыл бұрын
Thats how i work too
@bibekshakya5574
@bibekshakya5574 7 жыл бұрын
for react > 15.5 use npm install --save prop-types and import PropTypes from 'prop-types'; Projects.propTypes = { projects:PropTypes.array, onDelete:PropTypes.func}
@lilwolff
@lilwolff 7 жыл бұрын
This fixed my error, thanks a lot!
@jamesbaine1886
@jamesbaine1886 7 жыл бұрын
Thank you!
@rayaqin
@rayaqin 7 жыл бұрын
wanted to say the same thing, the guy should add it to the description or make a caption or something
@pranijshrestha8774
@pranijshrestha8774 7 жыл бұрын
bibek shakya I added `import PropTypes from 'prop-types'` and changed `React.PropTypes.array` and `React.PropTypes.func` to `PropTypes.array` and `PropTypes.func`
@dariopazminob
@dariopazminob 7 жыл бұрын
GREAT!!!
@Londonwebfactory
@Londonwebfactory 6 жыл бұрын
What I like about your crash courses are that they are fast. No boring lengthy explanations. If I need to know more then I stop the video and look it up. You're a star. Many thanks!!!
@markmendez1014
@markmendez1014 7 жыл бұрын
I love your teaching style! No bs, just straight to the point without skipping the important parts. I'll definitely be subscribing to your paid courses soon. Keep it up bro!
@13579Josiah
@13579Josiah 6 жыл бұрын
Amazing tutorial. Thank you very much for your service. Flawless video with one exception. PropTypes no longer works how you did it. You have to: npm install prop-types --save; import PropTypes from 'prop-types'; Projects.propTypes = { projects: PropTypes.array, onDelete: PropTypes.func }
@ukaszk.6444
@ukaszk.6444 6 жыл бұрын
For the refs you should use arrow functions, example from video: handleSubmit(e) { console.log(this.title.value); e.preventDefault(); } Down in the render function: {this.title = title;}} />
@hengzhiwang1805
@hengzhiwang1805 6 жыл бұрын
It is a great video for beginner, listing the most important methods of ReactJS. While watching, following each step, I run all the codes in my local laptop. Excellent.
@SahanSerasinghe
@SahanSerasinghe 7 жыл бұрын
Great tutorial. Thank you very much! Tip: Listen to this at either 1.25 or 1.5 speed :)
@GuidoPerdomo
@GuidoPerdomo 6 жыл бұрын
I'm in love with the sound of your keyboard!
@joebradshaw7674
@joebradshaw7674 7 жыл бұрын
Just wanna say I've been trying to learn react last couple of weeks and things haven't really been sticking. This however was brilliant. Actually building something that makes sense and overall skips all the general filler most other videos have. Great stuff!!! You got a subscriber here :D
@otsen82
@otsen82 7 жыл бұрын
Other great tutorial like "See me writing a bunch of code and it doesn't matter if you catch anything." Thanks for the effort.
@WorstDeveloper
@WorstDeveloper 7 жыл бұрын
Nice tutorial, I really appriciate it. However for future tutorials it would be nice to know WHY you are doing specific things and HOW they work. Right now you're mostly just saying what you're typing, which is not always that helpful when trying to understand what's going on.
@Zeay
@Zeay 7 жыл бұрын
Could not agree more, this is what separates a good teacher to a amazing teacher in my opinion
@BLiu1
@BLiu1 7 жыл бұрын
Agreed
@vex123
@vex123 7 жыл бұрын
I agree. Excellent tutorial and really appreciate it. As mentioned by others more specifically, it would be great if you could also explain the difference between this.props and this.setState() for passing and setting data between components. Also it would've been great if you also provided a simple example on how to achieve page transitions. Other than that, an excellent tutorial and intro to react JS!
@CbitBiz
@CbitBiz 7 жыл бұрын
He has some of the best guides out there. It is unfortunate people have off days. Good Dev. always supplies his work and gives out a lot of information to people.
@dimejifaluyi1759
@dimejifaluyi1759 7 жыл бұрын
this is a crash course.....not an in-depth tutorial
@Ralleabst
@Ralleabst 8 жыл бұрын
I believe bind(this) is not necessary when you use ES6 => syntax for functions.
@gunitakon
@gunitakon 7 жыл бұрын
You're right but as you can see here: reactjs.org/docs/handling-events.html They don't recommend it as it has performance issues.
@filipkovac767
@filipkovac767 6 жыл бұрын
I think he meant "public class fields syntax" - it is experimental but also recommended as for now, he could also bind in constructor = both of this options are better than "late binding"
@yotubecreators47
@yotubecreators47 7 жыл бұрын
This is the best of the best course I have ever watched every day, for other people , please try to watch it 3 times, one per week and see the difference
@thesujatamht
@thesujatamht 7 жыл бұрын
This is a great video to understand reactjs for creating apps from scratch, instead of just going through different react functions or modules, this video builds a full-fledged app and also shows an API connection which most usable app have. Thanks for posting it, really helped a lot.
@uncaughterror651
@uncaughterror651 6 жыл бұрын
Dude, keep it up making tutorials. You can help a lot of people. Yet this is the best tutorial i have ever watched. I learned a lot with just an hour. Thank you so much!
@manishpurve3747
@manishpurve3747 6 жыл бұрын
wow the best tutorial I have ever seen , no time wasting direct on point
@PROJECT17MILE
@PROJECT17MILE 6 жыл бұрын
You are simply the best instructor on KZbin. RESPECT!!
@unev
@unev 7 жыл бұрын
Note: React.PropTypes is deprecated as of React v15.5. Please use the prop-types library instead. facebook.github.io/react/docs/typechecking-with-proptypes.html
@gmagholder1
@gmagholder1 7 жыл бұрын
I have one weekend to get into react and you made it that it finally clicked. Thx a lot man and fly safe!
@muhammadidrees6650
@muhammadidrees6650 6 жыл бұрын
just bought and started the course on Udemy without watching this crash course , thank you brad! :)
@robbiesmith79
@robbiesmith79 6 жыл бұрын
Also, React.PropTypes.X has been deprecated from React as of 15.5. If you're getting this error: "React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead", the fix is simple. $> npm install --save prop-types. Let that install, then in your Projects.js file, add import PropTypes from 'prop-types'; to the top above class. Then change your line 29, 30 in this video to read: PropTypes.array, PropTypes.func. All is well after that.
@AlbertiniFitness
@AlbertiniFitness 6 жыл бұрын
You're a hero! To all of those who want better explanations for his actions.. buy his course. This is just a sample, stop complaining.
@ammarasana3822
@ammarasana3822 6 жыл бұрын
The Best ReactJs Tutorial on the KZbin!! And actually the Best Tutor!! great work!
@Abul4u
@Abul4u 6 жыл бұрын
I always searching best Crash Course on KZbin, finally I find. Thanks
@petrsvoboda7738
@petrsvoboda7738 6 жыл бұрын
Hey Brad, thanks for making this. I have 3 things to ask for and to suggest for you next videos. First: Place your microphone further away from the keyboard to reduce sound from typing. Second: If you´re not using atom´s keyword prediction, turn it off, because it only hides the lines of code under it. Also softWrap! please. If I can´t see the whole line, I have to get back in the video and watch you write the line again. Third: Explaining your workflow at the beginning would be great. For example: create all files, that you will need at the beginning and explain what file will be passing data into the master file. ProjectItem -> Projects + AddProject -> App.js Thanks Petr
@MikeCarter
@MikeCarter 7 жыл бұрын
After watching the DeleteProject section of this tutorial and the long winded passing of state up through the components I now appreciate more the point in getting to grips with Redux!
@tmbrokuroku3594
@tmbrokuroku3594 6 жыл бұрын
Great video! I find myself learning best by watching somebody do something and commenting while they are doing it, rather than conceptual explanations.
@ankitagarwal4914
@ankitagarwal4914 7 жыл бұрын
Virtual DOM concept is awesome, no one explains such clearly.
@MichaelStokes86
@MichaelStokes86 6 жыл бұрын
I love it! Just basic and simple. The best way to understand how things work is by commenting.
@juwonadaniel
@juwonadaniel 8 жыл бұрын
you are just too awesome.. have been watching most of your videos, and they are all great
@is2pidguy278
@is2pidguy278 6 жыл бұрын
Haha Yeah man he is great
@williamzhao2521
@williamzhao2521 6 жыл бұрын
I found the best way to learn these front-end frameworks quickly is to avoid pausing and looking at the video at all. Instead, I would just read his completed code and make notes on the code to understand how it works. For example, I took pieces of his code and placed it on a code pen playground and changed parameters or removed parameters just to see what each piece does. Learning this way is easier because you spend time learning how each piece affects the whole by playing around with it like a rubix cube rather than focusing on the itty gritty step by step details. To be honest, you don't need to learn step by step because you already have the completed product yourself to reverse engineer. Just play around with it like a rubix cube and learn all the details of how it works by listing the steps and then memorize it. It's a lot like learning a dance move by watching a dance. Break it down into steps that you can manage You don't need to ask "why do I need to do this step" just memorize it. Most of this framework layer stuff is all a bunch of complex steps to force people to "work" for the money.
@ibrahimpasha8229
@ibrahimpasha8229 7 жыл бұрын
Best react tutorial I have came across thus far.
@rickarddahlstrom
@rickarddahlstrom 7 жыл бұрын
I'm amazed how quick learning curve it is to react and this tutorial is super. Thanx.
@XenoX101
@XenoX101 6 жыл бұрын
Good video. One point at 44:20. Since the project item only knows about itself (does not know neighbouring project items), you don't need to pass the ID parameter, you can just make it deleteProject() { this.props.onDelete(this.props.project.id); } . This is because by definition any ID that a projectItem passes must be its own. I tested without passing the ID parameter at this lowest level and it works as expected.
@ameirahassoun9342
@ameirahassoun9342 6 жыл бұрын
I have an interview today for a front-end developer position.. one of the required technologies is react, i refreshed it here 😍 thank you much it helped a lot
@tennysonhwd2
@tennysonhwd2 6 жыл бұрын
44:28 need to use " import PropTypes from 'prop-types'; " at the top ... it moved into a different package since React v15.5.
@alexrogers1137
@alexrogers1137 6 жыл бұрын
Thanks for the crash course! Felt a little overwhelmed at points where I had to pause and look at the code for a bit. Overall, I appreciate you making this resource available for free. Thanks again!
@zielu8824
@zielu8824 7 жыл бұрын
When you must bind the method you can use it just after the state in constructor, its much easier and looks better in code for others.
@liamlababidi8311
@liamlababidi8311 6 жыл бұрын
No need to use bind you can just use an arrow function ES6
@TheUltraPingu
@TheUltraPingu 6 жыл бұрын
Thanks so much for providing the code. I've watched loads of videos like this where the code isn't available for reference at the end and it makes recreating it a ballache.
@deeraj69
@deeraj69 6 жыл бұрын
Thank you for this crash course. I was able to make a simple UI from scratch in only 2 days thanks to this.
@leeyong1048
@leeyong1048 7 жыл бұрын
I will love this person He is very good programmer and teacher for my studying Thank you Lee Yong
@daCorasla
@daCorasla 7 жыл бұрын
At 38:00 you actually are mutating state. the projects variable holds a refference to the projects array from the state object. when you push something into that variable, you are in fact mutating state.
@germangamboa3421
@germangamboa3421 6 жыл бұрын
I think in react it is more of a do not mutate this.state without using this.setSate to cement the change since it does some stuff in the background to make sure that this.state is properly updated.
@ShuzakuHD
@ShuzakuHD 7 жыл бұрын
Love the tutorial. As mentioned before, I would really appreciate if you explained why you did certain things. I found myself pausing the video quite a few times just to look things up, and re-reading the code 2 or 3 times trying to understand what was going on. Other than that the pace was great, very easy to follow along. GREAT JOB~!
@StefanEike
@StefanEike 8 жыл бұрын
Unbelievable, best tutorial I've ever seen.
@kashifkhan-pc1zd
@kashifkhan-pc1zd 7 жыл бұрын
Awesome, like it very much. Hope some other courses are also be there..Nice work
@esaiventhan
@esaiventhan 6 жыл бұрын
This is really awesome. You have structured very well for a experienced beginner from other technologies.
@Retnuh1974
@Retnuh1974 7 жыл бұрын
Thanks for the video, very helpful. I started off using Atom but made a switch to WebStorm. I am using free trial but will more than likely pay for it. What sold me was how you could switch to JSX syntax. Good stuff.
@himaro101
@himaro101 7 жыл бұрын
I say this at 1 min in, I really hope you're as good as the comments are suggesting. I'm having real issues just getting my head around the other guides. My WebDev experience is zilch and getting a good guide that actually explains what's happening in react is pretty hard to find, unlike the angular 2+ guides I was looking up last week.
@DZ-yu4kx
@DZ-yu4kx 7 жыл бұрын
Thanks for the great tutorial!!! One note: In ProjectItem you do not need to pass Id to delete it since it is available in this which you have binded
@skepticalmind2260
@skepticalmind2260 6 жыл бұрын
Great job explaining React, thanks. really easy to understand, seems most comments lack advanced javascript syntax knowledge , which shouldn't be explained here.
@anwarhamoude2637
@anwarhamoude2637 6 жыл бұрын
Hey Thanks!!! I gave this a watch and it was well worth it. It was easy to understand what you were doing and why. And I really hate watching tutorials, the keyboard clicking was really irritating but well worth the aggravation. Lot's of content in a fairly short amount of time- one step further to show how React can link to database would have put it over the top.
@omermindivanli2981
@omermindivanli2981 7 жыл бұрын
Hi Brad, I have a little question to you. I saw you can learn a bunch of techs easily. Actually, maybe, That process might be painful for you but we do not see you while you are studying. That's why it may sounds easy for us. Maybe just for a sense. My question is which steps do you follow while you are completely new for a technology? For example, you can give a short example about it. You know lots of different techs. Maybe after some years of experience, you may learn how to learn easily or efficently. Do you follow DOCS or Books?
@truptithakkar3443
@truptithakkar3443 7 жыл бұрын
Cant get anything better tutorial than this for React !! Thank you so much for such a wonderful explained !! Where can I find your other videos for React and Redux ?
@geekboy328
@geekboy328 6 жыл бұрын
I love the way your keyboard sounds !!
@realmicrobet
@realmicrobet 6 жыл бұрын
Great tutorial. I'm learning a lot going over it and pausing and trying to stay ahead when I can. The type checking in PropType didn't work for me because I think something changed in React. I had to add "import PropTypes from 'prop-types';" and leave off the "React" in React.PropTypes.whatevertype.
@JohnSmith-rn3vl
@JohnSmith-rn3vl 6 жыл бұрын
I have 10 years of web development experience and I believe VueJS will overtake react in popularity over the next year or two. And frankly I hope it takes a bit longer as it will give me an edge over developers toilling over react and angular trying to bend JSX or Typescript to their will. Last year I joined a React project that had 4 months of dev time with react but the developer left and I took over. I rebuilt the entire app in 1 month. While react/angular devs are figuring out all sorts of weird and wonderful errors, I am over here just pumping out app after app with Vue and being super productive. Now the only exception that I can think of is REALLY large companies that already have great react/angular devs. You guys should probably keep doing what you are doing there. I mean, it's not like you have much choice either but hey thats dev life sometimes. But for new apps ... check out Vue .... really ... do it ... now. VueJS already has more NPM downloads than Angular and Vue does everything react and angular can do combined but is a much easier to learn and I think a better framework overall unlike react which seems to go out of their way to do anything but provide info on how their tools work. The way you build apps with Vue is in my opinion better than using JSX (You can also use JSX in Vue if you really want to) and Vue does not restrict you like Angular (You can use a ng-factory to import a many types of angular components into Vue ... if you must). My Advice to any beginner Javascript devs is to build a TODO app with VueJS using .vue files using the "vue init webpack yourprojectname" cli command then with React and then with Angular. Do this before you delve too deeply into any one framework and see which one makes more sense to you. I know for certain after building apps in all three frameworks that I can do more in a faster period of time with Vue and yet produce identical results to React in terms of Virtual dom performance, code splitting, webpack config .... you name it and I learned it all in 2-3 months. You can also build native apps with nativescript and vue .... who cares about react native or Ionic? ... well I still like and use Cordova or Ionic but Nativescript + Vue is pretty sweet also ! You can also still build crap architecture with Vue and really the only way to get better is years of learning and practice. But if I were a beginner I would definitely want to learn how to fail as quickly as possible instead of investing a year in react or angular I could do it in a few months with Vue (If you know Javascript already). And as a seasoned web dev. I know how to build a piece of software that is light (
@BenjaminLeeds
@BenjaminLeeds 6 жыл бұрын
The last thing you said resonates well with me after watching this video. Having to send the delete function through 2 components seems like the exact definition of spaghetti code, and is a very shallow form of decoupling a 'component'. Maybe I'd get used to it, but I don't recall doing that sort of thing in my Angular experience. It seems wildly over-engineered. I'll have to look into Vue, although in my area, most places are currently hiring React devs, even though my preference so far is with Angular. I actually really enjoy Angular and even Typescript (I thought I'd hate it).
@blairsaid
@blairsaid 6 жыл бұрын
Appreciate the long rant. You will save me lots of time. And for that, it is invaluable.
@JohnSmith-rn3vl
@JohnSmith-rn3vl 6 жыл бұрын
The React spaghetti architecture I have seen in React apps is my primary reason for never wanting to go near it again. I know for a fact that many developer friends like me feel the same way about joining a company with a React project that has a few years of code under the hood. A lot of companies are going to struggle to hire devs that can come in and build things quickly with their React projects, I already see it happening a lot and I feel sorry for them if they loose their existing devs as they are in for a wild ride. But this is not good for front end devs like me either. It is going to end up damaging us if companies have problems with the front end then all of the front end tends to become a problem. Companies could end up switching back to SSR. I do like Angular and have used React and Angular each for about a year. So far every Angular developer I have spoken to speaks highly of Vue. I think it's easier to learn Vue after Angular also. Angular projects tend to be organised really well because the framework generally forces you to do it and I think Vue projects will be similar with .vue files as long as developers don't tie in slots,props,vuex too tightly and separate their components out into logical chunks of code that visually line up with the app they are building. Keep the logic for a modal inside the modal.vue file and create a animation-mixins.js or .vue for methods you want to also use in other parts of the app. Keep it simple and clearly organised from an architecture point of view so that you can explain how a few pages work to a new developer and then let them loose to play with the rest of the app. If a developer cannot explain the architecture of an app in a day or two to a new starter mid level developer then there is something really wrong with the architecture in most cases. The complexity should be contained within the methods and be mitigated with good OOP ... the complexity should not be the framework.
@blairsaid
@blairsaid 6 жыл бұрын
John Smith again great insight into JS frameworks. I have been a web developer for almost 8 years but sadly I've never really crossed the threshold from someone who can read and execute meaning I can't write for shit. I guess I was always too lazy because I simply relied on CMS like WordPress to carry the burden of building any sort of foundation. I just recently started to break back into the fundamentals via HTML5/CCS3/Bootstrap4 for completing simple websites. I recently took Traversy' Javascript Front to Back course on UDemy which has been fucking amazing. He made me realize how easy it is to do just about anything dynamic using vanilla JS and that makes a whole world of a difference to a developer (confidence booster) instead of him thinking he needs a library for this library for that. So I think once I have Javascript Vanilla down, ES5 convention to ES6 arrow functions fetch API and such all the way to ES7 I will start to unravel JS frameworks. It really seems like learning Angular and Node.js are absolute musts for any Full Stack developer but I'm excited to learn Vue after what you mentioned. In fact it might be beneficial to understand a little bit of Angular and React before going into Vue. I also think it'd be a great idea to understand PHP and Python because then I have a full spectrum of tools at my disposal for server side management. I have a huge undertaking now that I'm trying to build web apps from scratch and I gotta be honest I feel a sense of pride coming back into my being instead of just telling a client "yeah sure we can launch your website in 45 minutes we just need content". WordPress is fantastic and all, and it was built on PHP, but not fully understanding a language is heartbreaking because of how limited as a programmer you are. You really only can look at code and modify it, but you'll probably never be satisfied because you're not actually creating anything you're just editing what's already been made. This last part was a rant for any upcoming developers but I wanted to get your input on whether you think it's a good idea to learn Angular/Node/React before learning Vue or just diving straight into it. Thanks again for your time.
@blairsaid
@blairsaid 6 жыл бұрын
I think CSS frameworks like Bootstrap and Materialize and Skeleton are completely game changers because the workflow of how you write HTML is just so much more streamlined being able to enter classes right then and there without having to worry about formating or creating separate CSS files for styling. That is like the very first thing that needs to be learned is how to utilize these frameworks to streamline and make your HTML development process easier, because without the front end you truly have nothing to work with.
@mstalcup
@mstalcup 7 жыл бұрын
Thank you very much. The pace was good and I got a huge amount of valuable info to get started. I actually incorporated gulp and sass with this tutorial and it became even more fun.
@creativeplanet2820
@creativeplanet2820 7 жыл бұрын
this videos first 15 minutes are really precision as this is the most easy way to setup react I have found since searching it for nw 1 week ! :D thanks for that :) great video :*
@AnonymousJonno
@AnonymousJonno 6 жыл бұрын
These are the Atom community packages I used with this project: linter, linter-jshint, and language-babel.
@westfield90
@westfield90 6 жыл бұрын
This was definitely way above my skill set.
@edwinagik8239
@edwinagik8239 7 жыл бұрын
great teacher, simplified and easy to understand . i loved it
@WillKriski
@WillKriski 7 жыл бұрын
Thanks for this tutorial. I went through the whole thing coding along with you. It all works great.
@vytautaslozickas7353
@vytautaslozickas7353 7 жыл бұрын
Very good, fast introduction to React! It's good that I'm familiar with most concepts already because, as others mentioned, you're "flying" through the code too fast sometimes while skipping some explanations... One note BTW; At 38:00 when you said that state must be immutable and we need to overwrite it with new instance instead of changing the existing one - you actually did change the existing instance of that array by using a push method and simply re-set it on the state. The part where you reassigned it to a variable does not give you a new instance - you just saved a reference and then changed the existing instance with push(). What you should've done to get a new "clone" of that original array is use the spread operator like this: const projects = [...this.state.projects]; Same thing at 47:00 when you were splice'ing the array to delete an item.
@jhalmu
@jhalmu 7 жыл бұрын
Thank for this. Made my first lesson-project start to end.
@ermiaskidanegebre5393
@ermiaskidanegebre5393 6 жыл бұрын
guys in the PropTypes, if u encounter to an error , 'cannot read a property arrays of undefined' change this Projects.propTypes = { projects: React.PropTypes.array, onDelete: React.PropTypes.func } to Projects.propTypes = { projects: PropTypes.array, onDelete: PropTypes.func } and import at the top import PropTypes from 'prop-types';
@swidisharron9066
@swidisharron9066 6 жыл бұрын
this crash course is mazing.I like this kind of teaching style.It's easy to get into it when you are a new learner of a subject or topic.
@rennishj
@rennishj 7 жыл бұрын
This is simply awesome.Thank you for putting in the time to create this tutorial.
@linhchau2778
@linhchau2778 7 жыл бұрын
Thank you for sharing this video. This one is one of the best ReactJS introductions I have seen. I am stronger on backend development, and this video helps me grasp ReactJS very well. The only thing I have against javascript frameworks in general, and React in specific is that there is too much boiler plate code and repetitive boiler plate statements, for example import React, { Component } from 'react' is repeated in all over places. And the passing, binding and creating props, states are also pretty much repetitive. It would be nice if we have a declarative way of writing things, for example I just list: Here is a list I want to import. Here is a list of props I want to use. Here is a list of states I want to use. ... etc ... Then the library just picks those things up and builds whatever it needs to build, instead of requiring developer to write repetitive code this.setState({ }) this.props.something ... But i guess that javascript is not there yet. Hopefully the next generation of JS frameworks will be more thoughtful about repetitive boiler plate code, and really be more declarative.
@gosnooky
@gosnooky 6 жыл бұрын
Typescript + React + Mobx - perfect for a more OO approach to the view layer.
@Macadoof
@Macadoof 6 жыл бұрын
I feel like I'm the only one in the comments realizing you should learn JavaScript before watching a course on a framework written in said language. Great course dude
@JoeyXie
@JoeyXie 7 жыл бұрын
Awesome tutorial, very helpful thanks! Hope you can talk something about react router, redux, and react best practice in the following series.
@AntonioLopes-yr8ku
@AntonioLopes-yr8ku 5 жыл бұрын
You really have been a good instructor to me, and thank you very much for that, your classes have helped me a lot in my life as a developer and not only as a team leader. However, I need you to do a class about reporting using react, how to use, print an invoice report. And I wish you all the best
@jarinusgermeraad6328
@jarinusgermeraad6328 7 жыл бұрын
Great tutorial! One point of feedback, you could pay more attention to code formatting. Especially consistency here. It teaches people how to write the code in the proper format.
@naturesrilanka4037
@naturesrilanka4037 7 жыл бұрын
Awesome video. Tried everything till the end. Thanks a lot for sharing your knowledge. Keep up the good work :)
@maguilecutty
@maguilecutty 6 жыл бұрын
Thanks heaps Brad. This crasher course was super sweet. I love the 'just code through it' approach to learning. Just for the others out there who have come from a decent dev background. this took me about 2 hours to complete whilst coding along
@epic4507
@epic4507 6 жыл бұрын
woow it was so interesting it took me 6 ou 7 hour to understand and play with all these new concepts thanks you Sensei
@amlife180
@amlife180 8 жыл бұрын
Thanks for this mini-course, hope in your full course will make use of es2015
@utkavi33
@utkavi33 7 жыл бұрын
Just finished up making the react js based app from this tutorial :)
@wiktorliszkiewicz354
@wiktorliszkiewicz354 6 жыл бұрын
Now you need to import PropTypes before using it and you can skip React part like so: import PropTypes from 'prop-types'; Projects.propTypes = { projects: PropTypes.array, onDelete: PropTypes.func }
@ondrejhadrava4109
@ondrejhadrava4109 6 жыл бұрын
Thanks! You saved my day :)
@Gnoll-1337
@Gnoll-1337 6 жыл бұрын
loved the video! very informative and easy to follow along!
@madwilliamflint
@madwilliamflint 7 жыл бұрын
Damn. Just finished going through this. I'll definitely hit the 10 projects course once I recover from having dramatically overspent this month ;)
@candacejohnson9970
@candacejohnson9970 6 жыл бұрын
Jumping on the React train in 2018. Thank you for the video, it helped me get acclimated. For other developers learning: Note that proptypes are no longer a core module in react. From v15.6.0. Here's a link to it: www.npmjs.com/package/prop-types
@khizer3528
@khizer3528 5 жыл бұрын
Hye Brad it was a good crash course . One thing I am continuously missing in your tutorial is focus on code . Can you please zoom in on the editor while you coding because sometimes its very hard to understand what it is written .
@ruchirsaxena7901
@ruchirsaxena7901 6 жыл бұрын
Great Crash Course, Keep up the good work...
@Finicky9
@Finicky9 6 жыл бұрын
Coming from Angular into the React start up guide, this video got me setup in by the end of the video perfect B) (Luckily enough I use atom, and immediately went for the "create react app" package" before even starting this video)
@Xraviz
@Xraviz 8 жыл бұрын
man I love Web Deisgn
@gluedtogames
@gluedtogames 7 жыл бұрын
Fill*
@Moxertons
@Moxertons 7 жыл бұрын
fill the thrill
@gluedtogames
@gluedtogames 7 жыл бұрын
Christian Westwood his name says "Fill", turdbutt
@caBE4R
@caBE4R 6 жыл бұрын
I love you more uncle Fil, Can i have 500 bucks please
@krupukosek
@krupukosek 8 жыл бұрын
Thank you so much, best tutorial for coding in "react way"
@girishkamat
@girishkamat 7 жыл бұрын
Thanks, this was my first day on React and your video made it easy!
@spicytuna08
@spicytuna08 6 жыл бұрын
you must have a many years of experience. I found this very difficult to grasp.
@anwarhamoude2637
@anwarhamoude2637 6 жыл бұрын
React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead react/no-deprecated
@AlanSmithofficial
@AlanSmithofficial 7 жыл бұрын
Great course...Done a few other react courses but this one seems to be the best. If you also use babel as a dependency though I believe you can use 'class' rather than className. Which is great if you are modifying a bootstrap boilerplate and don't have to change all 'class' tags to className.
@dekcode2824
@dekcode2824 6 жыл бұрын
This is a great tutorial I have seen in years! Thank you so much. Time to React!!
@anwarhamoude2637
@anwarhamoude2637 6 жыл бұрын
Project crashed on delete. It was going so well then failure. More time than I'd like to spend on failure. Typing along with the tutorial wasn't much of a problem- I didn't need to look, look down and you're easy to listen to except for the keyboard clanking, hearing that clanking was really driving me up the wall.
@ashishdadhore
@ashishdadhore 6 жыл бұрын
appreciate the starter package, thanks, its very detailed and helps to understand DIY project.
@wannabephilosopher2986
@wannabephilosopher2986 7 жыл бұрын
Thanks a bunch for these tutorials. They're awesome! I was wondering why you added state to the AddProject component. I thought it was good practice to avoid adding state. I followed the tutorial, and my app works without state in that component. Also, I don't understand why you added both of the life cycle methods because they seem to be getting the same data. It would be great if you could help me understand, and thanks again for making this mini course.
@Cyber0x1
@Cyber0x1 8 жыл бұрын
Very clearly explained. You are the best.
@devashublr
@devashublr 7 жыл бұрын
very well explained course . thoroughly enjoyed it !!!!!!!
@yangshi7616
@yangshi7616 7 жыл бұрын
This video is awesome... will watch your other videos
React Crash Course 2024
3:04:36
Traversy Media
Рет қаралды 640 М.
The Best Band 😅 #toshleh #viralshort
00:11
Toshleh
Рет қаралды 20 МЛН
Quando A Diferença De Altura É Muito Grande 😲😂
00:12
Mari Maria
Рет қаралды 38 МЛН
JSON Crash Course
24:49
Traversy Media
Рет қаралды 1 МЛН
React JS - React Tutorial for Beginners
2:25:27
Programming with Mosh
Рет қаралды 6 МЛН
Async JS Crash Course - Callbacks, Promises, Async Await
24:31
Traversy Media
Рет қаралды 1,4 МЛН
Get started with React.js & React Router 6+
3:45:30
Academind
Рет қаралды 191 М.
Node.js Crash Course
2:06:35
Traversy Media
Рет қаралды 249 М.
TypeScript Origins: The Documentary
1:21:36
OfferZen Origins
Рет қаралды 297 М.
React Tutorial for Beginners
1:20:04
Programming with Mosh
Рет қаралды 3,6 МЛН
Is SolidJS the better ReactJS?
6:46
Academind
Рет қаралды 154 М.
I built the same app 10 times // Which JS Framework is best?
21:58
Fireship
Рет қаралды 2,6 МЛН
I tried React and it Ruined My Life
1:19:10
Tsoding Daily
Рет қаралды 155 М.