And I will just use the value, not any other parts of it, okay? Probably this, so now we have access to the counter here and we only imported the counter value because we don't need the rest, right? So it will be like this and then it will still work both here and both here, right? And of course, if we keep extending the contents of this hook, like it was in my slides, like we want to have, let's say, some computed function that does some modifications of this value, then we can still do that. This newly added feature, let's say it's a new feature, we can just add it to the exported values and when we need it somewhere, we can just ask for it in this deconstruction and then make use of it in the template. So that's probably because the initial value was like a string or something. That was not a string, so Y gives me none. Probably counter. That's the trap I was talking about. But the problem is that this object is something I need to refer by a value, and then it will, I will be able to get the actual value of it, right? So here we have a counter with some extra features, and we created a separate hook from it, and this hook will be reusable in other components just like this, okay? So that's just for the start. Now let's add another feature that is working with events, so how you can, yeah, make use of emit in the viewtree version. For that, I will need to create some more components. But before I go into this, I will quickly answer the questions. So Adriano was asking, are you using white? No, I'm not using white. And one more thing, speaking about the white, there is also a nice repo which actually uses white, and it showcases a lot of new features. That demo is, like, way better than I will be able to create during this workshop. This one, please have a look, give it a star, and that this guy's really amazing that he created it. It's called Vue 3 Playground, and it contains, like, each of the... almost each of the features that Vue 3 has. That you can just open the piece of code, run it, like break it, you know, adjust it, and learn it by doing, so that's amazing repo. And this one uses actually white. Okay, so the second question by Adriano, can you modify counter value in the component where it is imported? Okay. So meaning here, right? Like if I only import the actual value, that's the question. So yeah, we can just see what will happen, right? We will create a function that will be changing the value, and you'll see that it's how it is reacting. Okay. Create function. We import here and then we clear the button. Here we have this change button. Uh, so you see, uh, maybe I forgot something. Change. Change. Change. So it does not do anything here because the, uh, if we try to do it like this, it will just give you this, uh, that's what I wanted to show. It says that the counter value is read only. So we, uh, what we're getting from here is already, uh, something that you can change directly. Yeah. Um, okay. Uh, moving on. So that's for the. For the simplified, uh, counter example. Uh, let's, uh, create some more, um, stuff and, uh, experiment with it. Um, so I will use this, uh, demo, which is, um, like a component that is kind of showcasing, uh, like a product in the, in the catalog. So I'll create it here. Uh, this component is pretty straightforward. Uh, name, and it has a property of a price so you can configure your product by giving it a custom price. It emits an event. It's just the name of the event. It can be anything instead of signal. And it uses the view tree composition, and here you can see how we use the emit function, right? So we, uh, use the props. I remember there was a question about the props. Right. How do you use the prop? So here's the example, right? Reading the props from the first argument, uh, it can be also done, uh, a bit more modern way, like something like this, uh, price. Uh, and then, uh, you just take it, uh, from there and then you use it. In India, in, for example, in this situation, or you can use it, uh, somewhere else in the cold, uh, in order to, to, to, to make it more using the simple properties mechanism. Uh, to, to, to pass the data from a parent. So I will now need to quickly recreate the parent also to, uh, explain. Um, so, uh, this uh, here I'm using the syntex of a defined component. I can see that. Yes. look at these. This is on purpose so that I, um, That's it. Uh, you can, you, it doesn't do more than just the normal export default without this wrapper, but it's more beneficial in terms of, um, uh, the TypeScript, uh, and the ID tooling support. So, uh, that's, that's okay. So I will do one last thing. So that I can, I can quickly make, uh, um, a image, uh, that I can then maybe, uh, useful to do that. Um, so this is a child component and that will also create, uh, uh, um, list, uh, component here. Um, for that, I will quickly replicate my, um, screens. Okay. I'll quickly create one more screen here. Um, and so what do I have? I have a parent component that is just has like a catalog title and it places two child elements. I mean it can be more, can be a less elements and it just shows the way that we can pass properties. It's pretty similar to how we did it in view two. Of course, we can also make them more dynamic right by adding, like a data property somewhere here.
React Advanced Conference 2021
Comments