The Ultimate Introduction to ReactJS [Part 1] - Building React From Scratch

Jordan [ @AlwaysBCoding ] and Will [ @willpiers ] teach you how to become a pro at ReactJS. In part 1 of this ongoing series, we give a brief introduction to the current ecosystem of javascript frameworks. Then we build a game of tic-tac-toe from scratch using no libraries only raw Javascript. We walk through the limitations of our current build and refactor the code into a similar model that React itself uses. We walk through the limitations of that approach and finally introduce React itself into the fold, and show how powerful React is for building stateful user interfaces...

Episode Summary
========================
[0:00] - Introduction
[7:02] - Building Tic-Tac-Toe from Scratch
[27:00] - Refactoring Tic-Tac-Toe into pseudo-React
[46:20] - Refactoring Tic-Tac-Toe into ReactJS

Source Code
========================

[oscillocelot]

That scream in the intro, I could have done without... I was wearing headphones =X

[JasonWolfeYT]

This tutorial is awesome. This is the only one that is explaining the why and how of react like a class, instead of just talking through someone else's code.

[aayush_bhj]

Guys you made my day, was looking online for tutorial on React and followed the entire video without even moving an inch .
Looking forward to great videos in the coming future.

[VladimirMilojevicheroj]

Really great and unique content on youtube. Keep it up guys! You are awesome!
Sharing immediately.

[JillChipmunkShubie]

Really, really appreciate the brief history on the evolution of front-end development, guys.

[teenyplop]

Super helpful going from vanilla JS to React - it really helped it all to click. Thanks for powering through and sharing.

[earnesthooks]

I just went through the React Tic Tac Toe tutorial in Code Pen. That's what brought me here and I found gold. Great job guys, I've been out of JS for awhile.

[valentecaio]

congratulations for this tutorial! very complete tutorial for those who are not used to javascript / html. You justified why you use React and you convinced me.

[coolworx]

Awesome.
Thanks for taking the time. That was an excellent intro to the Whys and Hows of React.

[president_kookmin]

It is a good introductory video to explain the logic behind the React. One advice: please do not swear. A lot of young kids who want to learn to code are watching this video.

[sumankhatri]

Awesome, will be interested in part 2 and some more on react Jordan Leigh

[Vertig]

This is great, looking forward to the whole series!

[VishalAnand]

I have a question after you completed your refactoring at around 42:27 . When we call render function, it is now drawing the DOM again and again at each click. Is this not a performance hit? I think we can store all the information in DS in the first implementation as well so that we don't have to query DOM all the time. Thoughts?

[treestompz]

Excellent video. Everything you guys upload regarding React is awesome :)

[amethyst]

This is hands down the best react tutorial I've come across. 🙌

I followed the entire tutorial. I created the app, and could get the part where we add the '!' to the text working. However, even after redoing the entire thing from scratch three times, the board does not get printed on my browser, and I am left with a blank screen. There are no errors, and I get the same warning you did. Could you please help me?

[BinLiutrianglehomes]

Thanks for the great tutorial!! I am new to web development, and just learned Angular. This is so far THE BEST React tutorial I have ever seen! thanks for telling me a lot of history and a lot of why! i like to hear about why and fundamental than just the surface of how we do things! please do more tutorial on react!!!Thanks!!!

[GaryH]

Thanks guys, great video. I already use React in production, but useful to hear you discuss it and see how you approach problems.

[SpencerDavis]

hey Jordan :-) so awesome to see you making this tutorial as I remember from the days of 8th Light you were always super smart so looking forward to learning this.
I love how you guys say "cheers" before coding. That is definitely in the style of 8th Light, lol

[sputnikho]

That's a super awesome explanation of React logic. Gained a lot. Thank you! You guys are great!

[MrTechGeek]

finally now react make sense. Thank you so much from explaining it from scratch with tic toe example. Thanks again