AM Coder - Checking Out Unique SolidJS Features (For, Show, Custom Directives)

hey everybody this is alex merced from alexmer said coder.com and what we'll do is just explore a little bit more of solid js i've been reading through the documentation it actually has like a lot of really cool features that i figured let's try out i'll try them out live with you i haven't tried them out yet so let's just see here okay so in the beginning like here in the rendering section like jsx is jsx you guys get the point if you've used react um attributes and props you know all that stuff is pretty familiar okay this is just kind of talking about like how it gets rendered to the dom so this is just like react where if i go to the index.js what it does it runs a render function which targets a particular component towards a particular spot on the dom so if i go to the index.html which should be in this public folder we see here there's just a div although while i am here what i'm going to do is i'm going to create a section element there because i want to test something out that'll be coming up okay now mentioned in my to-do list video they have a cool little take on events so events work the same way as they would on react okay and looks like they actually even have like a director let me just see here to allow casing for delegation if you want use different events immediately yep so they have like an on thing kind of like the way it works in like um for example or angular or svelt so i can say like on then an event okay so that's pretty cool but the main cool thing about events and i'm going to use the same like to do list app that we just built in that previous video so i'm just going to get that started except i'm going to like uh clear this out let me go back to app.js okay i'm just gonna empty this all out okay and what i'm gonna do is i'm gonna create a button okay let's try a few things let's create some function and what i want to do is say uh const event func equals now the cool thing is that usually when you write an event function you do something like event okay and basically if i wanted so in this case let's try the directive like on click equals okay it's probably complaining because it thinks it's like just pure jsx okay or sod is complaining let's see what it says here must be assigned okay yeah it needs it but usually what you would do is like if i need to pass like extra arguments to it you would pass an arrow function and in that arrow function that would receive the event you would then call like your function be like event funk and then you would just say like e whatever whatever and your other arguments okay so you're calling a function to call a function now the cool thing about um solid okay and let me just see here this one do i need to do this at camelcase here on weird event see the limp space list delegation solution works well with web components in the shadow dom as well was listed on event listener for casing to work on all custom events should allow for lowercase convention of native elements if you want to okay so that's if you're using custom events i will just change this to onclick okay but that's normally like how that would work now what i can do here though is i can do something like this where instead of passing i pass the array and i will say event funk and then i'll pass like we'll say the string cheese and this gets passed as like a first argument to event funk and then the event so essentially it's doing the same thing except without me having to write the explicit arrow function the arrow function towards the arrow function so now i can say like thing event and then i can console log thing and then console log event and let's see if that works so if i go over here to the page there's the button which probably should have some text in it so let's just say click me okay and then i'm gonna open up my terminal i'm gonna click it and i should get cheese first and then the event object and that's exactly what i get so that's cool that just makes it easier when you need to pass multiple arguments to a function you don't necessarily need to write two functions you can just pass the array not the biggest you know game changer in the world but i can definitely see that's i think this is like a little bit clear saying run this function pass this before the event versus writing and wrapping a function call and an arrow function which sometimes if you're not very comfortable with like functions can be a little like like y for some people so that's pretty cool okay spreads let's see what they're talking about here thoughts first spread up our envelope in the components well not able to be optimized for compelling these are useful forwarding data through okay so this is just the id we could do this in react where you could like spread props so that's not necessarily new control flow okay um while you could use the map function too okay cool so they have like a built-in way to handle like a looping here which something react lacks and react you have to use map here they actually have a thing so basically let's see how the format of this use for and then you say each so that's the array and then you can create like a fallback meaning like you know if this doesn't work out it'll just say no users so that's kind of nice so let's try that out okay so what i'll do is i'll create an array i'm gonna get rid of all this stuff over here so let's just say const or r equals one two three four five six seven eight and then let's go in here and let before the button so we'll do a four and it's gonna be four each r fallback equals we'll say div no nums okay and then in between what do we do we pass we just pass some a function essentially the same thing as if you did map you're still writing the function but this makes a little bit more explicit what you're doing and again explicit more descriptive code is always good because you know when people see a map they don't always automatically like know what's going on so basically i'm saying here for each thing in this array r so we'll call and then we pass in a function just saying for each thing in that array what i want to do is return we'll say h1 r okay and let's see if that works reference event func is not defined oh that's right i deleted event funk so let me just delete the button okay it's not quite doing what i wanted to do so for each let me go take a look at the docs for each now you they are not amazing perhaps not as big a deal in the video based libraries since they always execute all the code from top down repeatedly anyways but solid is designed to avoid doing that so we rarely rely on techniques like that so this has come this is complicated and requires special methods with solid exposes through jsx control flow syntax control flows can be imported from solid js but as a convenience the compiler will automatically import them from solid js web okay so key listed iteration items you're gonna get in a second okay so we could grab the index so it's the thing that i need to import for oh i see i didn't write numb here there we go there was my mistake still not rendering the thing go here there's a div so maybe i do need to import so we'll say four okay let's try this again um let's go back to the docs it is four with an upper case for each state that list item div it's always designed to avoid doing that should we make a windows boolean so there's like show i get what those are first is we need to get it to work div loading one of the react dev tools like click in what's this hackstef tools okay i think this is something else i think it's for like accessibility or something i'll come back to that okie dokie console each one oh because i wrote curly brackets around it my bad oh my god i'm sloppy today i should write return or take off the curly brackets and there we go it works yay it works okay cool so you can write um you can write like conditional logic like that that's pretty nice and intuitive i like that okay we can do like a show so this is like conditional pieces of your code so if i do this go back here show when fallback okay so we'll just say here for when we'll create another variable so we'll say const show equals true for now so we'll say show when show okay and we'll just say hey we're going to show that point is h1 hello world so right now show is true so i should be able to see the hello world hello world now let me change show to false cool that works that is pretty cool okay and switch match let's see how this so this this looks like it's just gonna be like a router kind of thing okay um state dot route so equals home settings yeah so this is just something you could do is just basically use it like a router okay async component suspense fallback div loading let's try this out i've never used suspense before so i do need to read up a little bit more on that but just basically reading this looks like what it does is that you create an asynchronous component and if the component fails to load it's going to just fall back to this so this way you want to put all that conditional logic as we would normally do in react so i'm going to assume it's that but i'm going to maybe do a separate video on that error boundary something went terribly wrong so we put okay so it's like a try catch block okay something goes wrong in there and then it it shows a fallback okay that's pretty nice okay because yeah we've all seen those errors in react where basically we did something wrong and the page just won't render okay this is just another way of looping except what it does it just uses the index um automatically has a key vap property primitives and it is in the index that is fixed rather than the value uses reactivity when the data is simple strings numbers are not models okay dynamic this is just like the past props one like i don't find that this is cool i like this portal this isn't react but basically what it does so this is where that section thing comes in so what i can do is i'll say portal and we'll do portal mount so then i do like target the element so mount so where do i want to mount this thing and i want to mount it where document dot query selector and we're going to select the section tag okay and then we're going to say hey h3 something so what this should be doing is that instead of just putting this inside of this component so instead of being inside this whole div of app this is on this h3 will be posted where that section tag is it's going to like this is useful because you don't necessarily want to have maybe you want things in other parts of your page but you don't want to create multiple renders like you know you rather keep everything have one component tree and just render once but you want to put things in other places in your html file so let's see here something something so let's take a look is it in the section tag and there it is the divs in the section tag that's super cool okay uh let's see here refs uh the way rest work are pretty neat okay before you have like use a hook to create the ref here you just make a variable and just pass it to the ref then you got a ref so that just means you have access to that html element this is useful if you just need to get like normal dom properties it's just like if you did query selector on the element and save the in a variable essentially that's what this my div ref does um you probably are familiar with rest from react or other frameworks i'm not going to go too deep into that like that's not and then here it goes into being able to create your own custom directives which is neat okay i think it implies that use model is built in so i'm going to try that out okay so if you're not familiar with model from like vue or angular what it does it just binds your inputs this two-way binding with your input so kind of like how i was doing that whole handle change thing before this would make that unnecessary so i'm gonna try to see that works okay so i'm gonna create an input okay there's my input um we'll give it some properties in a second first i'm gonna do is create a signal const get input set input equals create signal and we'll start off with an empty string okay and all i'm going to do is i'm still going to create like a handle change function just so we can like get a console log you know log input equals event and all this is going to do is this console.log get input we're just going to test that so see if the input's actually changing okay so we're going to do it's going to say hand on change equals get input and then we're going to say use model equals and how does it do it here use model and you pass in the both sets so name and set name so get input set input okay it builds successfully like my browser's complete because it thinks it's react it looks like this kind of got the they got the memo so that's with the console model is not defined okay so let me go over here use oh i see like you have to make it so in this case you could create this function here okay um so let's try that out and this would essentially do what i need to do so let's put that here so let's see here function model element value let's think about that create render effect oh well i gotta import create render effect create render effects reimport that set field value equals field create render effect l dot value equals field goes value where's value coming from okay let's see what happens here now it's not getting so let's see if it works use model so it recognizes the model function but let's console.log what is it getting as arguments console.log l value refresh that why isn't the unchanged function running let's see here get input let's go back to that input on change get input use model is it overwriting the change function i think so so let's bring back the button and save the button on click equals um get input okay and [Music] okay that's going to kind of complain for now because the thinks i'm doing not react stuff button on click equals get input let me just put some text on the button oh no i put get input it's supposed to be log input it's the function log input let's try that and that works okay that's neat okay cool so yeah so you can build your own directive so like essentially this basically does what use model would do um that's pretty cool um so i mean that could be so basically you have a lot of really cool tools in here i'm assuming they'll build out more and there's even more in the documentation but the idea is like there's a lot of stuff here that's not necessarily as easy to do in react or out of the box react that we do have here but you could just do everything almost in the same way you would do it in react so the more i play with this the more i'm really liking solid js um kind of bringing in all the best parts of all the things and in a nice super fast package so hopefully you guys enjoyed that my name is alex merced from alexmusdcoder.com subscribe to the youtube video go subscribe to my podcast go join the slack and discord community over there at dev nursery.com and i'll see you a little bit later on

Channel: Alex Merced - Full Stack Developer

Views: 97

Rating: 5 out of 5

Keywords: Programming, Javascript, PHP, Python, Go, Typescript, cpp, java, react, angular, vue, graphql, ruby, ballerina, node

Id: RJKP2MfXjH4

Length: 23min 12sec (1392 seconds)

Published: Thu Apr 15 2021