Best Practices Exercise

[00:00:00]
>> So we're gonna do a little bit of practice now. So inside, there's two different ways we're gonna approach practices going forward. And so inside of the repo that we have for the production grade view, we have a dynamic cutting component inside of there. And we're gonna want to rewrite that using the render function, so I'll preface with that in a second.

[00:00:19]
And then the other thing we can do is gonna go ahead and refactor our app styles, to use a CSS class and CSS modules as well. However, I know a lot of us here are probably experienced with view at this point. So, I want to go ahead and take a look around your components inside of your application and see if there are any components that might benefit from either using the render method for example.

[00:00:41]
Or take this opportunity to then refactor your component and give CSS modules a chance and see how that works out for your application. As I mentioned earlier, there are times when it comes to template and render functions that managing everything in template can be well, while declarative can be rather tedious to maintain.

[00:00:59]
So here, a common example that you use is the dynamic heading example where depending on where the content is used inside of the markup, right? We want it to be accessible use the right structure, but this means you need to be able to programmatically say is this an h1, h2 or h3.

[00:01:13]
If you were to do this with a template you'd have to as you can see, do the if, else if, and it's very verbose and not to mention we have a lot of duplication here, right? We have Hello Friend Masters done six times. And so what I want you to do is go ahead and use a render function to achieve the same effect, but with a lot less code.

[00:01:30]
And so just as a reminder, the codebase that you're providing is in view three, so that way you all can practice basically using view3 techniques in order to do these things. So, as far as the code base goes, what we have in here is a standard view cli application that's been scaffolded with the view three preview.

[00:01:49]
And so in the next section, we talked about view three, I'll go ahead and walk through how that was created, in case there are people who haven't used it before. But as we can see here, what you mainly need to focus on here is that we have our app dot view component, which contains our main entry point into the application.

[00:02:04]
And so here is where we can see our dynamic heading component being imported and being registered on to our default object. And then this is where our styles are that we'll be refactoring to use CSS modules just for practice sake.