Start with 7 free days of training.

Gain instant access to our entire IT training library, free for your first week.
Train anytime on your desktop, tablet, or mobile devices.

Ben Finkel introduces the ReactJS javascript framework from Facebook. The course covers the topics and reference needed to begin creating responsive and dynamic web pages with React....
Ben Finkel introduces the ReactJS javascript framework from Facebook. The course covers the topics and reference needed to begin creating responsive and dynamic web pages with React.

Recommended Experience
  • 1+ years of web development experience (.NET, PHP, Ruby, or Python)
  • 1+ years of experience with Javascript, HTML, and CSS
Recommended Equipment
  • A desktop computer running Microsoft Windows version 7+, MacOS 10, or Linux
Related Certifications
  • None
Related Job Functions
  • Web development
  • UI/Frontend developer
Ben Finkel has been a CBT Nuggets trainer since 2014. His areas of expertise include Microsoft ASP.NET (WebForms and MVC), Data Analysis and Design, Relational Database Architecture, MS SQL Server, Microsoft C#.NET, Javascript, jQuery, Microsoft Visual Basic .NET & 6.0, .NET Reporting Services, MS Access, and Python.
 show less
1. Introduction to ReactJS (12 min)
2. Rendering an Element (14 min)
3. Rendering a Component (8 min)
4. Component Props (8 min)
5. Using Component State (9 min)
6. Component Events (8 min)
7. JSX (10 min)
8. Compound Components (20 min)
9. Unit Testing (21 min)
10. Build Environment (21 min)

Introduction to ReactJS

00:00:00

Introduction to ReactJS. Hey, everyone. This is Ben Finkel. In this Nugget, we're going to learn about one of the coolest, hottest new JavaScript frameworks in the market today. And that's ReactJS, made by awesome folks over at Facebook. Web applications have come a long way.

00:00:15

They are just not what they used to be. I've got up on screen here-- I went to the web.archive.org, the way back machine. I looked up a website that was built by, well, yours truly back in 1996. I was 17 years old when I built this website. And it is not an especially impressive website by modern standards.

00:00:30

But for the time, it was pretty cool. And this is what websites used to be. They were essentially just brochures or pamphlets, magazines. They were static pages with lists of things. Maybe included some prices and a few images. I don't think the way back machine has stored any of the images here, unfortunately.

00:00:44

There were some cool devices. But that's what websites used to look like. Even if we go back a relatively short amount of time-- this is using web.archive.org, Barack Obama's Facebook page from 2008. And it was pretty static. You take a look. It doesn't actually look much like a modern Facebook page.

00:01:00

Everything was pretty static and still way back then. Now, compare that to today's Facebook page. This is Facebook.com for Barack Obama live right now. Look at the scroll bar on the right here with all the updates for things, how fast and responsive.

00:01:14

It's got embedded video. There's all kinds of cool stuff going on here. And Facebook ran into a problem a few years ago when they were trying to implement all this. And that was managing the user interface code for a complex responsive application like this was just getting totally out of hand.

00:01:30

So what Facebook did was they actually developed themselves a JavaScript library for rendering their user interface inside of HTML with pure JavaScript, trying to focus on creating as much JavaScript as possible and taking out a lot of the other external dependencies and applications that they relied upon.

00:01:49

What they came up with was what we're talking about in this Nugget. And that is something called ReactJS. It's a library for JavaScript that allows us to render to the user interface based on what's called a Virtual DOM, a Virtual Document Object Model.

00:02:03

Now, that's getting a little bit ahead of myself. So let's just back up and talk about it at a very basic level, a very high level, what ReactJS is. I think it's really got three important things that you've got to know about it. One, like I've mentioned a couple times now, it's a JavaScript library.

00:02:16

This is important because JavaScript has become very, very popular in the past two years. People have really begun to recognize and take advantage of the power that JavaScript offers to developers. And they've started building a lot of libraries, a lot of structure around it.

00:02:28

JavaScript is also natively built into every browser on every platform. Everyone can run JavaScript on just about any device that's been made, really, in the past 10 to 15 years. So it's widely available, widely compatible. And it's really powerful. It's really popular.

00:02:44

Second, ReactJS is narrow in scope and tightly focused. And what I mean by that is, when you talk about web development today, you're talking probably about MVC pattern. At least, you ought to be. If you're not, look up. You should be. ReactJS does not implement the entire MVC pattern.

00:03:00

It focuses purely on the V part, the view. React is concerned with rendering your user interface. And this means that A, it plays really nicely with other libraries out there. If you want to use React alongside of AngularJS, hey, that works great. It fits in well with the MEAN stack.

00:03:17

It fits in well with the LAMP stack, if you want to use React with PHP. React is a nice, flexible component because it is so narrow in scope. It's also tightly focused. And that brings to mind a brand of beer from Canada called Steam Whistle beer. Steam Whistle makes one beer only, only one kind of beer.

00:03:35

And their tag line in their advertisements for that is, do one thing really, really well. Their point being that they don't get distracted by all the different flavors and different types of beer that they can make. They only make one beer. They only do one thing.

00:03:47

And they do it really, really well. Well, same thing with React. React is only concerned with rendering the view. So it's able to do that one thing really, really well. It's tightly focused. And then the third thing that I think is cool about React is it has a helpful name.

00:03:59

All right, this doesn't seem very cool in the face of it. But I actually think that the name is fairly indicative of what's going on here and what makes React so cool. Of course, first of all, the JS in it indicates it's a JavaScript library. That's helpful.

00:04:12

That's nice. Everyone likes that. But the React part is really interesting. The React part helps us describe what's going on with this library. Most software design patterns these days really split our application state into two components-- the data state and the viewer, the user interface state.

00:04:29

So you can think about this little example I've got on screen here. I've got a data set of just dates and average temperatures. That's the data state of my application. Everything I need to know about the current state of my application is contained inside of that data set.

00:04:40

It's seven days and an average temperature for each day, so seven temperatures. Now, that data set needs to be reflected in the user interface, however, this little graph or this chart I have over here. And this user interface is an exact representation of that data set.

00:04:53

These two things need to remain synchronized. If for whatever reason the values in the data set were updated, I would want the values on the user interface to update to reflect that as well. And this is arguably one of the most difficult things in any software design, but particularly in web software design because well, a lot of times our data state is really being stored and managed on the server, while our user interface state has to be done on a client computer.

00:05:14

And the client computer is limited to HTML, CSS, and JavaScript. We don't get the opportunity to bring in native applications because we don't know what native environment our website is going to be executing in. So this is a problem. Going back to MVC, this is one of the things that MVC has attempted to deal with.

00:05:31

The basic idea with MVC is-- let's say you've got your model and your view like I've just described here. The data is the model. And the graph is my view. And let's say you-- well, maybe you're Canadian. You got that Steam Whistle beer reference I made earlier.

00:05:43

So you grab a little radio button. And you fill out the toggle button to switch it from degrees Fahrenheit to degrees Celsius. You've updated the views. So that controller needs be notified of that update. And the controller will go and update the values inside of the model.

00:05:57

And then the model needs to update the view. And like I was just saying before, this is really the complicated part. Most of us as developers can imagine how easy it would be to capture the event when the user clicks on that radio button inside of the controller.

00:06:08

And we can imagine how easy it would be for the controller to update our data model. That's simple, easy, testable stuff. But how do we update the view? A way that's become very popular in recent years is to use something called two-way data binding.

00:06:20

And that's where the view and the model are bound to one another. And when one updates, the other gets updated. So when the view changes from degrees Fahrenheit to degrees Celsius, well, that tells the model. The model updates its values. And those values in turn update on the view.

00:06:33

Two-way data binding-- we do this with something called key-value observation, KVO, that's used in things like Ember and KnockoutJS, or with dirty data checking, which is the primary way that AngularJS does it. AngularJS is constantly looping through the state of the user interface looking for updates and updating things when it needs to.

00:06:52

React uses neither of those things. React says, you know what we'd really like to happen is we would like for the user interface to react to changes in the data model. Hence, the name. We want the user interface to be reactive. HTML is completely static.

00:07:05

It's not reactive. CSS doesn't even do nearly what we need it to do. But JavaScript we can program to be reactive. And that's what ReactJS is. It turns JavaScript into a reactive, descriptive language of our user interface so that the user interface can react to updates in the data set.

00:07:22

And the way it does this is with something called the Virtual DOM, Virtual D-O-M. Now, let's just talk about this for a second. The DOM, of course, traditionally represents our user interface, the HTML document that is being displayed on screen. And it's really expensive to render that HTML document.

00:07:41

So if we wanted to simply re-render the entire DOM every time a value in the data set was changed, well, that would be really slow and be really expensive. It would take a lot of CPU cycles. And it wouldn't be very fast or responsive. What ReactJS does is it creates a virtual representation, in memory representation, of that DOM.

00:08:01

And every time you make a change to the data set, it updates the Virtual DOM. The whole thing, it just rewrites the Virtual DOM from the ground up to its new state. Then, what it's able to do is it's able to very quickly perform a diff operation between the old Virtual DOM before it was updated and the new Virtual DOM that it just created.

00:08:19

It's able to determine which specific parts of the DOM have changed and update only those specific parts in the actual, real DOM. And this is really awesome because this means that it's very, very fast. It's only updating little individual parts of the DOM, not the entire thing.

00:08:34

It does it very, very quickly. And as a developer, we don't actually need to worry about what's been re-rendered and what might be re-rendered. We write our code as if the entire DOM is being re-rendered every single time because React is going to handle only updating specifically what needs to be updated.

00:08:49

There is a great explanation of all of this available on YouTube. A guy named Pete Hunt does a wonderful explanation of some of the pitfalls of KVO and dirty checking and how the Virtual DOM with ReactJS attempts to address those. Now, let's take a look at some ReactJS in action and try to get a feel for exactly how it does all this.

00:09:07

On this FIDDLE here, which you are welcome to load up at this URL and take a look at yourself, I am creating a simple Hello World application, Hello World component with ReactJS. Notice that my HTML is very, very simple. I have a blank, empty div. And that's it.

00:09:21

I've just got a div. That's going to be a container. It's called my mount point for ReactJS. This is where my ReactJS output is eventually going to write the DOM that it's rendered. Down here inside of my JavaScript code, I'm doing two things. One, I am creating a new variable called Hello.

00:09:37

It's actually a new React class. And then down here, I'm rendering Hello. So a couple of things that we should be aware of inside of this code. Notice right here, Hello name world and these divs right here? That's not valid JavaScript. If you are familiar with JavaScript, you should look at that and be like, what the hell.

00:09:52

That's not going to work. That can't compile. Actually, what that's called is JSX, which stands for JavaScript XML. And ReactJS code goes through a simple pre-compile step that turns that JSX into valid JavaScript code. We can take a look at it in a moment.

00:10:07

I'll show you what the real JavaScript looks like. What you need to know though is that JSX makes it a little bit easier to mark up your JavaScript code because JavaScript is writing the entire UI. The entire DOM is being written from JavaScript. And if we were to use straight JavaScript to do that, it wouldn't be very clear, very easy to work with.

00:10:25

JSX makes it a lot easier and a lot more crystal clear what exactly I'm doing. What am I doing, by the way? Well, my Hello class has a render function that simply returns a div. And that div has a reference to something called this.props.name. Now, down here, my ReactDOM actually calls a full render operation.

00:10:43

And it references that Hello class, that Hello component. You should recognize Hello as not a valid HTML element. It's a custom one that we've created. So Hello here references Hello right there. And I've given it a property name equals "world". Now, remember what's happening on the render right here?

00:11:01

I'm printing Hello, and then this.props.name. this.props.name is a reference to that right there. The second thing I do in my render after I've passed in that element is I'm passing in a mount point for it, a target for it. And in this case, I'm looking for getElementByID container, which is this div container right here.

00:11:18

So what's going to happen? ReactDOM is going to render Hello name equals "world" into that div element. Hello name equals "world" is going to get turned into div Hello this.prop.name. And we can see that happen right down here, Hello World, because the property was name.

00:11:33

If I come along here and I change this from World to Ben, because that's my name. I'll click Run. Now it says, Hello Ben. So this is actually a fairly complex example of using elements and custom rendering to the Virtual DOM, as well as properties to get our output, our user interface output.

00:11:52

So that concludes our Nugget, Introduction to ReactJS. Now, to recap, ReactJS can be a little bit complex, a little bit difficult to get your head around at first. But here's the main takeaways. It's a very small, very narrowly focused JavaScript library expressly for updating your user interface state, getting your view synchronized with the data state of your application.

00:12:10

I hope this has been informative for you. And I'd like to thank you for viewing.

Rendering an Element

Rendering a Component

Component Props

Using Component State

Component Events

JSX

Compound Components

Unit Testing

Build Environment

Please help us improve by sharing your feedback on training courses and videos. For customer service questions, please contact our support team. The views expressed in comments reflect those of the author and not of CBT Nuggets. We reserve the right to remove comments that do not adhere to our community standards.

comments powered by Disqus
Intermediate 2 hrs 10 videos

COURSE RATING

Training Features


Practice Exams
These practice tests help you review your knowledge and prepare you for exams.

Virtual Lab
Use a virtual environment to reinforce what you are learning and get hands-on experience.

Offline Training
Our iOS and Android mobile apps offer the ability to download videos and train anytime, anywhere offline.

Accountability Coaching
Develop and maintain a study plan with one-to-one assistance from coaches.

Supplemental Files
Files/materials that supplement the video training.

Speed Control
Play videos at a faster or slower pace.

Bookmarks
Included in this course
Pick up where you left off watching a video.

Notes
Included in this course
Jot down information to refer back to at a later time.

Closed Captions
Follow what the trainers are saying with ease.
Ben Finkel
Nugget trainer since 2014