React in 15ish minutes - Reactjs Tutorial - [Part 1 of 3] - Codepen.io

[@lady6164]

I'm two years late. You explained this better than anyone I've watched!

[@gvbaker55]

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!

[@gradyhodge8517]

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.

[@Roqah]

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.

[@warrensadler6023]

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!

[@JohnSkoubourdis]

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!

[@Houzi888]

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!!!

[@AzulWells]

Simply awesome. Kept it simple while sharing excellent insights. You are a gifted instructor.

[@koolmo]

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.

[@ksmithbaylor]

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!

[@leonardmbibi8013]

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.

[@eshwarenm9111]

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()

[@eddiegomez4134]

DOPE! Currently learning ReactJS; this more or less summed up everything I've covered. It was a good overview. Thanks my dude!

[@okiuimonen6536]

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.

[@resistpen6582]

Man! you were super good in this video. It was clear and informative. Thanks for your efforts.

[@MrKadmi]

Hey, it's the best education video that I ever seen. Everything is so clear and easy. Thank you!

[@joegreen6209]

Really great tututorial. Clear, stays within scope. I really like how you talk your way though things as you go.

[@122223333111]

What keyboard switch are you using? really satisfying sound there. :)

[@codeChris]

Short and simple examples. Awesome, thanks for exploring the overview . It was nice to see how fast it can be implemented

[@hustshawn]

cool tuto! Thanks. Is there any videos can talk about how to set the gulp+browsersync+react env?

[@loslucky]

Thanks compadre! Much appreciated. Have you used React with WordPress for a theme or plugin?

[@alexandernst]

Where are parts 2 and 3?

[@faruzzy]

wondering the same here!

[@Savageboi506]

This video is already out of date so don't expect it to continue

[@normandubois_design]

Pretty cool video! Do you plan to continue the series?

[@stacydavis9979]

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!

[@devcoffee]

Thank you so much! I have some more coming soon, so be on the look out.

[@tinho6831]

Simple and concise I like it. Waiting for part 2 and part 3. (y)

[@elassmar]

Waiting for part 2, this was really helpful

[@matiasnunez9745]

and the next parts??

[@nowalubega1475]

Thanks! Great intro. How do I get to view part 2 and part 3? Any links to them?

[@realview101]

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..

[@JerryLikeTheMouse]

React has changed recently, and now you must also include ReactDOM in the link, and write ReactDom.render... instead of React.render.

[@neoskribe8986]

thank you.

[@shivampandya1701]

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.

[@staveinvaders]

Fantastic! Thanks so much. Got me up and running, and I've had no experience with react yet :) Really appreciated!!

[@blahwars3891]

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

[@nardbagel]

Isn't it good practice to bind the current context to "this" in the constructor, and not in the render method?

[@devcoffee]

+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!

[@nardbagel]

+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!

[@nardbagel]

+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.

[@gunnarMyTube]

Real useful for setting up the basics for a Pen doing ES6/Babel to get going with own exploration.

[@randypratt658]

Where is video #2? Your video is very well put together I would appreciate a sequel!

[@GeneAiello]

Awesome! You do a great job of explaining!! Thank you. Looking forward to your next videos.

[@Kbonefan]

You explain it really well thanks!!! Unable to find parts 2 and 3

[@ToDeoS]

What software are you using?

[@FaizanPinjari]

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

[@elliottg2496]

Great video, friendly introduction to react. Only thing I didn't quite understand was what "super" was doing.

[@cyanisis]

WHERE IS PART 2 AND THREE

[@jonaszczerepko5206]

Great video, thanks a lot for that! Can't wait to see more from you about React.

[@Danetheory]

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!

[@VikasPoonia]

+Branden Dane He is using an old version of react. So there is no ReactDOM defined in that library.

[@ShanakaMunasinghe]

This is an excellent tutorial. Thank you. Please post more React videos.

[@mcromanns]

Great one! Thanks :) Can't wait for part 2

[@mikecks]

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.

[@devcoffee]

Yeah I'll be publishing the other videos in the series here in the next few days! Sorry about the delay

[@JawsoneJason]

Wait, so how do you share a component state with another user? Is there no url to share?

[@enyceofnyc]

@Dev Coffee: hey nice video.. what's the background music?

[@dzano85]

great job! when will be part 2/3 ? can't wait ;)

[@uthreek]

Destructuring, bro! :) Nice video!

[@TravisHi_YT]

Great tutorial! Thanks for doing it in codepen too!

[@VeryBlueBot]

thanks! very VERY helpful and well explained, waiting for part 2 & 3

[@AnhNguyen-ev2vi]

Thank you very much, I like this video. When we can see the next part??

[@giovaniaraujo6749]

really nice video man !!! please, keep with those reactJS classes...thanks a lot

[@valentina531]

Beautiful tutorial - clear and helpful - thank you !!

[@UTUBESREENU]

Excellent video , especially for a beginner!

[@KentMarete]

great tutorial and great resource. Where is part 2 and 3 ?

[@BoubkerBoulahdid]

Thank you :D Still waiting for the second and the third parts.

[@yoog1]

I wonder if codepen isnt working bc i cant get it to show "Hello World!"

[@lyleclassen4698]

Thanks, Cant wait for the next parts.

[@danlee3055]

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

[@elQueFaltaba]

+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 ...

[@Klarpimier]

What's the song?

[@patelramesh546]

Its awesome. Waiting for your next video on same topic.

[@asto1801]

Video from April of this year and already out of date.. Good job Facebook.

[@devcoffee]

Yeah I agree haha it moves so fast. I'm planning on updating this video shortly

[@asto1801]

That'd be awesome.. Good video already. Nicely explained and understood. Also a nice pace. :D

[@siux94]

What exactly is out of date? :) As a beginner I find different method in every tutorial. Thanks!

[@asto1801]

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

[@deeeeeds]

Thanks for the link. I'd been working with a little React based off this video. Guess it's time to brush up... again!

[@massimosgrelli]

Thanks, really well done. Keep publishing things like this one.

[@devcoffee]

+Massimo Sgrelli Appreciate it buddy! I'll have more coming shortly.

[@LeonTruong]

I used the latest react 15.1 and it didn't work. Do you know difference?

[@thesheikhnoor]

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

[@ryanbentkowski6048]

I tried that. It doesn't work.

[@aminr3668]

Is it just me or is there no part 2 and 3 of this 3 part series?

[@Holdino_]

Are you going to do a part 2 and 3?

[@devcoffee]

Yes I'm actually working on that this week!

[@Holdino_]

+Dev Coffee, looking forward to it. Your first video was great!

[@dusan-minic]

+Dev Coffee Nice :)

[@taeyounoey7548]

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

[@devcoffee]

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!

[@stevel4411]

Nice work! Thanks for this, great information here

[@srefeis]

I think you mean "Destructuring Assignment" when you're extracting Name, Age and Bio from the object.

[@centrist3684]

Hi dude. Nice video. Please make part 2 and 3.

[@ekejma]

Really enjoyed this one, thanks so much.

[@GameCrawl]

I subscribed only after seeing the salsa. Next time, can you do some Regaetton for us?

[@devcoffee]

Haha of course man! I might even do the truffle shuffle next time, who knows!

[@tdawg6795]

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!

[@yfzhangphonn]

Really good tut, appreciated!

[@TechnicalAdda]

Nicely Explained, Where is Part 2 and 3? Please make Videos Similar way and Also Include Redux.

[@iAndrewBloody]

Nice introduction to React, thanks!

[@surestamang33]

Hello brow please make series on react. Your teaching method is quite good on react. Waiting your new video.

[@jeh02571]

Part 2 and 3?

[@sarahwright8808]

Why use this.setState? Why not just write this.state.height += 20? Good video. Just a bit confused about that.

[@camspiers]

+Billy Wright There is no magic binding between the content rendered and the variables used to render it (in this case this.state.height). So in React when you change something in state you have to "let" React know you are changing the state so it can re-render your component. If you were to mutate this.state directly (e.g. this.state.height += 20) React wouldn't know the state was changed and so it wouldn't re-render. Hope that makes sense!

[@davedurkee8853]

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.

[@DarthVanBlunder]

Awesome! Thank you very much Chris!

[@keven444]

YES I really wanted to learn react !! Just in time :D

[@devcoffee]

+keven444 Thanks for the support man. Hopefully this helps you out! Let me know if you have any questions.

[@xIts_djx]

Where is part 2!!!!

[@praphatthongprong614]

next part ? Thank you.

[@sydth2516]

Have you quit the series?

[@AgengDPrastyawan]

Very super and easy to learn explanation, Thank you :)

[@JoseRodolfo22]

Muchas Gracias Brotha! Great job On Breaking It Down For Me!

[@cfcoachkev]

First time I've heard someone calling SCSS "SCASS" 😂 But yeah thanks for the video!!! Super helpful.

[@devcoffee]

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.

[@devcoffee]

Appreciate the kind words by the way!

[@RealityCheck41]

FYI : Making the inspector into it's own window may help you out for future vids

[@devcoffee]

Yeah probably should of done this. I'll be sure to do it in the next video!

[@dudegoodman]

Great introduction!

[@mmartinez]

Awesome tutorial overview :)

[@devcoffee]

Thanks man!

[@Wudangles]

Ah, so thats how it goes. Big thanks mate.

[@timoernst]

Very helpful video, thanks! :)

[@mishramihika]

its not working with React.createClass

[@RajaRamesh1904]

Nice Explanation with Example

[@stevengallagher9872]

Include ReactDOM in the settings step. Change app render line to: ReactDOM.render(, document.getElementById('app')); // ReactDOM.render

[@bialikoer]

Excelente video!!