Build a SolidJS User CRUD App With LocalStorage Crash Course With Deployment to Vercel in Browser

uh Hello friends welcome to this video so in this video we will be talking about a new framework solid JS which is very popular among developers and we will be trying to build a user cred application inside this it is very much similar to react but it is very much performant it is very effective in terms of uh it doesn't have virtual Dom as supposed to react chers we will be looking at a full crash code full stepbystep tutorial to how to build this uh CA application so we will be storing the user details such as name email address profile picture country and we will be having actions such as you can edit the information or delete this so we have a simple form right here where you can actually write uh the name of the user then you need to write the email address and from your file system you can upload a image file right here and then you can write country so now if you click the button uh this alert box will be shown by sweet alert library and you will see one record has been added so we are actually using base 64 code to actually embed images you will see that so this is the actual state of the application if I close this window and again try to go to the same URL you will see that it is actually storing these details in the local storage and you can see you can delete this as well so if I again open it you will see that these details stay in the browser because it is stored inside local storage so in this way you can add some more entries like this so we can actually pick so one other entry has been added and we have this edit button uh if you click the edit button it will look something like this you can change the email address or name let me make the modification click on okay so now you can see that the name has been simply be changed right here you will see that name is changed so in this way you can add as many entries as you want so it is not stored inside database it is just storing in the local storage of the browser of the specific browser I will also show you how to deploy this application to versal which is actually a platform where you can deploy your Cloud applications so for building this we are using solid JS which is a new framework a reactive JavaScript library and it is very much performant it doesn't reender whenever your Dom changes whenever your state changes as opposed to react ja which actually uses virtual Dom this solid ja doesn't use Virtual domor it doesn't require you to actually refresh your components whenever your data changes inside the component so let's suppose uh we actually write some record right here we add the record so when we click this add person button so it will only update that component which is affected by this data it will not renter the entire application as opposed to react CHS which uses virtual dor so this is the main uh benefit of using solid JS which is it is very much uh beneficial in terms of uh you don't need to rerender the entire application it it only uh renders the component which are affected by the data so you will see you will be looking at when we develop the application from scratch so the whole source code is given in the description of the video so you can purchase it from Pro Cod store com from my website the link is given in the description so you will actually get a zip file uh from Google Drive after you make the payment so the link is given this will be the directory structure of the source code you will see we will be writing jsx code it is similar to react CHS but it uses signals and store so it's a reactive Li library and uh it is based upon Primitives and it uses a concept of uh create signal signals are very much uh the concept in solid JS which allows them to actually update only the components which are affected with the data not reenter the entire application so this will be the source code you will be getting after you make the payment if you need the source code so now let's start this application from scratch and I will be seeing you in the next section when we start building this application uh now guys we will start building the solid JS application so the very first step we need to do we need to go to the project directory and there is this command which you need to execute npx digit D git T solid JS SL templates so it it supports both typescript and JavaScript for this specific tutorial we'll be looking at JavaScript sljs template sljs so this is a command npx then you type digit D git solid JS / template sljs so you can even write TS as well if you're working with typescript but for this tutorial be using JavaScript then the name of your application let me call this as person current APP just enter it and it will actually clone the basic solid JS project inside your uh this directory person card app so you will see it has cloned this to this directory now we can navigate to this directory person cred app so if you see the directory structure of a basic solid JS app it will look something like this we have this app.jsx folder it will look very similar to react ches and uh it is very much similar you will see that we have the app.jsx file we have this index. CSS file which is a global stylesheet file then we have index. jsx file which actually contains this render method which is contained inside solid JS web and this render method actually wraps your app level component and serves it inside the browser so just we need to install these modules so we just need to invoke npmi command this will create node mod node modules folder right in the root directory then we will set up a Tailwind CSS because we are using Tailwind CSS as a user interface framework so I will show you how to set up Tailwind CSS in solid JS it's very easy so it will hardly Take 5 to 10 seconds uh installing this and uh if you want to check out the documentation just write solid GS and it has a very rich ecosystem and it has great documentation as well you can see that uh the references docks are very good and we will also be using sweet alert to which is a popup dialog Library this is normal alert boxes that you see but it customizes to actually see this beautiful looking C popup dialog so we'll be using the sweet too I will show you how to integrate this inside solid JS so now it is installed so we just need to say npmi sweet Alert 2 this is actually the package we are using it npmi sweet Alert 2 so enter it install this as well so after this guys we need to actually integrate Tailwind CSS and for integrating Tailwind CSS just write here integrate Tailwind CSS with solid JS so the very first article which comes right here simply go to it and they basically give you the instructions here and uh so we are actually uh just need to copy this command right here so we need to install these dependencies as Dev dependencies npm install DD first is tailin CSS post CSS Auto prefixer these are three Dev dependencies which will get added if you check in the package.json file so we have this uh dependencies which are solid JS we are using it on sweet alert too and solid JS actually works with vat development engine you will see that wheat is actually a uh environment for developing front-end projects such as react can also be developed view so similarly solid J supports V which is a pretty good uh development environment where you will be able to run your project so you will see in the dev dependency sections we have installed Auto prefixer post CSS and Tailwind CSS and the next step is to actually create a Tailwind config.js file for automatically creating it we can actually write this command npx tailin CSS in it- B so this command will actually create two files tailin config.js file and post CSS config file so just execute this command and you will see in the left hand side it will create these two files you will see tailwind config.js and this uh post CSS one so inside your Tailwind config.js simply copy this code and I will just paste it right here it's very easy to integrate tement CSS all the instructions are given and then it is telling to us that inside your Global index. CSS file right here this is a file simply copy paste this code that's all now you can actually use your Tailwind CSS classes inside your jsx app level component so here we can give it a and the very first difference if you notice guys in react JS we actually use class name but in solid JS we can use class directly like this this makes it very much easy to write jsx because in traditional web development we use class so we don't need to write class name right here we can directly use class here and then we can use some Tailwind classes BG that 500 and we can say person CR app in solid jss so if you want to run this application uh you simply write npm runev so this will actually start your development application at Port number Local Host 3,000 and if you navigate to it you will see that so the classes have been successfully applied you will see that so so we have W full class as well you'll see that so so the very first I think I think I need to show you guys the very basic concept of solid JS which actually based upon signals so solid JS uses a concept called as signals which is called how the track changes how they react to changes in the state so they manage state by using signals so first of all I will show you a very basic example so in react JS we actually use a state by using U state but inside the solid J we have a hook so let me take a very simple example set count set counter and this will look very uh familiar to you when you use react CHS but in this we have this create cre signal in react sorry solid JS if you type here create signal automatically it will be imported from solid JS if you see that and here you can put a initial value this counter is actually a function not a variable in react GS this counter is a variable and this out set counter is a function but in solid GS set counter is also a function and set counter is also a function and here you can put a initial value of counter let's suppose zero and now we can simply embed this value let's suppose count we can say that in paragraph the current we can access this using the current value of counter is and then in curly bracket we can say counter if you just write like this counter if you don't put the parenthesis you will get a error in solid JS you can't directly it will say current value counted is zero but this if I change this to to Let's suppose five it will still work but the correct way of accessing the state this is actually a function so we just need to say here parentheses so right now this F also work but this is a recommended way this is all this is a function not a variable and now I will simply add a button right here to actually change this state we can say add and we can actually bind a on click to it so when we click it we can execute this function add we can Define this function like this and uh when this button is hit by the user so when this button is hit by the user you will see add is not defined so just put a parenthesis right here I think now you okay so whenever you call the function you just need to write parenthesis it's a function so I'm just telling you if you coming to solid JS if you are a beginner you just need to first of all know the very basic concept of signal before we can develop the cred app so here when you click this button this function will execute and what this function will do it will actually call this function set counter you will see that we are calling this function set counter and right here inside this function we will increment the value of counter by by one like this and uh now if you click it so I think we have made a mistake right here sorry again if you see guys this is not a variable that's why it is creating error because if you see if I click the add button it will simply showing the function right here it's not a function it's not a variable so we need to Simply write like this counter parenthesis so now this is actually a function we are calling this function right here and if you see as we click this so let me see let me rerun the application uh npm runev uh sorry guys I forgot to do this this is uh we just don't need to write parenthesis here because if you just write here parenthesis in the add function it will only execute once if you see the six the value is increased by one and if I again click this button nothing will happen so you don't need to write parentheses here we are simply calling this function so whenever you click the add button we will call this function programmatically so if you see now this will work if I click the button the value of counter will changed and it will be incremented every time by one so I just want to show you a benefit of the base component will only execute once so in solid chairs as compared to react chairs it actually uses virtual Dom but in solid JS we don't use the concept of virtual Dom the app component that you see right here it only executes once whenever the application starts so let me write a console lock statement right here so let me say app component is loading so if you see right here uh this ex this statement will be executed in the browser console only once you will see that this statement that you see right here app component is loading so this is one if I again click it you will see that this function this statement is not repeating again and again this is the biggest advantage of using solid JS guys because the component only renders once and uh right here if you add one of the static statement this is uh person C app because this is a static statement this is not dependent upon this state that you are referencing right here which is counter state so this will also execute one so let's suppose you can have another function let's suppose you can declare another state right here name set name and the initial value of uh create signal will be let's suppose you are accessing this one uh my name is like this so this state is totally different bit to the to to this this state so counter is not related to name so if you now execute right here the this this statement will only execute once and if you also check the elements right here whenever you click the add button the thing that you see this will remain constant this H1 tag this Gotham's value static this value is not related to The Counter VAR value so that's why it will not re-render solid JS doesn't reender it only re rerenders the stuff which is related to The Counter stuff so if I again click the add button only this statement will change the current value of counter rest of the stuff will remain constant and it doesn't reenter the component so this is a biggest advantage of using solid GS it is very good in performance whenever you deploy applications which are very large and complex if you have a lot of components then in that case it will be not reender every component from scratch whenever any state changes or any data changes inside your application as opposed to react CH so in react CH this is the biggest problem and solid GS solves these problems very easily by using the concept of create signals so now if you know your create signal one other method is there on Mount which is actually a hook which is very similar to use effect this function only executes when you're if you want to do something whenever your uh component is loaded so if you check right here this on Mount will actually loaded right here if you check the console if I delete everything you will see app component is loading and this component is loaded so on Mount executes as soon as your component loads for the very first time so in inside this section you can do something let's suppose if you want to do some kind of configuration related to your application you can do right here so I just wanted to introduce to guys solid JS as a framework w why it is created and what problem does it solve before we develop C application and in the next section guys we'll start building the cred application so I will be seeing in the next section uh now guys we will be start building the project so for actually building the project we need state or data so we will be defining the state here and uh in defining state in solid JS is very simple as compared to react CH we don't need any sort any extra Library such as Redux or context we don't you we don't need to use use state in every file use effect so there is a very simple formula in solid is you create a store in the source directory you need to create a folder it can be anything but I'm just calling it as store and inside the store you actually create the file let me call this as person data.js so you can call this file any name of your choice and uh it can be typescript file as well but as you will be working with JavaScript so we called this as person data.js so inside this we will be actually be containing all the state variables and the methods we will Define it at a at a very single level at a global level so that each and every component that we Define later on will access will get access to this file we can simply include this file and uh let me just first of all import the create store from the solid JS store so this is the basic uh method which is provided by solid JS if you want to create a store store is something like State you may call for your application which may be accessible by every component you just need to include this file and then you can simply access it by the dot symbol I will show you later on so first of all in this case we need to define the array here we'll be storing a persons data so this will be persons and we'll be having set persons very similar to react but here we will use this create store method and right here we will be storing it inside local storage so we will say Json dopar local storage. get item and we will be defining it as persons so here we will simply say U if the local storage is not defined in that case we will be defining a array of users so so by default we will have two records available right here we can simply Define these records so I will later on show you how to iterate through them we can have another JavaScript object right right here this is just a static data so you can basically pull this data from API database anything you can do it so the concept will remain the same so I just want to show you how to display this data on the browser so now you have defined a store guys and right here we defined a array of object which contains two objects right here name email country these are three properties and now we can simply export this so how we can do that we can simply say export con export and parentheses uh squirly bracket and simply export this from this file so now this store that you created is accessible by each and every component that it will import so this is the very fundamental thing that solid J support it allows you to actually declare state in a single file and then you can reference that state in each and every component you don't require Redux you don't require context you don't require any special Library which you saw in react CHS no very simple setup you define the create store you define your data and now you can actually go to to our app.jsx and right inside this file we can create uh two components let me create a component here first of all to show this data on a table so we'll be creating this component called as person table so right in the source directory just create a components folder and just create uh persons person table. jsx this will be a simple functional component and person table it will return so we can now include this component right here person table so it will imported from the components folder you will see that so if you refresh your application if if you go Local Host 3,000 so if you go to the console uh it is saying that person table l jsx oh sorry we accidentally imported react you will see that so we don't need react here simply now you will see guys person table is showing right here we are actually including components so solute J if you have a large application you can split your code into multiple component just create a components folder and just write it is very much similar to react CH it's a functional component basically and uh right inside this component we will Loop through our users which we defined in the store file if you see we Define this data right here now this data that you define it is similarly accessible in this component we directly can simply import this import persons and you will see automatically vs code will do the importing you it is importing it from the store file person data just make sure that you written the statement export person so that it can be importable if you don't write this you can't import this so after that we can simply uh loop through so right here we can just write a console log statement right here this is a person table component so right here we will actually have a table inside this uh table tag you'll be giving some classes to it of Tailwind classes minimum width full divide uh y divide gray 200 100 margin top I will give it eight after that we will say table heading which is name which is email and lastly for we will show you profile picture later on I just want to show you how to Loop through the data in solid JS so we have if you see if you refresh it we have these three columns name email country and now if you want to Loop through this data we simply uh right here in the table body so solid JS does provide us a for each Loop it has its own conditionals you can use for each right here but we'll using the solid JS which is this for Loop that is provided it is built in inside solid JS if you see it is imported so this tag inside this we have the each statement and here you will provide your persons so we can import this persons right here that we imported as defined right here inside the store file so we are referencing directly you will see that we imported just imported it so no complex setup we are simply references by including the file of store this is a main Simplicity of solid JS you can the state is very simple to Define and include now in the we have this person for each person we will have the index variable and this is similar jsx we have the loop right here and we can Loop through that TR and we can simply say here curly bracket we can say person do name like this and then we can say person. email like this so very simple so this is all react chers person. country that's all so if you refresh so you will see that guys uh if you see the data is coming from local storage so for this I need to refresh the browser here or you can open your application in a brand new incognito window so that the different browser Local Host 3,000 and now you can see that that data that we defined is coming you will see that this is the simplistic use of solid JS guys if you want to do this similar thing in react CH it will require a lot of code it will require a lot of external Library Redux in some cases context API so it's a lot of messy things in react JS but in solid JS it's very simple you define all your state all your methods in a separate store file in in similarly that we defined right here we export it and now in any component that we defined in the application we can directly import the state and directly we can reference it this is the magic of solid GS so it has speed it has Simplicity it has everything so it doesn't have virtual Dom so you will see the component will render on only once you will see person table component if you make any sort of changes it will not rerender because it doesn't involve virtual Dom so this is the thing about solid JS so now what we can do we can simply add a form right here where we allow the user to actually enter information such as name email country profile picture so we will be looking at this in the next section uh now guys in this section we will be developing the a simple form where we allow the user to actually enter this information name email country look also look at the profile picture as well so for that we just need to create a brand new component in the components folder so just create this person just follow Pascal case so person form jsx so just create this functional component right here and now we can include this component right at the top which is person form so we can can see we have included that and uh now we can go to that component person form right here we can delete this statement react one so right here guys we just have a simple form right here to actually for first of all doing this we need to actually declare some State variables in this so whatever the user will write we need to store that so we'll be again be using Create signal so we'll be using name set name and you using Create signal once again so create signal is the main you will see a lot of create signals used in solid J it's a main recipe of building solid JS application similarly you'll be doing it for email as well then we will have for profile picture so profile picture so in this we will be storing the base 64 URL we'll be encoding the base 64 converting AR buffer to Bas 64 and then storing it so again we'll be using Create signal and initial value will be empty and then we'll be doing it for the country as well set country and lastly we do need to have a reference to that image input so that whenever we submit the form that input is cleared so form is reseted so we will have this again this create signal this time the value will be null by default these are the state variables which are required for this person form so this is specific to this component that's why we are not writing these in the store file because this is specific to this person form component that's why we just need to write this in this file only so after you do this uh we just need to have a form right here we can simply write a form and uh we can give it a class of space y4 and uh so right here you will have a div and inside this you will have a label block text font medium so these are all Tailwind classes text gr 700 so the label will be simply name so here we'll allow the user to actually enter the name and then we will have input text type will be text and uh we'll be giving actually this class empty margin top one blog width will be full and it will be rounded on medium devices border gray 300 and it will have some Shadow on small devices so this is a pseudo class Focus be giving a border of indigo 300 Focus rink Focus ring Endo so CSS is not necessary guys I'm just writing it to Simply style it you also be giving opacity and it's required so if you just refresh your application you will see this name input is added right here if you see that and just make sure inside app.jsx just give it a container class right here so it will have some container class applied just zoom in right here uh so after you do this we just need to MX Auto P yeah MX Auto we also need to say Auto P4 so with this applied your form will be centered so it it will have some spacing from left and right and now this is right in the center position so after you do this uh we will repeat this we will copy this repeat this for the email so simply copy this and this time this will be type will be email and the label will be email so if you see there will be two Fields added name email similarly this will be for the third one and fourth one will be country so I will change it to Country input type text so this third one will be for profile picture so input type file here so you will see that so here now you can actually select your profile picture and this is country and after that we will have a simple button to actually submit the form so you can say add person you're giving a class of margin top for PX4 py padding to BG blue 5600 text right and it should be rounded on medium devices you'll have a button right here you will see that so so just button type attribute submit and here we need to attach some attributes to these uh input elements so one such attribute we will be attaching it to the form right here at the very top so when we submit the form there is an attribute right here on submit you used in react also so this is same right here in solid JS so we will be executing this function handle submit we need to now Define this function handle submit this e parameter will be passed here you need to Simply say e do prevent default to prevent the auto submission of the form and now for each input element we just need to attach a attribute right here this attribute will be the on input so whenever you start writing something right here it can also be on change as well we will be using on input so you'll say set name to be e. target. value this is the on input that we attach similarly thing we need to do it for this email as well so this time this will be set email and for uh profile picture this is actually a input type file here we will actually select a media file so for that you just need to attach on change so when the file changes in that case you'll be attaching this function handle file change so we now need to Define this function right here is simply Define this so this e parameter will be passed right here in the argument so apart from that we also need to attach a ref attribute right here ref that we declared which is set file input this is coming create signal you will see so these are all the methods that we defined set name set email set country set file input set profile picture so we are actually attaching these create signals to these individual input element so this is so whenever their value changes you will actually handle this inside create signal so after you do this simil similarly we just need to attach it for the country as well as so we'll simply say here on input set country so here uh e parameter will be passed here so e do target. value like this so in this way you can uh do it so after you do this we just need to if you just refresh nothing will happen if you click the add person button we do need to actually write this handle submit function but before that for the profile picture in this handle file change method so we just need to get the profile picture selected by user so for that we just need to declare a file variable and you'll simply store e. target. files and uh it will be an array so you'll be storing the first file which is selected by user and here in the if condition we will simply check that uh you'll read this by using file reader API which is available in browser so reader. onload and this is basic JavaScript code for actually reading the file so we'll simply say set profile picture and we'll be reading the base 64 code by using this so it will return the base 64 code and we'll be using this function read as data URL so this is provided by this file reader API now we just need to call that so we this function will get called and then when the file is successfully read then we'll be calling this uh signal function set profile picture and the F image data will be assigned reader. result that's all so now after we submit the form we can simply return alert statement right here form is submitted just to check if you refresh write something in the name email select your profile picture let's suppose so you will see form is submitted so the it is successfully executing this function so now inside this function we just need to actually Define a method inside of a store which allows you to actually add the data in the local storage so we will simply go to this file person data JS so right here if you see we have this we can delete for now we don't need this we can delete this this will be empty array if the local storage doesn't contain any data this will be assigned as empty so right here Define a function in this file which allows you to actually add a person in local storage we will Define a add person and this will take person as argument so inside this method guys what we need to do we'll say set person we'll call this uh create sign create store this function right here in order to add a new entry so for doing this we'll call this function and we will say we'll use the spread operator dot dot dot this will actually copy the previous person array and then you will add this person to this array this is basic JavaScript and the spread operator will actually copy the previous data in just present in the array and then this entry will be get added in the person's array after that we need to add this to the local storage you'll say local storage set item person and then we'll say convert this into Json convert to a Json string json. stringify and and then dot dot dot persons person that's all so we are setting this in the local storage that's all two lines of code so now we need to export this method so simply right here you can say add person so it is that easy so we Define the methods which will manipulate the state in a single file and now we can export this method and now we can include this method right inside this component we need this method so we can simply say import add person from the store file you will see that it automatically get uh imported now we can use this method inside this component so first of all we will call this add person and here we'll pass the name to be name parenthesis because it's a function not a variable so we need to access this using par es so it will get this value and similarly email to be email and then the profile picture is the profile picture lastly the country will be country very simple you will see that so after we do this uh Define this we can actually show a alert message to the user sweet alert so for that we just need to import the sweet alert package it will automatically get imported from suet Alert 2 so it contains a notification message you can say success and we can simply say user created successfully and then the third argument is the icon that you need to pass right here and uh there are various icons available will be showing the success icon and then we need to reset the form so you'll say set name to be nothing set email to be nothing and set and then for the file input that's why we given that ref attribute to it so now we can simply check call this file input right here and just check if the file input is there then we need to reset that so file input Dot value nothing that's this will reset the input field and set profile picture to also be nothing and set country to be also be so that's all and uh if you just refresh now hopefully we will able to be adding you'll see currently nothing is there so local storage is empty so we will Define a record we Define your picture right here and you can say user created successfully uh if you see uh you will not see profile picture because we in the last tutorial we haven't had it the profile picture if you see so now if you want to show the profile picture as well just add this entry right here and right here we'll have a image tag and Source person so we'll be using a base 64 for this uh because uh to actually show the picture we will actually be using base 64 code for doing this person. profile picture yeah so we can directly reference that so person. profile picture and we can actually give it a plus so if you see just refresh it the image size is pretty large so we're doing this width and height and okay so you can see that so now now the image is showing like this we just need to add a table heading for that which is profile picture so you can see that now the name email profile picture country is showing you can add any other record right here in the local storage so record is inserted but if you see the form is not resetting it if you let me see what is the problem so all the things are perfectly showing uh but the form is not resetting set name to be set name nothing set email nothing if file input if you just refresh now this entry will stay if I close this tab and again reopen that the local storage is actually the data will stay right here in the browser you will see that so you can just write any data so so another user us is created so you will see that how easy it is and uh now I will show you how to actually edit and delete as well so just inside this we will be actually be having uh the addit and delete buttons so this will be added button the here will be delete button so this I will call this as actions so this will go in a separate component so right inside components folder just say here edit edit person and similarly you'll be defining another component for delete person so we can just include this right here in the person table component so we can even pass information as a props as well similarly as we pass in react CHS for this simple we need to pass this index so that we can uh actually added the user by its ID and delete as well so for that we don't need to Define this index in the store file we can't do it so that we can directly pass this as a prop so we can say that index is equal to index like so we are actually passing index to both these components as a prop so now we can receive this very easily so we can have this property props available by default in solid Js so you can also pass information by props as well to IND individual component if you don't want to Define it in a global file you can even pass information as props as well similarly as we did in react CHS as well so so now we will be tackling this edit and delete section in uh functionality in the next section so now guys in this section we'll be tackling the uh delete button so this is a component that we created in the last tutorial so if you see in the last tutorial we actually couldn't reset the form after we click the add person button so for that the problem was very simple in the person form component we haven't attached the value parameter to the input type text parameter we need to attach a value parameter and this will be actual value which is the name like this this is the name you can see that we need to we are referencing this name right here in the value parameter similar thing we need to do it in the email as well so email don't need to do it in we have already attached is the ref parameter so this one for the country value parameter and Country so now if you submit the form the form will reset click uh basically enter any name email so it will clear out the fields so you will see the form is successfully reset just attach these value parameters right here so after we do this we come to the delete person component so right inside this delete component we have a simple button right here so inside this button we will simply have a TD tag for we have a button so this button will actually will say to the user that delete so we'll actually be attaching a class to it of PX4 py2 BG red 500 text white rounded on medium devices so if you just refresh now there will be this uh you do need to include this component I think I forgot to do this so if you see in the person table component right here we have this uh edit person and this is delete person so this is delete person right here so just refresh you will actually see this delete Buton button is appearing right here so now to actually make this button working we will actually attach a on click function right here so when we click this button this function will execute inline function which is handle delete and we will simply pass this props index so as you can see we are passing this uh property this is the from person which we are passing it this index property if you see as a property to this component so we can directly say props do index it's a function so that's why put parenthesis so now we just need to Define this function right here handle delete right inside this so it will actually get this uh index passed as as an argument right here so with the help of this index we can actually delete the user we can simply show a notification message so sweeter 2 is automatically imported so right here we have this title are you sure and then we have the text uh you won't be able to rever this so you can also show can warning as well icon then you can even show a cancel button to be true so you can also show a cancel button to the user to actually cancel the operation and confirm button color these are all CSS we can control this so what I can do I can copy paste it this you can all control it this hexa decimal colors so confirm button text has deleted and uh this will actually return a promise after you make the selection dot then and we can actually get the result and right here you can simply say if the user has clicked the delete button then we need to delete the user we'll call this function delete so right inside your store file again you'll go to that store file and write here you will Define a delete method similarly we Define a method for adding a user now we'll be defining a method for deleting the user so index using the index variable and here it will just perform filter so this is a array method available in vanilla JavaScript yes6 and right here we will say if I is not equal to index so you basically get the array which neglect this index so that user will be deleted from the array then we'll be updating this by using set persons and passing this array update persons and then we'll update the local storage by setting item once again again use json. string if I uh updated person so that's all three lines of code we actually find out the user which was and then we deleted this we get this updated array then we set this persons we call this set person every time when we actually update our state so this is coming from create store then we again update the local storage we pass this array as in setting the item in local storage that's all this function is important set persons every time you want to manipulate or change state in solid JS you call set person and it will in turn call this create store which is actually update your state automatically globally inside your application so this is the magic of solid JS and if you now go to your delete person right we will call this function delete person this will be imported if you see uh sorry what we call this so sorry we do need to actually export this so we can say delete person like this and now we can import this so we can say here delete person so it will get imported right here if you see from the store file and right here we can simply pass the index to this function after that we can show a notification message again delete it person has been deleted and we can show a success message like this so if you see now we have the ability to delete the user you'll see are you sure so that user will be deleted so as you can see we can delete any user so as we are deleting it the user is getting gone so if you refresh only one user is remaining and if I close the browser browser reopen it once again so it will stay right here you will see the local storage will actually detect only one user is available then it will show that user to you so in this way you can perform the delete operation and now in the next section we'll be seeing the update operation to actually update the details of a specific user uh now lastly guys we'll be actually be seeing how to update a user this functionality will be slightly complicated because we do need to show a alert box when we click this edit button to actually allow the user to uh actually edit the details of a particular user so right here uh go to your edit user edit person component and right here we will actually have a simple button which will so right here uh we will have a button so this one will be simply edit so we will be giving Tailwind classes to it of margin right two PX padding from the X direction is 4 padding from the y direction will be two background color will be a yellow 500 text white so if you see the edit button is ready now we just need to attach a onclick listener to this button so when we click this edit button similarly we need to execute a function so right here you'll simply say handle edit and here you again pass the index so Props do index so right here we'll actually be defining the function index will be passed as an argument right here and inside this uh here we need to actually again go to the store file so right for the updating update functionality we do need to actually have uh State variables for this we need to have storing the index for keep tracking the index so for keep tracking the index we will Define a edit index and set edit index so which user the user selects for updating so this value will be keep tracking for that so here create signal will be again we'll be using Create signal and this will be null and the second one will be for the edit person set edit person so this is useful because when we actually click on this edit button for a particular user these details that you see the previous details which should preop in the alert box for doing that we need to actually create this create signal and this will actually hold the buil-in name email the profile picture and the country this will actually show the old information to the user so that the user can actually update that so this is name email profile picture country and after that we'll Define a function in the store for updating the user so you can see all the business logic which is for the CED application is stored in the single file and now we can reference this file in various components so we take the index and the updated person as two argument to this function and we actually first of all call set persons to actually update passing the index and the updated person this will actually update that user which has this index and then it will update this uh updated person sorry this is updated person so it will update this information which is passed which will be an object which will contain name email profile picture country and it will actually update that that info with that index number so you can you may say that various indexes are there 0 1 2 3 so we just need to detect which index the user has selected so let's suppose the user has selected the first user to be updated so it will actually have this value index to be zero and the updated information whatever information the user provides so this will manipulate the state again we are using this uh updated person this is the data which is coming so again we are calling this function set person so every time we will call this function set person when we want to delete update or add person this is the create store function so after we manipulate or update the state again we need to say local storage set item persons json. stringy file very simple persons that's all so this is all now we just need to update all these variables and functions so we'll say update person we will say set edit index set edit person so we are updating all this edit index as well edit person as well so we are updating all this exporting all this in our export one so now we can import all these variables methods that we there inside the store file which will manipulate the data for state of the application now we'll move to the edit person right in the handle edit function we will actually require the function set edit index so you can see it automatically imported from person data we will set the index pass this index which is selected by the user and then again we will call this set addit person and here you'll pass the index persons. index and then we will again use site alert which is site alert will show a simple popup message to the user added person and then we'll be showing a HTML right here and we'll be pre-populating the old values such as the name country email address and profile picture so we'll be giving these classes well to input so we just need to attach this value parameter which will be coming from so it will be coming from edit person dot it will be a parenthesis because it's a function not a variable in solid J dot name and then close the parenthesis so here this added person that you see we actually got this addit person so this added person that we defined right here if you see this is a function and it has a property name so we are actually accessing this using again this parenthesis if you see parenthesis you'll see do name this value will get X similarly we'll close this we will copy this repeat this for email this will be ID will be email and this folder will be this will be email this will be for profile picture input type will of five so the value will not be there just delete this for this then we will have for the country that's all and uh after you do this uh we will have a simple so after you do this you will close this you will have another property here which will be Focus confirm and we will set it to true false did open this will be a here will be a call back function right here uh let me just show to you and if I click edit button I think some error is taking place in the console it is saying persons is not defined it also need to import the persons as well so the persons is also imported you will see the persons are actually this one so all these things we are exporting from this file so we are simply showing it so if you click the edit button you will see the details will be prepopulated this is a name email address this is a profile picture you need to update the you need to Simply you can choose any other profile picture and this is your country you can change all these values then click on okay so when you now click okay we now need to actually update this information so so this is slightly complicated so what I will do uh I will show you let me just copy this and then this is all happening in that uh popup window if you see uh I think let me just paste it here all the source code guys is given in the description you can directly purchase the full source code [Music] okay I think this is creating so here what is doing guys you can see that basically up till now we written this code right here if you see Focus confirm false and here we actually for the profile picture we will actually given an ID if you see right here to the profile picture profile picture we simply targeting this using query selector we are simply if the profile P picture is selected by user they want to change it then this event handler will automatically get fired change event handler and then handle file change would be called and here e parameter will be pass set edit person we will call this function set edit person so we'll get the value we have given each input field a ID parameter if you see this is ID Name ID email so we will get all these values name email profile picture country after if there doesn't please enter all the fields we will show a message so you will read the profile picture again by file reader API again we'll do the same thing and we'll read it as a base 64 URL and then we will resolve this promise name email profile picture and Country and this will return a promise so if the update process buttton is clicked we will use this function which we Define in the store file update person if you see we are passing two arguments to this which is the index and the update we are passing this edit index and result. value so edit index is actually coming from this function right here you'll see edit index so whichever whichever user they want to click on edit so now if you want to change the name click on okay uh let me see just refresh here let me inspect element what is there it is saying that update person is not defined I think we update person so now this update person will be available to us you will see that so now if you refresh click on edit if you want to change this edit index is not defined okay you also need to import edit index put a comma so you can see the person has been updated you can also change the profile picture let's suppose if you want to change it this picture you'll see the profile picture is changed you can delete a user you can create a user so the advantages of solid JS I already told you guys in the starting of the video it doesn't contain uh virtual Dom as opposed to react CH it doesn't rerender the component it only updates the component when it needs to and the state you can see all the state has been defined in a single file we have created the store file person data all the business logic is contained in a single file and then we are importing the store file in each of the component so all the methods that we need we are simply requiring it at the very top and using it so very simple application very solid ja and uh now if you want to deploy this into a platform we will also show you the deployment process as well let's suppose uh I so solid JS supports various platform I will show you versal platform which is very famous for deployment so we already have account here and uh so first of all uh we do need to actually create uh let me also show you how we can build this solid JS application which is very simple uh in your V configuration you need to actually install a plug-in right here which is weed plug-in compression so this is useful if you want to decrease the bundle size so if you don't include this if you directly build your application by mpm run build so what should happen basically it will actually create a disc for folder right inside your will create a disc folder uh you'll see that it will actually contain this assets folder the size here will be the Base Library size is 95 kilobytes and which is very much lower than react chairs react chairs size is almost 150 kiloby so solid GS libr is almost small so if you g a bit then it will reduced from 95 to 27 so I will show you how to uh uh just decrease the bundle size by compressing it with the gzip and broadly which is two famous compression algorithms so inside assets folder you will actually see this only this single JS file you will be importing it 94 kilobyte size now there is one plugin out there in V which you can install it as a Dev dependency which will allow us to actually decrease the size even further so weed plugin compression this is the name of the library so npmi Das Das D so this is the actual Ved plug-in compression simply install this so it will install it as a Dev dependency so now I can see it is installed right here if you check so it is installed as a Dev dependency V plug-in compression so just move it into the dev dependency section and again include uh execute npmi that's all so now inside go to your v config.js file this this is a file so here we need to actually add this code so right in the plugin section uh we will be adding this code right here uh which is uh in the plugin section V compression so this wheat compression will be coming from from wheat plug-in compression so you can see that this will be coming and it takes three options first is the algorithm so it basically supports all the famous ones which is broadly or gzip so let me show you first of all gzip if you compress it your bundle size of gz and then the extension here will be do BR sorry Dot gzip and we can pass the third option verbos to true so it will only just tell you the it will print out information about the compression process so if you just write this like this and one more thing you just need to add this in the build if you so it is already added yes next you will see that so if you now execute this npm run build so now the size will be considerably reduced because it is applying this gzip algorithm so it will now have two files right here two additional files which is the Z if you check your disc folder so it has two more files which is gzip file this is your main file 94 kilobytes this is your gzip file which is created 27 kiloby this is a CSS which is 8 kilobyte and GF file which is 3 kilobyte so by default all browser including Chrome browser or Firefox Internet Explorer apora Safari supports gzip conf compression by default so if you deploy to verell it will automatically compress your application using Gip but if you don't use versal if you just use shared hosting this is very mandatory step that you want to compress your application using gzip or broadly so let's suppose if you want to now use broadly here you can simply go to this and just change it to broadly compress and then do V for broadly so this is a second algorithm so the size will even reduced you will see now there will be this file BR file which is stands for broadly so even the size is reduced 94 kiloby it is now 24 kiloby so broadly even more reduces your size so it typically depends upon the server which file it will serve either broadly or G depending upon the configuration of the client so now we will deploy this application to verel and we can simply write here versal D- PR this will deploy your application for versal it will ask some questions set up and deploy I will say yes and which scope you want to deploy to I will say no what's your project name I will say person C app in which directory look code is located it is there in the same directory so now it is uploading my want to modify these settings I will say no so it is actually deploying this project to production so it will give you this and one more thing you don't you need to delete this file which is present right here which is this file pnpm block yml so just delete this file before you deploy your project to versel so simply delete doesn't rerun your application so so now it will give you your production URL once it deploys the application so now your application is deployed very simple solid JS application just copy the URL and paste it if I refresh my dashboard as well if you see this file this project is successfully deployed if I paste the link this is you first of all need to you can see this is a project you will see that so so you can see that the application is deployed and is working perfectly fine so in this way you can deploy and make your solid JS application we can edit the details like this you can delete this so the full source code guys is given in the description you can directly purchase it if you want the full source code with full documentation and directory structure I will provide you full support so thank you very much for watching this video please hit that like button subscribe the channel as well and I will be seeing you in the next video

Channel: freemediatools

Views: 38

Keywords: freemediatools

Id: 9W1Gr5x3z2E

Length: 86min 53sec (5213 seconds)

Published: Sat Jul 13 2024