Dont normally waste my time commenting on video’s but as a software tester i’m constantly trying to improve my dev knowledge so see defects from a development stand point. This video was perfect and key to my progression with React.
This was really helpful. I've watched a bunch of tutorials that have skipped over the concepts of "bind" and "state", and your explanations cleared things up. Looking forward to some more videos. Thanks again!
this is the BEST explanation of React props and state that I have found anywhere on the internet. I really hope to find more from Chris... someday... even after 3 yrs.
A really good video. I like the simplicity of it. Straight to the point with code and not too much of analysis. It really helped me understood the basics just like that. Keep up the good work!
Really one of the better tuts on React out there, very concise. I'll be using this as a reference for my students. A tiny hiccup however, this.setState# is not an impure function ergo it is not mutating state. You're setting state to a new object, which is a pure function. You do fantastic work, keep it up!
Hey Chris, I've been looking around easy and short tutorial for React and now I've found it. Your tutorial is super clear and easy for someone like me. I thin I get a sense of it now.. especially after many documents drowned me... Thanks a lot for your perfect React Intro. I would like to share it with my friends.
Hey Chris! This is the best tutorial ever! I really appreciate you taking the time to make such an amazing tutorial! I can understand you perfectly, as your audio is great! Also, you know your shit well because you can easily teach a complete beginner such as myself. I really wish that you made part 2 and part 3, as I really can grasp all this complex info with the way you are teaching! I will subscribe and put on notifications in hopes that you make another video to follow in this epic series! Thank you so much and please keep sharing your knowledge with the world! I appreciate it!!!
This is great material! I work pretty heavily with React and thought this was a great overview for someone new to it all. One slight nitpick: Around 5:28, you made it sound like the parentheses are necessary to have children of a JSX tag. While I usually use parentheses around all my JSX, they aren't technically required. All you need is the single parent tag, like you mentioned. I'm definitely going to link to this video whenever someone asks me for an intro to React! Keep it up!
I have gone through a lot of videos; your has put my feet on the ground. I normally use vsCode for my assignments and face the challenge of separating it into HTML, CSS and Js. You deserve more likes and subscriptions.
+Blake Wight Yes, we could of done "this.zoomInPic = this.zoomInPic.bind(this);" inside our constructor. I'll definitely cover that practice in the next video along with some other things I kind of grazed over. Thanks for pointing it out!
+Josh Gallagher hmmm. really? I am still getting used to ES6 features. I am not sure that that would work though, because you are just declaring that the function will exist in the component and pointing to a "location" where it will execute (how it is executed it is defined later by the function you write with the same signature). I could be completely wrong though. I'd be happy to chat about it or see some examples if you have any.
You might look at Ractive.js -- Similar but much simpler without the kludges. Define a new instant of ractive dining the element to attach to , the data to be used and the template with mustache/handlebar substitutions using the data associated with the instance. JQuery/Javascript friendly to edit update data within the ractive instance, etc..
Don’t use tags guys. Styles should stay away from mark up. If you need to break something onto a second line, try wrapping it and it’s siblings in a parent container, giving that container a class (className in JSX) and applying appropriate CSS (or SCSS) to achieve the desired layout
Thanks, I do enjoy your content. I might suggest that rather than releasing bits and pieces of various series, perhaps see a series through to completion before moving on to the next one. This would be my preference, but perhaps others have different ideas.
How to make reactjs seo friendly as when we look source of the reactjs application we see javascript stuffs so can we response html markup when we request the server so bots can crawl the pages properly
Dude I'm not trollin. Love this video. Plan on watchin the rest. For rendering the full React app to the HTML page, use ReactDOM.render via the react-dom package. Best practices and such. Great video, seriously. Keep on makin the web a better place!
There are different methods of invoking React. Also, the version of React being used was quite old. It was more of a comment on the JS ecosystem being very fast paced.. people making tutorials or guides are unable to keep up. Best tutorial I've found (unfortunately not a video) is github.com/facebookincubator/create-react-app
I tried with cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js instead 0.13.0 version. Would you know why it is not working with newer version of library? Thanks
Tae Youn Oey the setup for this video is a bit dated. I uploaded a new one less than a month ago. You can follow the setup from that video and after just continue this video and it should work the exact same. Let me know if this helps!
unless i'm missing something, from combining a bit of your code with an ongoing project i had for work, i'm getting a warning saying that apparently React.render is now deprecated and that one should should use ReactDOM.render from ReactDOM module instead
+Daniel Lee Yes, He is using version 0.13, in which the react object had the render method, now on 0.14 and v15, you would need to 'import React from 'react'' and 'import ReactDOM from 'react-dom'' to make it work ...
Yeah when I was working on a project our team would always get confused if we were talking about SASS or SCSS. So we coined the term "SCASS"! Sounds weird but it helps differentiate.
Tried to follow the video, ran into a problem at the 9 minutes mark. I cannot see the profile pros when I console log this, and nothing is rendering when I tried this.props.name. Maybe profile is not made into a props somehow? here is the link codepen.io/deflex757-the-styleful/pen/gJrjMW?editors=1010. Please let me know what is going on, thanks!
As mentioned already, you must add both CDN links. They are found here: reactjs.org/docs/cdn-links.html I missed that and spend 10 minutes looking for a typo that didn't exist. Thank you for the tutorial.
![[2017] React Tutorial for Beginners - Codepen.io](http://i.ytimg.com/vi/ZnRFerIP8aA/mqdefault.jpg)
![[2017] React Tutorial for Beginners - Codepen.io](/img/tr.png)
![[2017] Vue.js in less than 30 minutes for beginners - Tutorial - 2.0](http://i.ytimg.com/vi/VPUdtEf3oXI/mqdefault.jpg)
I'm two years late. You explained this better than anyone I've watched!
Dont normally waste my time commenting on video’s but as a software tester i’m constantly trying to improve my dev knowledge so see defects from a development stand point. This video was perfect and key to my progression with React.
This was really helpful. I've watched a bunch of tutorials that have skipped over the concepts of "bind" and "state", and your explanations cleared things up. Looking forward to some more videos. Thanks again!
this is the BEST explanation of React props and state that I have found anywhere on the internet. I really hope to find more from Chris... someday... even after 3 yrs.
Simply awesome. Kept it simple while sharing excellent insights. You are a gifted instructor.
A really good video. I like the simplicity of it. Straight to the point with code and not too much of analysis. It really helped me understood the basics just like that. Keep up the good work!
Really one of the better tuts on React out there, very concise. I'll be using this as a reference for my students. A tiny hiccup however, this.setState# is not an impure function ergo it is not mutating state. You're setting state to a new object, which is a pure function. You do fantastic work, keep it up!
Hey Chris, I've been looking around easy and short tutorial for React and now I've found it. Your tutorial is super clear and easy for someone like me. I thin I get a sense of it now.. especially after many documents drowned me...
Thanks a lot for your perfect React Intro. I would like to share it with my friends.
Hey Chris! This is the best tutorial ever! I really appreciate you taking the time to make such an amazing tutorial! I can understand you perfectly, as your audio is great! Also, you know your shit well because you can easily teach a complete beginner such as myself. I really wish that you made part 2 and part 3, as I really can grasp all this complex info with the way you are teaching! I will subscribe and put on notifications in hopes that you make another video to follow in this epic series! Thank you so much and please keep sharing your knowledge with the world! I appreciate it!!!
This is great material! I work pretty heavily with React and thought this was a great overview for someone new to it all. One slight nitpick: Around 5:28, you made it sound like the parentheses are necessary to have children of a JSX tag. While I usually use parentheses around all my JSX, they aren't technically required. All you need is the single parent tag, like you mentioned.
I'm definitely going to link to this video whenever someone asks me for an intro to React! Keep it up!
I have gone through a lot of videos; your has put my feet on the ground. I normally use vsCode for my assignments and face the challenge of separating it into HTML, CSS and Js. You deserve more likes and subscriptions.
Thanks a lot! I have been going through a lot of tutorials and this one covered the basics faster than any other, very clearly and concisely.
Really great tututorial. Clear, stays within scope. I really like how you talk your way though things as you go.
Short and simple examples. Awesome, thanks for exploring the overview . It was nice to see how fast it can be implemented
FOR FUTURE VIEWERS :
Quick add both React and React DOM, make sure React is added before the ReactDOM CDN. Change React.render() to ReactDOM.render()
DOPE! Currently learning ReactJS; this more or less summed up everything I've covered. It was a good overview. Thanks my dude!
Man! you were super good in this video. It was clear and informative. Thanks for your efforts.
Hey, it's the best education video that I ever seen. Everything is so clear and easy. Thank you!
Pretty cool video! Do you plan to continue the series?
Waiting for part 2, this was really helpful
Repeating everyone else, but this is a great introduction to React and a great insight into a little what the language is about. Thank you!
Thank you so much! I have some more coming soon, so be on the look out.
Simple and concise I like it. Waiting for part 2 and part 3. (y)
Real useful for setting up the basics for a Pen doing ES6/Babel to get going with own exploration.
What keyboard switch are you using? really satisfying sound there. :)
Fantastic! Thanks so much. Got me up and running, and I've had no experience with react yet :) Really appreciated!!
cool tuto! Thanks. Is there any videos can talk about how to set the gulp+browsersync+react env?
Where are parts 2 and 3?
wondering the same here!
This video is already out of date so don't expect it to continue
Destructuring, bro! :) Nice video!
Great one! Thanks :) Can't wait for part 2
Great tutorial! Thanks for doing it in codepen too!
Great video, thanks a lot for that! Can't wait to see more from you about React.
Where is video #2? Your video is very well put together I would appreciate a sequel!
Awesome! You do a great job of explaining!! Thank you. Looking forward to your next videos.
This is an excellent tutorial. Thank you. Please post more React videos.
and the next parts??
Isn't it good practice to bind the current context to "this" in the constructor, and not in the render method?
+Blake Wight Yes, we could of done "this.zoomInPic = this.zoomInPic.bind(this);" inside our constructor. I'll definitely cover that practice in the next video along with some other things I kind of grazed over. Thanks for pointing it out!
+Dev Coffee You bet. Great video, I had no idea about the destructing feature in ES6. I will definitely be tuning into the next one!
+Josh Gallagher hmmm. really? I am still getting used to ES6 features. I am not sure that that would work though, because you are just declaring that the function will exist in the component and pointing to a "location" where it will execute (how it is executed it is defined later by the function you write with the same signature). I could be completely wrong though. I'd be happy to chat about it or see some examples if you have any.
Thanks! Great intro. How do I get to view part 2 and part 3? Any links to them?
You might look at Ractive.js -- Similar but much simpler without the kludges. Define a new instant of ractive dining the element to attach to , the data to be used and the template with mustache/handlebar substitutions using the data associated with the instance. JQuery/Javascript friendly to edit update data within the ractive instance, etc..
Thanks compadre! Much appreciated. Have you used React with WordPress for a theme or plugin?
React has changed recently, and now you must also include ReactDOM in the link, and write ReactDom.render... instead of React.render.
thank you.
Thanks, Cant wait for the next parts.
Excellent video , especially for a beginner!
great job! when will be part 2/3 ? can't wait ;)
Beautiful tutorial - clear and helpful - thank you !!
thanks! very VERY helpful and well explained, waiting for part 2 & 3
You explain it really well thanks!!!
Unable to find parts 2 and 3
Its awesome. Waiting for your next video on same topic.
really nice video man !!! please, keep with those reactJS classes...thanks a lot
Great video, friendly introduction to react. Only thing I didn't quite understand was what "super" was doing.
Don’t use tags guys. Styles should stay away from mark up. If you need to break something onto a second line, try wrapping it and it’s siblings in a parent container, giving that container a class (className in JSX) and applying appropriate CSS (or SCSS) to achieve the desired layout
Thanks, I do enjoy your content. I might suggest that rather than releasing bits and pieces of various series, perhaps see a series through to completion before moving on to the next one. This would be my preference, but perhaps others have different ideas.
Yeah I'll be publishing the other videos in the series here in the next few days! Sorry about the delay
Thank you :D Still waiting for the second and the third parts.
Very good tutorial. But I have a question.
How could I pass dynamic value ?
I use PHP and want to pass values just like you did statically.
Nice introduction to React, thanks!
Nice work! Thanks for this, great information here
Really enjoyed this one, thanks so much.
Thanks, really well done. Keep publishing things like this one.
+Massimo Sgrelli Appreciate it buddy! I'll have more coming shortly.
WHERE IS PART 2 AND THREE
Wait, so how do you share a component state with another user? Is there no url to share?
YES I really wanted to learn react !! Just in time :D
+keven444 Thanks for the support man. Hopefully this helps you out! Let me know if you have any questions.
great tutorial and great resource. Where is part 2 and 3 ?
Really good tut, appreciated!
Thank you very much, I like this video. When we can see the next part??
How to make reactjs seo friendly as when we look source of the reactjs application we see javascript stuffs so can we response html markup when we request the server so bots can crawl the pages properly
Is it just me or is there no part 2 and 3 of this 3 part series?
Dude I'm not trollin. Love this video. Plan on watchin the rest. For rendering the full React app to the HTML page, use ReactDOM.render via the react-dom package. Best practices and such. Great video, seriously. Keep on makin the web a better place!
+Branden Dane He is using an old version of react. So there is no ReactDOM defined in that library.
Are you going to do a part 2 and 3?
Yes I'm actually working on that this week!
+Dev Coffee, looking forward to it. Your first video was great!
+Dev Coffee Nice :)
Hi dude. Nice video. Please make part 2 and 3.
I wonder if codepen isnt working bc i cant get it to show "Hello World!"
I subscribed only after seeing the salsa. Next time, can you do some Regaetton for us?
Haha of course man! I might even do the truffle shuffle next time, who knows!
What software are you using?
Great introduction!
Video from April of this year and already out of date.. Good job Facebook.
Yeah I agree haha it moves so fast. I'm planning on updating this video shortly
That'd be awesome.. Good video already. Nicely explained and understood. Also a nice pace. :D
What exactly is out of date? :) As a beginner I find different method in every tutorial. Thanks!
There are different methods of invoking React. Also, the version of React being used was quite old.
It was more of a comment on the JS ecosystem being very fast paced.. people making tutorials or guides are unable to keep up.
Best tutorial I've found (unfortunately not a video) is github.com/facebookincubator/create-react-app
Thanks for the link. I'd been working with a little React based off this video. Guess it's time to brush up... again!
Very super and easy to learn explanation, Thank you :)
Awesome tutorial overview :)
Thanks man!
Ah, so thats how it goes. Big thanks mate.
Awesome! Thank you very much Chris!
I tried with cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js instead 0.13.0 version. Would you know why it is not working with newer version of library? Thanks
Tae Youn Oey the setup for this video is a bit dated. I uploaded a new one less than a month ago. You can follow the setup from that video and after just continue this video and it should work the exact same. Let me know if this helps!
Very helpful video, thanks! :)
I used the latest react 15.1 and it didn't work. Do you know difference?
Same thing happening for me so I ended up using the same version as in the video. cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js
I tried that. It doesn't work.
Hello brow please make series on react. Your teaching method is quite good on react. Waiting your new video.
unless i'm missing something, from combining a bit of your code with an ongoing project i had for work, i'm getting a warning saying that apparently React.render is now deprecated and that one should should use ReactDOM.render from ReactDOM module
instead
+Daniel Lee Yes, He is using version 0.13, in which the react object had the render method, now on 0.14 and v15, you would need to 'import React from 'react'' and 'import ReactDOM from 'react-dom'' to make it work ...
Nicely Explained, Where is Part 2 and 3?
Please make Videos Similar way and Also Include Redux.
@Dev Coffee:
hey nice video.. what's the background music?
FYI : Making the inspector into it's own window may help you out for future vids
Yeah probably should of done this. I'll be sure to do it in the next video!
Nice Explanation with Example
Muchas Gracias Brotha! Great job On Breaking It Down For Me!
I think you mean "Destructuring Assignment" when you're extracting Name, Age and Bio from the object.
Great video!
First time I've heard someone calling SCSS "SCASS" 😂 But yeah thanks for the video!!! Super helpful.
Yeah when I was working on a project our team would always get confused if we were talking about SASS or SCSS. So we coined the term "SCASS"! Sounds weird but it helps differentiate.
Appreciate the kind words by the way!
Tried to follow the video, ran into a problem at the 9 minutes mark. I cannot see the profile pros when I console log this, and nothing is rendering when I tried this.props.name. Maybe profile is not made into a props somehow? here is the link codepen.io/deflex757-the-styleful/pen/gJrjMW?editors=1010. Please let me know what is going on, thanks!
What's the song?
Thank man! great overview! :)
Dude want to do an updated walkthrough right now?
We could do a zoom. I'm about to go live
very helpful mate!
next part ? Thank you.
Very well Explained..Thank you!
Hi
i really enjoy this video!
thanks a lot
Awesome video, thanks
As mentioned already, you must add both CDN links. They are found here: reactjs.org/docs/cdn-links.html
I missed that and spend 10 minutes looking for a typo that didn't exist. Thank you for the tutorial.
Great tut.