React and Radial Chart Exercise & Solution

[00:00:00]
>> Shirley Wu: Let's do the radial chart together, because it's the same concept. So, let's just really quickly grab the data for the radial chart.
>> Shirley Wu: Then, in this case, I have to go to the starter code.
>> Shirley Wu: And then I already grabbed the data for the radial chart, just copy and paste that in and then instead of returning let me call that slices is equal to that.

[00:00:39]
Return slices as state, make sure that slices diff is defined in the initial state as an empty array, and then,
>> Shirley Wu: Loop through those slices, this.state.slices and for each one of them create a path element, and use d.path as the d attribute, and use fill to color them in.

[00:01:26]
And then,
>> Shirley Wu: Yay, so it gets drawn right here. So the bars are getting drawn right here and you might be like why is it getting drawn right there? And that's because when we did the arcs generator, the arcs generator assumes the center to be at 0,0. So what we need to do is do an SVG transformation.

[00:01:54]
So wrap that around.
>> Shirley Wu: In a group element. And so group elements are the only SVG elements that can have children. So with HTML, you can have children in pretty much almost every element, right? But with SVG, the only elements that can have children nested inside of it are group elements.

[00:02:24]
And then you want to put SVG elements within the group elements, so that you can transform it to get it all together. So, in this case, I want to say that everything within this group element, please move it.
>> Shirley Wu: So please move it, and moving an SVG is called translating, so move it by half of the width.

[00:02:53]
And actually, if you wanna see. So that moves it to the center and then please move it by half of the height, and that will move it down to where it should be. And that's all it takes to draw the slices in React. And so this is actually probably the easiest part of this whole workshop.

[00:03:22]
I want to talk really briefly about in this exercise, we did all of the data calculations and get derived state from props. But I did mention that there is other options and so this was one of the suggestions I've gotten of putting the calculations in both componentDidMount, and componentDidUpdate.

[00:03:43]
And then so in this particular example, we have the data calculation in a separate function, and after we calculate all of the data, we set that as state. And then in componentDidUpdate, we check to make sure that something has changed, so we use some sort of a prop to make sure that something has changed.

[00:04:10]
Only if something has changed with the data do we recalculate the data. In this one, just to make sure that the component is already rendered before we calculate the data. So this is another option that we can do. We just didn't do it in the example cuz it just takes a few more lines.

[00:04:34]
But I think this is a really good suggestion also. As long as there's some easy way for you to figure out if the data has updated or not, so this is the main part. So this is the architecture for React rendering.