React Fundamentals: Integrating Components with D3 and AngularJS

Man: [00:00] Hey guys. In this video, we are going to talk about how React can integrate with other libraries. Here on the page, using Bauer, I've got React and the JSX Transformer. I've got this little app that I built up, and I'm going to walk you through that really quick.

[00:13] Here in the initial state, I've got a key of data. It turns an array of objects, each one with a key of val. Then in my render method, I'm taking all those, and I'm mapping them to something called item. Then I'm returning a list item with that item.val as its inner html.

[00:29] Then I wrap all those in an unordered list. Here that is on the right. If I change a number here, we see the number there. What I want to do is get this out of my component, and I want to call, do an Ajax call, to a service and get these values.

[00:46] To do that, we're going to use Bauer. I'm going to install something called Request. This could easily by JQuery or Zepto or any other library that supports Ajax calls. This one's nice and small, and it'll integrate nicely.

[01:02] We've got Request installed here in our Bauer components directory. Let's go ahead and get that on our index html. We'll drop that in right here. Now in our application, rather than populating this in our get initial state, I'm going to leave that empty there.

[01:22] Then what I'm going to do is right here in the component will mount, I'm going to set up my request to get some data. For this, I'm going to use fill text, which is just a service that returns random JSON data. I'm going to get 10 rows of data and a key of val.

[01:41] It's going to equal random number. Then on the success of that, I'm going to set my state of data to the response. At the end of this function, I'm just going to bind it to this. Let's try that out really quick. You can see we're getting our 10 random numbers.

[02:02] I thought we would take this a step further and see if we could integrate D3 with these values. On Egghead, Ben has a great introductory video to D3. I don't really know a lot about D3. What I'm going to do is I'm going to copy his style, drop that into my HTML.

[02:22] Here, he's got this data set hard coded, so I'm not going to take that in, but I am going to grab this D3 portion of it. What I'm going to do is create a method here called renderchart. That's going to take in the data set just like his does. I'm going to drop this code right here.

[02:44] Rather than appending it to the body, I'm going to have a div called chart, then I'm just going to return that div in my render method, div chart. On my will mount, I'm just going to say this.renderchart, and I'm going to pass it in my state.data. Let's get D3 in the mix.

[03:16] Cool, so that's installed. Let's get it on our HTML page. Copy that right here. Let's try this out. We are not getting different bits of data, and that is because we need to do d.val right here. Let's try that out.

[03:44] We're getting different values. Let me just get rid of this margin and this padding so we can see it on the screen there. Every time I refresh, I'm getting a new chart with a random value for each of those items. Let's just say we're going to drop that down to five of them, and now we've got five.

[04:07] Let's take this just a little bit further and see if we can't integrate React with Angular. We've got Angular installed, and what I'm going to do is make a new directory called JS. I'm going to take my JSX, and I'm going to compile it to JavaScript.

[04:34] Now we've got a pure JavaScript version of our component. Here, we're not going to need state anymore. We're not going to bother with Request because Angular can take care of the Ajax call for us. What I'm going to do is say component will receive prompt.

[04:54] If prompts.data, call our this.renderchart, prompts.data. Now, down here, we're also going to let Angular take care of our target. We'll call that target, and then we'll use that right here as well. Then we don't need to render our component any further. We'll let Angular take care of that.

[05:23] Let's jump over here. We don't need the transformer. We don't need Request anymore, but we do need to get Angular on the page. Copy that and drop it in right there. Let's start building up our Angular app. Module, we'll call this RNG. Going to create a controller, just going to call it chart controller.

[05:59] Here, we're going to use our HTTP provider, and of course, we're going to use scope. Let's break this out a little bit. I'll get rid of that panel there so we can see a little more. Let's do our HTTP call.

[06:23] We'll do 10 rows, and the val will be random number. We'll put a callback on this, callback equals JSON_callback. On the success of that, we'll take our response, and we'll just set scope.data equals that response. Now, let's create a directive here.

[06:46] I'm going to call this React chart. Here's our function. Let's return our directive object. We'll restrict that. Let me scroll this back up a little bit, to an element. We'll isolate our scope, and from there, we're going to take data.

[07:04] That's going to be an object, so we'll use equals there. We'll take in, we'll take ID, and that will be an attribute. That's going to end up being our target doe in our link function. We're just going to set up a watch here. We're going to watch our data.

[07:26] New, old, and here, we're actually going to render our component. Of course, we're going to do that in React.dom syntax, so we'll just pass in our properties. Data is going to be scope.data, and target will be scope.ID, and then this will just be the element zero.

[07:56] Let's get our application on the page. NGapp equals RNG. We'll drop in our controller right here. Then we'll drop our directive right here, pass in our data. Again, that's an object. Then our ID, we'll just make this Rchart.

[08:20] Here, this is going to be our JS version. Let's just try this out. Totally messed something up. Let's take a look at the code, or the console here. App is not defined. We don't need that type of text JSX.

[08:39] Try it out one more time. There we go. We've got our directive managing...Our controller is managing all the data. Our directive is managing when to render. Just for the fun of it, let's say we're going to do two of them here.

[08:55] Chart one. This one will be chart two, and here we'll just say our chart two, data two. This is a little redundant, but we're just going to copy this down. Here, we'll say scope.data2 equals data. Let's try that out really quick.

[09:17] There's our two different charts. Refresh, refresh. In this instance, we're using React with Angular. We're letting Angular do all the things it's good at, and we're letting React do what it's good at, which is updating the dom.