[2017] React Tutorial for Beginners - Codepen.io

[@kadiroelemo7585]

You are an excellent teacher. Of all the React.js videos that I watched, nothing is as clear and simplified as this one. After much struggles, now I have gotten the foundation. Thank you for making this one for me.

[@nicholasstenbeck8539]

I've been looking around for a way to start learning React for a while and this video has helped me more than any other resource I found. Thank you for making this; I now feel like I have a basic grasp of how to create something of my own in React.

[@riklamers5280]

Give this man a lifetime free coffee supply! Thanks for the clear explanation looking forward to the series and other video's!

[@robertglover8022]

Chris, i've been at development for a while. You have a casual demeanor about instruction however, you are one of the most effective teachers i've ever experienced. I've read a few not-so-favorable comments here but they will regret it if one has intentions of making it in React. Concise, with examples, execution and delivery. That's quite a combination! Good luck in your future and keep up the most outstanding work. RL Glover

[@steveswanson6280]

Just started seriously looking at using React, and this video definitely gave me what I needed to be interested in learning more. Kudos.

[@willgelder6191]

Awesome, and very concise demo. Props for covering the material as fast as you did and still have everything make sense.

[@RunForresRunnn]

The usage of Codepen made it fun and easy to code along! Smart move. Subscribed and looking forward for more videos like these. Keep up the good work!

[@caseytrombley4807]

This is a good tutorial for people that know how to code and don't need to have their hand held. Thanks!

[@Rashomon69]

Yeah, for a total noob to React who wants to see what the syntax and structure is like, this tutorial is spot-on.

[@digigoliath]

Thank you very much for a fantastic introduction to REACT. Very well explained & I think I am finally beginning to understand how it works!

[@dennysam829]

Amazing video from the scratch to get a basic understanding of React. This will get you through all the react terminologies etc. Plus you will know how things work in it.

[@pirxie1127]

Holy Linus, you are the extraordinary programmer and teacher! I love the way, that you explain the code!

[@ccordry33]

Hey I like the video - one thing: the react docs recommend binding the function to this inside the constructor, so that might be a best practice. `Class HelloWorld extends React.Component { constructor(props) { super(props); //your state setup this.toggleColor = this.toggleColor.bind(this); } // rest of code }`

[@devcoffee]

Caleb Cordry yeah this was something I was going to cover in the next video but come to think about it I probably should of gone over it in this video. Thanks for pointing that out!

[@HardwareAddiction]

It confuses me as to why you even have to bind it. I know what bind does.

[@joaofilipearaujo]

You can even bind directly in the function declaration: toggleColor() { ... }.bind(this);

[@azikkii]

Yeah I like to keep the binds in the constructor function too. Seems a bit easier to read and more organized if you have all of your methods defined in the constructor.

[@8gentile]

Nice!

[@josiahschaefer3338]

I've been a bit intimidated by some of these JavaScript frameworks before this, but after watching your video I feel much more confident in diving in!

[@computersciencevideos4010]

Amazing video, way way better than many courses that ask money to teach React.

[@funxiobolic]

Coming from Angular background and wanting to learn React, I found this video to be a great starting point. Thanks!

[@whatsthisish]

I love that you show why things arent working as you go along.

[@8gentile]

Some people commenting here are just devSnobs. For a 24 minute video, this is an EXCELLENT intro to React. He covers a ton of stuff, it's very dense. It's a video! You can pause it and (should) look things up if you have questions. Geez. Feels like stackoverflow on here.

[@fvelcker]

I think your example is brilliant. When you don't really know how React works, there is almost some kind of suspense : "WTF is doing with these colours name on a red background !?" and then the input arrive "aaaaaaaah !! excellent !" Anyway, thanks it is a very good and clear introduction.

[@myvocalincite]

Just getting started with React and this was very helpful. I'm only really knowledgeable in HTML and CSS, but I feel it's time to step up my webdev game. Thank you for this tutorial!

[@kennbreece443]

Love your stuff - I'm mostly a backend guy, but your videos helped me get off to a great start with Vue.js 2.0 and this was a really good intro to React. Really wish you'd do more, but I get it can be tough to have the time to put in with a full time job.

[@Lollumad]

welcome back, man look forward to learning from your videos

[@devcoffee]

Thanks bro, hope you enjoy!

[@Amir-]

Awesome tutorial!! Thank you. Not too detail and not too fast, just perfect! looking forward to your next videos.

[@ezekieltojoshan]

I hated React until now. Great vid dude! Most of my work those days is about making dinamic websites, i still using angularjs and node/express/mongo to build api backends. Thanks.

[@wengeance8962]

I see two render() methods hes using in the example at 4:56. Are these the same render methods pulled from the extended object?

[@王騰泓]

Nice tutorial, but my chrome and firefox went wrong from 20:26. The input value onchange part. I can't going on, 'cuz the textfield if fixed. And I can't type any color that I want to change.

[@14jasminenguyen]

Wow, great video and easy to follow! Can't wait to see more!

[@keithcarrillo8238]

Hey great vid, just wondering how are you able use 'this' and props without binding this and props not being used in the constructor?

[@orlandodejesushurtadovalde8732]

Hello I'm really new with React and webpack and after a few days already manage to set up a functional working environment. Now I'm stuck in design issues since I would like to create a 960 wide grid separated into 12 columns with 15 gutters. Then start by creating a 100% high section where you center an image on an 80% white background versus a red main color. In advance grateful for any help or tip that is offered

[@PixyTech]

about toggleColor funtion. You can write it as an arrow function like this: toggleColor() => {...} .And you do not need to bind context in that case.

[@pupdoggify]

love the way you teach!!! more than that, I love your personality!! keep up the great work bud!

[@devcoffee]

Paul Davis thanks so much for the kind words! Be on the lookout for another updated react tutorial

[@cortneythomas4664]

This is fabulously well explained. Thanks for the clarity!!

[@glorytoukraine8817]

Thanks for great and extremely clear description of react basics. Can't wait for new videos! Also would be cool to see a video about redux, the thing I still can't get alive in my head. I believe, with your video I will finally get it. Also want to notice that you catch me with you joke, was LOL : )

[@devcoffee]

Quantum Robin Redux is definitely going to be a future video! And glad that the joke got you! Thought I didn't sell it well enough

[@glorytoukraine8817]

I have immediately started moving touchpad and seeking the timeline of youtube player )) Looking forward to see more from you, best regards!

[@whome1319]

Wow great video, I was so confused with the older videos on react tuts, not using classes, and constructors etc & binding, if you have more time please make a in depth react.js videos, thanks!

[@devcoffee]

I'll be making a series where I build a puppy listing app with React! That should be out in the next few weeks so stay tuned!

[@drkgumby]

Looking forward to this!

[@денисМороз-ь5и]

thank you a lot man! i was search normal tutorial in russian lenguage, but did not find it will waiting for new videos!

[@davidcoe8132]

Thank you. Within toggleColor, how come console.log(this) is undefined, however this.setState works?

[@ickimadrasi8965]

Will you ever put out a comprehensive React course, I have been waiting for part 2

[@ramchandea713]

superb explanation in layman terms! highly recommended

[@SergioArroyoSailing]

Thanls alot man! I was looking on how to setup CodePen for REACT! thanks so much! :D

[@devcoffee]

Sergio Arroyo dude want to join me on a live stream to learn new things

[@SergioArroyoSailing]

oh and awesome tutorial for beginners! great way to get your feet wet in REACT! :)

[@mohamadalsioufi6993]

It was an amazing tutorial to start with! Thank you so much! I tried to add transitions to stylObj to make changing the color smoother, but it did not work any help ?!

[@devch1094]

Hi brother your code skill so awesome,and I like it,could I know when there are two types of color array ,how to run that couple of arrays,as an example if first array running for 3 minutes,after second array running for 3 minutes and repeating in same div tag?

[@StockDC2]

Great video. Nice and concise while covering all of the fundamentals. Thanks!

[@jozefvalverde5978]

really helpful man!!! i finally understood react. Cheers from Peru.

[@shareali4968]

That was awesome bro. Keep posting more videos on React with new examples. If possible make a PLAYLIST on React. Please........

[@PeteRoCC214]

Some odd reason my background color didn't render. I followed your instructions. could it be my computer? Which one of your other videos teaches life cycle methods??

[@jameslemayian7610]

Short and to the point. Really nice stuff.

[@isospeedrix]

What's the difference between this.handleClick}> and Also, when do you need to use this.handleClick = this.handleClick.bind(this); I did my stuff without using bind but you said you have to use bind or else doesn't work. Thanks.

[@hofimastah]

Hi, Great series but I have one question. Why first this doesn't point to the component and 2nd does in: onClick={this.toggleColor.bind(this)} ?

[@Frank2tek]

Best React intro video ever !

[@Kaiyes_]

When is your Course coming up mate ?

[@gerard4317]

First of all thank you for your tutorials, you have been really helpful. I just wanna ask, is there a way you could make a video explaining how to upload files, with React? Thank you

[@generosalitton9017]

Thanks for this video! I finally understand React! Keep it up!

[@davedurkee8853]

Excellent teaching method and pace. A+

[@this.channel]

After watching the VueJS series, this is quite easy to pick up.

[@Baba-so6fh]

Do you recommend any good books for learning React with beginners in mind? Thanks

[@fronbasal]

Omg dude, thank you so much! Gonna watch it shortly :)

[@devcoffee]

Thanks so much for supporting the channel! There will be a lot more coming soon.

[@josedariosanchez990]

Excellent introduction to React. Thanks so much!

[@tonycarbetta1497]

Great video ! Very quick and to the point, i like it!

[@rosh_plays_guitar]

That made it so clear. You sir are a great teacher!

[@veerareddy162]

OMG such good tutorial Good experience may i know when u are making this type of videos on redux tooooooo

[@bikashkatwal2461]

This was so helpful to get the gist of React. Thank you so much

[@DavidKarlsson]

Hey Chris, have you tried out Vue? I haven't used react since I tried it in February so thanks for the update.

[@devcoffee]

Yeah I've used it! I like it quite a lot. I'll be doing a tutorial over it in the next couple weeks!

[@DavidKarlsson]

Awesome. Do you see some benefits to using React over Vue?

[@edinchez]

+Dev Coffee Please do beginner Vue 2 videos ASAP! I'm really looking forward to starting to use it as a beginner and I really like the way you explain things.

[@CodyShipley]

Good stuff, man! Very concise, I dig it B)

[@lukeayres511]

Excellent video, thank you for making this free.

[@koolmo]

Hello Thanks for your video, I wonder if you could do a todo list with React & Redux.. because your tutorial is way better than any of the videos out there.. Thanks again,

[@devcoffee]

Yes! I do plan on using React & Redux with making a puppy listing app. Hopefully I will have that up in the next couple weeks.

[@rajivtandon1872]

Very Nice Video. We want more video with such nice Explanation. Thanks

[@gonza-h5v]

do you have the code? It will be cool for fix some typing errors

[@pikachu5223]

Hey thanks, can you tell me which is the name of that keyboard?

[@devcoffee]

Kali 33 das keyboard! It’s the best!

[@pikachu5223]

Dev Coffee i have the professional, but my keyboard not sound like yours

[@gjcarrow]

Weren't you already accessing the "props" object before you wrote the constructor function, and passed it the props object, then called super(props)? I was wondering why we need to do that if you've already got access to that object. I hope what my question is makes sense.

[@HardwareAddiction]

It's because he overrode the constructor method. He had to invoke `super` in order to replicate the original constructor of a component class and only then, add a custom logic.

[@codingwithsam8615]

Hey all, check out my new React/Redux/Firebase tutorial here: kzbin.info/www/bejne/lYGyk2Sbd92ep6s

[@felixchanthapanya2912]

Nice Tutorial :) What's the name of the song at the end of your videos ?

[@devcoffee]

Eiffel 65 - Blue (KNY Factory Remix)

[@felixchanthapanya2912]

Thanks :)

[@vexjack]

Your video really help this newbie here... hehehe... Thanks a lot! You really got me there @2:38 XD

[@nortonnnantikill403]

Thank you for making React easy to use on Code Pen

[@devcoffee]

NortoNNN! Anti Kill going to post a new react video next week!

[@metric152]

This was a good intro to react. Still not a fan of mixing html into my js, especially when you have to keep passing the scope, but that's what the kids seem to like these days.

[@darrensw777]

Good explanation until the middle of the video, as it gets more complex you seem to speed up - reverse that trend and you'd make an awesome teacher

[@azikkii]

I followed it well and just started React a couple days ago. Really good at explaining things quickly and efficiently. I think he's trying to keep the video a certain length so it's hard to go through every little detail. The whole concept of state is pretty complex and hard to go over everything in such a short time.

[@DuckieMcduck]

For 24 minutes this was a very good introduction to the material. It's better accompanied with actual practice and, well, documentation. The guy can't do miracles.

[@tonycarbetta1497]

I actually liked that he went fast...

[@DevSprout]

The overall topic isnt entry level, so IMO the speed was appropriate for anyone who already knows js and wants to pickup react basics quickly.

[@MylesGmail]

I think he did great. He didn't waste any time n he was concise.

[@morganm5201]

Good stuff, man! Wishing I wasn't chained to Angular at work...

[@RaxIsBlurx]

Hey there, nice video :) Just wanted to check on the componentDidMount and componentWillMount. Wouldn't componentWillMount run before the render and componentDidMount run after the fact its rendered and bound to the html instead, got a little confused when I heard that, just starting on react myself seems to be great :) Waiting for you next videos on React :D

[@HardwareAddiction]

I think he got it wrong, so yea.

[@thulasiramg246]

nice explanation dude...,can you please explain bit more in depth like routing and APIs integration

[@PaulKevin]

I really enjoyed this video. Thank you

[@xgqfrms]

👍very good demo & 😄thanks a lot!

[@marshwiggleme]

HI!! This is a great Tute! Its above my ability right now though. Where to start in being successful?? HTML->Java->React?? I dont know all of the terminolgy. I am a beginner beginner and its hard to know where to start :-)

[@thedeveloper4207]

Learn HTML, CSS, JavaScript and then React. just check up w3schools.com

[@mekaseymour1784]

This is super helpful. Thank you!

[@FrappuccinoMe]

HES BACK

[@devcoffee]

Haha happy to be back man!

[@Spaggelaar]

Nice video, thank you! Learned a lot :D

[@kahmad3428]

where is part 2 ?

[@gravityarm9240]

There are codepee??

[@jakallergis]

Hi there Chris, thanks for the great tutorial! I'm a bit confused tho. I did exactly what you did but mine doesnt loop through every item on the colorArr. To be specific, it makes a pause at yellow as if it went through lightblue silently and then restarts to red. I think i can understand why this is happening, but what i dont get is why yours is looping through all the items correctly although we have the same code. My version of your code: codepen.io/jakallergis/pen/xgEeLQ

[@devcoffee]

Thanks so much for watching. The problem your code has was that you weren't setting state in your else statement. So the last color in the array will never be active. Here is an example of it working: codepen.io/DevCoffee/pen/wgoayj [Lines 32 - 34]

[@jakallergis]

Oh! I knew this was my problem, I just didnt see that you copy-pasted the state change part and thought that you had the same broken code as me and was wondering why yours is working lol. Thanks for pointing out ;)

[@ShampooWow]

Awesome video! I like it

[@maxiequa567]

quality! look forward to the rest of series.

[@oshoshoshoshosh]

Thanks dude, really nice tut

[@ensorubenmamanicruz8680]

Really good, thanks for the video :D

[@ConquerJS]

Wait so this puppy shop tutorial has been canned? :(

[@devcoffee]

ConquerJS no it's still on the agenda!

[@JayWeight]

So is there an update to this? Would love to see it.

[@MarcoCarmonaT]

Thank you! This is very helpful.

[@KK-wd5nc]

nothing gonna display ...whats d problem..???

[@joedanielsw]

Very helpful video. Thank you!

[@badechanti]

very nice sir. thanks you very much spending time

[@samirmujawar9703]

very nice to get started with !!!

[@laurenmastroni5609]

You are a great teacher thank you!!

[@eihcirarobmas3554]

That was really helpful! Thanks

[@dastgirakhtar9782]

nice , thanks for such great tutorial