If you find videos useful in learning programming technologies, and if you’re looking to learn React.js, lots of choices are available. The best ones combine a video presentation with a link to a code repository, so you can review and try out what’s presented. The most instructive videos aren’t always the most polished ones. Developers put them together using screen capture tools, and the focus is on the content, not the presentation. All of the ones listed here do a reasonably good job of presentation, though.
Facebook’s Introduction to React.js
React comes from Facebook’s development team, and they have a video of a live introduction to React on YouTube. It dates from 2013, soon after it came out, and there have been serious changes since then. It provides an overview, not a tutorial, but understanding how Facebook’s engineers thought about their aims is valuable. Their enthusiasm for the technology really shows through.
New developers will find this presentation valuable. Before diving into a technology’s details, you need to understand its basic concepts. In this video, the engineers talk about the framework’s concepts at a high level. They explain declarative components and why React avoids explicit data binding to the view. A change to the model doesn’t mutate the view, but rather generates a new one. This would seem to mean outrageous amounts of refreshing, but it then reconciles the new view with the new one and changes only the parts that need changing. It’s a clever idea and one which is central to understanding React. Watch the explanation and examples of how that works, and you’re ready to plunge into the specifics.
The video is over an hour and a quarter, but the actual presentation is just the first half hour. It’s worth watching that much to understand what Facebook was aiming at.
React JS Tutorials for Beginners
Bucky Roberts has a series of short videos to introduce React.js. The “Getting Started” tutorial is just over four minutes long and presents some basics, quickly getting into “getting our hands dirty.” He simply shows how to set up the code, with the appropriate includes and a brief explanation of the JSX preprocessor.
There’s no real code in the first installment. Roberts shows how to set up React in a page and provides a link to his GitHub repository. The second video presents a simple demo that displays some text. If you’ve watched the Facebook video first, the idea of components and the render function will be familiar.
The third video explains exactly what a component is and how to create and display one. The final video gives a more complicated example. Breaking the tutorials up this way lets you absorb one segment before going on to the next. It’s good for complete beginners.
React JS Crash Course
Brad Traversy’s “React JS Crash Course” gives you a full hour of training in one video. After a short introduction on the benefits of React, he shows how to create a very simple “Hello” component and explains JSX. Then he presents a more advanced example, a simple project management application. The aim is to teach aspects of React.js, not to create a useful application, but there’s a link to the code on GitHub.
While this video starts from the beginning, it will be challenging for someone who’s just starting out. Gaining some familiarity with basic component manipulation before watching the video will make it easier to follow. He uses Node Package Manager (NPM) is his demonstration, so it helps if you have command line experience and have installed and tried out NPM.
An NPM-based tool called “Create React App” sets up the application skeleton. Then Traversy shows how to modify the generated application, step by step. He doesn’t skip any details of editing, so some patience is necessary. When he’s done at the end of the hour, he’s covered such issues as components, state and properties, events, forms, lifecycle methods, and use of an API. If you absorb it all, you have a good working understanding.
React Tutorial for Beginners
Dev Coffee takes a different approach, for those who’d like to try out React without the trouble of installing it. If you really want to follow along, you need to open a window and navigate to Codepen.io, where you can write and try out code online. A nice thing about Codepenis that you can see the effects of your changes as soon as you make them.
This does require you to read code off the screen and type it in. That’s really a better way to learn than pasting code; you get the knowledge under your fingers. If you don’t want to do the typing, a link to the completed application on Codepen is available. Typing the code is worth the effort, though. It gives you the experience of creating a working application in a few minutes. As a bonus, you learn how to use Codepen if you haven’t touched it before.
The tutorial covers a lot of ground in 24 minutes. Immediately seeing what each step does is a huge help in making it all comprehensible. Component updating in React.js can seem like magic, and seeing it in action really drives it home.
There’s more
These are just four examples of what’s available. If you don’t like the approach one video takes, look for others. Each one will give you a different perspective and hopefully let you learn more. Whichever one you choose, pause often to absorb the material, and take breaks to create your own code. Watch them as many times as you need to.
