9:22 first react program 11:37 to 12:47 react prog with props 49:54 field has a property 'onchange' that responds to a change in the input field..it's much like onclick..you pass in a function, like so: All functions that are event handlers can take as an argument their event. Then you'll define the function updateResponse like so (crap is the event here), udpateResponse (crap)=> { this.setState({ response : crap.target.value });
idk if anyone was able to answer your question , but at the time of this video classes were the only way that you could use state , and life cycle hooks . Currently functions can now use state .
Hello, reading some discussions about efficiency it seems that getElementById is a little bit more quicker than querySelector. But, considering that this function is executed only once and that modern browsers are very efficient, I think you can use whatever you are confortable with; in most of the cases it doesn't really matter. Probably, these differences can impact on performance if you are quering hundreds of elements per second :)
how could he not hit any error by missing "this" in his handChange()? He had : tasks: [...state.tasks, state.input] It should be with "this": tasks: [...this.state.tasks, this.state.input]
31:45 this.state is not allowed for efficiency reasons(re-render dom only if necessary)..so you gotta do this.setstate({JS object goes here } ) 37:37 but it's not recommended to change state directly(poor design - it may lead to race conditions)...so instead of passing the object to this.stestate(), we pass a function. (coz this state can take a JSobject describing what the new state should be,as an argument, but can also take a function as an argument) This function takes an old state and returns a new state ..(so in domain range notation, f: old_state-->new_state)
Wrong at 1:08:40 . That's not the reason. It's used `className` instead of `class` because that's the conventional name in JavaScript, e.g. `document.getElementById("myid").className`. Also the JavaScript keyword `class` does't conflict with JSX attributes.
@@firstname4337 This answer may help you to understand better www.quora.com/Why-do-I-have-to-use-className-instead-of-class-in-ReactJs-components-done-in-JSX-JSX-is-preprocessed-so-shouldnt-that-conversion-happen-when-JSX-is-converted-to-JavaScript
If he had used create-react-app it would have introduced a lot of things all at once - by sticking to just some core concepts he can introduce things one at a time, as opposed to having to explain a lot of auto-generated concepts. It's easier to understand things if you don't have to constantly say "we'll go over this later" And it's not like you don't see create-react app explained all the time anyway.
I feel like React is so unnervingly over-complex. Supposedly it cuts down on what you can do with just vanilla JS, in the same time, but it seems really convoluted and over engineered.
Hi Cody, I had exactly the same feelling when I started with React. I asked myself "Why to complicate my life with learning React when I can use vanilla JS?" But as I progressed further with React I found that it makes my life easier and I can write functional apps faster. Another huge advantage of React is that it helps your code remain organized as the app grows. With vanilla JS it is nearly impossible to not get lost in the code as the app grows and gets more complicated.
These CS50 courses are unbeatable, super profound and consequent, seems like Harvard is the best..far the best
probably best video ever on React basics, thanks a lot
It is the best!
yes
One of the best teacher I have ever seen
Brian is the best when explaining things
9:22 first react program
11:37 to 12:47 react prog with props
49:54 field has a property 'onchange' that responds to a change in the input field..it's much like onclick..you pass in a function, like so:
All functions that are event handlers can take as an argument their event.
Then you'll define the function updateResponse like so (crap is the event here),
udpateResponse (crap)=> {
this.setState({
response : crap.target.value });
I always love this man. I really need Brian...
Kinda gay
It's a very nice video for React. Thanks a lot, Brian.
Thank Harvard you really helped me a lot on struggling with React Js, THanks Harvard Thanks
Absolutely fantastic! Thank you for sharing this online.
That is how this course should be lectured
Dude this is too good
Really good lesson for the basics.
19:00-21:08... belissimo!
I can't hear his "Great question" anymore.
I loved it.
Same, "Good Question" was such a good thing
best react js video on world
Un gran curso , desde cuba saludos
really good video very helpful thanks very much
a perfect crash course.
Thanks a lot for giving us react course,
this is helpful ❤
thanks ❤
Brian is great
Great tutorial!! /class
This guys good
Any specific reason for using classes for react rather than functions?
idk if anyone was able to answer your question , but at the time of this video classes were the only way that you could use state , and life cycle hooks . Currently functions can now use state .
Now react also recommended to use function rather than using classes
Brian is now teaching react with fuctions. Check it out here: th-cam.com/video/jrBhi8wbzPw/w-d-xo.html
@@shilpthapak7823 yes
great intro
Anybody know the link to where the source code examples are at? Thanks in advance.
where I can find the source code? didnt find it after research. honestly really nice course!
Go Brian!!
Is it okay to start React with that
not sure we can use forEach() as it returns undefined (I tried it & it didn't work), whereas the map() method returns a new array...
Hey Brian, when you ReactDOM.render(, document.querySelector('#app')); any better or worse than ReactDOM.render(, document.getElementById('app')); ??
Hello, reading some discussions about efficiency it seems that getElementById is a little bit more quicker than querySelector. But, considering that this function is executed only once and that modern browsers are very efficient, I think you can use whatever you are confortable with; in most of the cases it doesn't really matter. Probably, these differences can impact on performance if you are quering hundreds of elements per second :)
any playlist for this lecture?
It's very good.
Cool!
how could he not hit any error by missing "this" in his handChange()?
He had :
tasks: [...state.tasks, state.input]
It should be with "this":
tasks: [...this.state.tasks, this.state.input]
31:45 this.state is not allowed for efficiency reasons(re-render dom only if necessary)..so you gotta do this.setstate({JS object goes here } )
37:37 but it's not recommended to change state directly(poor design - it may lead to race conditions)...so instead of passing the object to this.stestate(), we pass a function. (coz this state can take a JSobject describing what the new state should be,as an argument, but can also take a function as an argument) This function takes an old state and returns a new state ..(so in domain range notation, f: old_state-->new_state)
Vishnu Singh he literally said your first point a minute after timestamp was noted
Wrong at 1:08:40 . That's not the reason. It's used `className` instead of `class` because that's the conventional name in JavaScript, e.g. `document.getElementById("myid").className`. Also the JavaScript keyword `class` does't conflict with JSX attributes.
Then why not `document.getElementById("myid").class`?
@@Ken-S Because it's not a valid method.
LoL. I don't have any questions.
@@firstname4337 This answer may help you to understand better www.quora.com/Why-do-I-have-to-use-className-instead-of-class-in-ReactJs-components-done-in-JSX-JSX-is-preprocessed-so-shouldnt-that-conversion-happen-when-JSX-is-converted-to-JavaScript
class is a keyword in javascript
That piano playing at the start tho.
Only one question why didn't he use create-react-app.
If he had used create-react-app it would have introduced a lot of things all at once - by sticking to just some core concepts he can introduce things one at a time, as opposed to having to explain a lot of auto-generated concepts.
It's easier to understand things if you don't have to constantly say "we'll go over this later"
And it's not like you don't see create-react app explained all the time anyway.
46:33 (just a note to myself)
I feel like React is so unnervingly over-complex. Supposedly it cuts down on what you can do with just vanilla JS, in the same time, but it seems really convoluted and over engineered.
Hi Cody, I had exactly the same feelling when I started with React. I asked myself "Why to complicate my life with learning React when I can use vanilla JS?"
But as I progressed further with React I found that it makes my life easier and I can write functional apps faster. Another huge advantage of React is that it helps your code remain organized as the app grows. With vanilla JS it is nearly impossible to not get lost in the code as the app grows and gets more complicated.
Is it beginner friendly?
Yeah, just assumes some familiarity with the basics of html and javascript
can somebody provide lecture notes/slides
46:39
Uncontrollable laugh
Instant laugh
I found nothing at that time stamp :(
Hundred!
Would have preferred without the questions..
const time foo()
Seems like Havard is far away more better
1st
Second
First
Fourth
fifth :P
Third