Creating Complex Forms in ReactJS - Collections, Validations, Flow

hello world and happy hacking my name is mark from dev mentor live and today i'm going to show you how you can use just basic react in javascript to do complex forms and make a good user experience without installing a bunch of libraries and creating a bunch of dependencies to other people's code so this is probably going to go over several days because uh i want to be able to show you as much as possible we're going to start with this form here and when you click on add another address it's going to add another address to the page and you're going to be able to select which address that you want something shipped to and eventually we're going to be having page 1 page 2 page 3 so like a wizard layout and i'm going to show you how to build these form elements up from scratch and how to do validations and all that stuff again just javascript code nothing special nothing fancy nothing difficult but simplicity is the enemy of complexity and i like to make things simple which just means writing your own cook so if you're on the live stream go ahead and hit that like button so that i know you're there and feel free to say hello in the chat and to let people know where you're hailing from currently i am in puerto vallarta in mexico and we will be getting going here in just a little bit meewat says could you do a multi-step form with conditional step by a step two we can select the option to go to step three or step four yeah that's going to get built into this so yes the answer is yes um subscribe to channel if you haven't already make sure to tell a friend about the channel so let's grow this i'm at 10 000 subscribers and i'd really like to get to 50 000 uh in the next six months or so a shout out to my hardcore supporters if you go to my youtube channel there's a little join button and if you click the join button and you select the hardcore membership um every friday i do a live stream that's only for my supporters and instead of just doing it on youtube where you can talk in the chat and i can actually you know just interact with you with comments we can actually jump on zoom together and i can help you debug your code and show you how to implement stuff etc that happens every friday between two and four pm uh us central time so if you're interested in that sort of thing it's only 25 bucks a month that really helps out the channel and it's quite a deal considering that normal private sessions with my students cost 80 bucks an hour speaking of which let's just go ahead and do a quick plug this is my website devmentor.live and if you're interested in upping your javascript or react or just web development game in general i offer private one-on-one mentorship every day so you can take a look at that let's see what we got in the chat hey we got derek derek is one of my students we got dennis hey dennis dennis is a youtuber um we got c.s orlandi hi guys i'm watching from sun pow brazil how awesome cool glad to have you guys along for the ride i'm actually going to do something that i haven't done before um i want to do a shout out to some people that i follow on youtube people that i like people that i know and hang out with in um in a discord chat so if you haven't already subscribed to deved on youtube consider subscribing to him he drops a lot of awesome knowledge bombs my favorite part about dev ed is not just that he does a lot of different topics um but i really like these v-log sort of things where you know like he just he's talking to like a like a person he's a very personable guy he's fun to hang out with um if you want to up your html and css game i can't think of a better channel to subscribe to than kevin powell kevin powell is just a wonderful dude every time i've ever interacted with him he's always been friendly and happy and he really knows his stuff and then there's jesse from codestacker jesse again he's one of these guys he touches a lot of different technologies so if you're looking for crash courses he's a great person to follow i like watching jesse's videos on visual studio code because i always end up learning some trick or hack that i didn't know about and finally this is josh como he does some really incredible ui work uh he's a reactant javascript developer but he's also a designer and i've learned a lot of really cool tricks and tips from josh i would suggest you check out his blog it's really cool it's totally worth it um and his animation work is absolutely incredible so yeah check that out so josh kumal jesse from code stacker kevin powell and dev ed uh these are the people that i suggest you follow this week if you haven't already you can follow me at twitter.com devmentorlive i don't do a lot of tweeting and i'm not really into uh discussing too much stuff about politics and whatnot especially in today's environment but i do post here whenever i'm going to be doing a stream and every once in a while i'll actually chime in on somebody else's uh topic and then of course dev mentor live so let me just close this window now and come back to the tutorial and we're gonna start by actually looking at the code that we're going to start with which is what you're seeing here being displayed in the browser by the way this is just a create react app i haven't installed next.js for this it's just simple javascript can react marivin says greetings i hail from the philippines welcome to the live stream um again if you haven't hit like already go ahead and smash that like button it really helps out the channel drop a comment in the comment section and tell us where you're from and if you want to hear me do a topic in the future you can go ahead and drop that in the comments comments as well and of course as a favor to me just tell some other developers about my channel all right so this is what the code looks like it's just create react app with tailwind installed because you guys know that i love my tailwind and i love my javascript and i love my react and i'm going to close the explorer because we don't really need it what you're looking at here is the html and css for this code so right now i mean it's in a react component but there's really no javascript yet um so like for instance our input fields are just html input fields but i'm going to show you how to make really nice text field components for yourself that as you work on over time and you build up you'll have yourself a nice library of components that you can use in your projects that you know really well and you can modify them to do whatever it is that you need to do i do have a couple of notes here today the things that i'm going to try to convey to you is component design and i want to explain why i break up stuff where i break it up and why do i break it up um i'm going to talk about the dry principle for a moment a lot of people think that it just means don't repeat yourself which is true but it's not about having the same characters in the same order show up ie code duplication it's about if you're going to have to make a change to something you should only have to change it in one place that's really what the dry methodology is about so for instance i have you know let's see i have how many i have 10 different input fields on this page if i wanted to change the styles for my text fields or if i wanted to change the functionality or whatever i'd have to make 10 different edits to this page to make it apply to all these text fields and that's really just not the way that you should be coding so i'm going to show you how to drive this code and i'm going to talk about simplifying your state management because people use redox they use reducers they use context when it's not needed they make their state overly complicated we're going to do the opposite we're going to keep our state very simple and i'm going to just show you some simple patterns to keep your state simple and then i'm going to talk about not doing state twiddling which is like you know you turn this dial and you press that button and you tweak this a little bit um you're setting it's blurry it's loading it's submitting you're you're setting all these state values and then you're checking the state values um it's much better when you're doing functional reactive programming which is the type of programming that i focus on uh using javascript and react is to just have state and evaluate that state so don't do a lot of state twiddling evaluate the state and i'll show you what i mean by that here in a minute as well uh looks like we've got 12 people on that's pretty awesome again if you're just joining us say hello in the chat tell us where you're from and if you have any ideas for future screencasts as long as it's javascript react html css web development i'll consider doing a uh episode on something you want to see so again we have some basic contact info name email phone we got some shipping info and these the idea here is if you click on this add another address you're going to get another set of form fields and then you can use the check box to select which one is the active one and these three dots are representing three pages in a wizard i've only done the markup for one page so far um maybe on the next screencast we'll get to like page two and page three and then of course you got a button down here um so let's get going long time no talk hey it's mike wolfe mike is one of my most recent students and i look forward to doing some sessions with him and apparently he's in boston massachusetts that's awesome although really cold from what i hear i wouldn't know because i'm in sunny puerto vallarta drinking surfaces and eating tacos so hopefully you don't freeze to death wherever you're at let's go to the code so the first thing that i notice here is um i want to start with these inputs actually because the concept of dry again is like you should have a single source of truth a place where you make these changes and if you just litter your react components with intrinsic html elements you're going to be repeating a lot of stuff so just as an example if i was to highlight this code right here and then do a find we can see that this code shows up four times and basically it shows up each time i have a text field but there's something wrong here right because i have more than four text fields on this page so why when i do a search for these common uh classes why do i see only four of them show up when i should be seeing a lot more and it's probably uh not only do i have some duplication i also have like uh padding two multiple times in the same tag so let's do a search down okay so now i have six which one two three four five six seven eight nine i'm still short three so this is an example of um if i had a single react component for my text field i wouldn't have to make css changes to all these different places so we're going to start there i'm going to come over here to my src folder and because i do atomic design which is essentially you have building blocks like ui elements think of them as lego blocks they're the smallest react component you can have and when you put multiple ui components together multiple blocks together you get a feature or you can think of like a box of legos like this is the castle set this is the death star set etc then you take a feature and you put it on a page but for right now we're going to focus on the ui so a text field is essentially a form element so we're going to create a folder called form we're going to create a folder called text dash field and again i make all of my components with almost all of my components as folders not as files because i want to be able to add images css json files other assets that are part of that component and a folder is a nice way of encapsulating that data so we're going to be creating our first component here we're going to call it uh index.jsx inside of the text field folder and if you look up here in my code editor you'll notice that the file name and the folder is available and that's because the first file in any folder is going to be called index.jsx and if all you see is the file name you're going to get lost pretty quick so if you go into your your visual studio settings and you type label you'll see this workbench editor label format set that to short and you'll be able to see the folder name and the file name all right so i have some shortcuts because i'm a big fan of writing my own snippets so if i type rc and i hit tab it's going to generate out a skeleton react component for me and we're going to name this one text field and it's going to have some props and what i'm going to do is i'm just going to extract out this input field let me find the first one i guess the first one will be name so i'm just going to literally cut this out of the main file and i'm going to put it into my text field component file now already i know what properties i'm going to need based on what i see here so i'm going to need a type and because i want to be able to do this as a password field or a number field or an email field i'm going to default this to a text field so it's got a prop called type but it has a default detect text so if you don't pass that value it automatically gets that text then i'm just going to put that in the props here so text next we have an id and the reason that we have an id is because the input itself is actually not the only part of this there's more to it we have a div that surrounds our label and then we have an input and that whole thing is surrounded by another div which is what gives us this nice layout so what i'm going to do is i'm actually going to cut out that whole thing put the whole thing in here so our text field is a combination of a label and it's also going to have these other values so let's put the type back in um we're going to leave the styles because here's the thing is like if the styles for this component are in the component anytime i need to change the text field for my website and i want all the text fields to look the same i now have one place to make that change which is inside of my text field component which is why we're doing component driven design the next thing is is this id now normally you use ids and elements because you're going to do like document.getelementbyid and then you're going to do something to it with javascript but we don't typically interact with the dom that way and react the reason for this is actually because of this html4 so if i come back over here if i click on the label for phone it automatically highlights and focuses the the text field that goes along with it uh i'm not seeing my browser all of a sudden why don't i see my browser yeah i'm not sure what happened here this was working fine and then it just stopped working so uh ea technology two window and manual all right fine i will just delete that and add it back uh window capture create new firefox set the firefox window to firefox which is here okay so now you should be able to see it sorry about that no idea what happened um okay so anyway when i click on the label for phone it automatically highlights the text field and so that's what i mean by my component is about a text field but there are other things that go with it so we know that we're going to also have a possible label so we're just going to replace this text with label we're going to put it inside of curly braces because it's a javascript expression then we have this id and you can see that the html4 and the id here um they're they're the same the way that it knows which field to focus when you click on the label is by this html4 and this id so they have to be the same so what i could do it probably each of our labels are going to be uh unique on a page so one thing i could do is i could take the label and create an id out of that label and i think that's what i'm going to do so i'm going to do something like label i'm going to split it on the space in case there's spaces in it and we're going to call this id and then once we split that we're going to do a map we're going to map over those words so it's going to be called word and i want to do i want to strip out any special characters so let's do word dot replace and we're going to replace it with a regular expression and let me go ahead and close that out the regular expression is going to be um a global replace so slash g at the end for the for the global flag and the value is going to be um a carrot and then square brackets whoops carrot square brackets and i want to allow a through z and the plus sign means it can match more than one and my carrot actually has to be inside now the thing is here is i want to make sure that they're all lowercase because i could match uppercase and lowercase but i think what i'll do is i'll just do a two lowercase like this so we're going to take the label we're going to call two lowercase we're going to split it on the spaces so that we get an array of words we're going to map over that array of words and we're going to strip out any special characters and we're going to replace it with an empty string then we're going to join it back together with hyphen so if i do a console.dir or log or debug and i just print out the id and then i come back over to here and i'm just going to do an import text field from i don't have next.js so i can't do one of these to get to the root so dot dot slash ui slash form slash text field i can now take that and place the text field right here and we can start off using it so the label for this is going to be your name and the type defaults to text so so far we don't have to do that and this should be enough just to get it to display on the page i'm going to inspect element so i can see my console and you can see that we get your dash name so this is going to be the id so to use this now i can replace this html4 with that generated id and then i can also replace the id down here in my text field with that id and so now your name comes back and if i click on it it'll automatically highlight the text field that's associated with the label okay so we've replaced the table replace the id let's do the placeholder we're going to pass in a placeholder as well so we're going to pass in a placeholder if the placeholder is passed in then we're going to use it and if it's not we're not going to use it so that's conditional rendering um so here we're going to add placeholder and we're just going to put our string in there and so now you can see it pop up in our text field so we're well on the way of having a customizable text field again this is not easy necessarily but it is simple it's just basic javascript there's nothing complicated here i would say that a material ui input is far more complicated than this also you constantly have to look up the documentation and stack overflow and issues whenever you can't figure something out so an input field is going to need some sort of value so we're going to add value as a prop and because of the way that react does state change we're going to have to have an on change handler so that when somebody types into the text field we detect that with an on change and then we set it into state i'm also going to default this to just an empty function so that just like if we don't supply the type it automatically defaults to text we're gonna default the on change to an empty function so that as you change the text if you don't provide an on change it doesn't blow up so on change is going to equal on change but i'm actually going to modify it a little bit because the way the on change usually works is it's going to take an arrow function and that arrow function is going to pass back the synthetic event so over here when i add the on change normally what happens is i get back that synthetic event and then i got to do something like e.target e.target.value to get the actual value right i'm going to make it so i don't have to do that because 99 of the time when you're dealing with the text field you don't care about the event as much as you care about the value so what i'm going to do is i'm going to actually return e.target.value as the first thing e dot target.value then i'm going to pass the event as a secondary property so we have two arguments now the the value is the first thing and then the event is the second thing and here's what this allows us to do now we're going to be getting back the value now i can go straight to taking that value and adding it to state but how do i do that well you have to use the state hook so we're going to import you state from react and to use that we're going to go to the top of our function because uh hooks have to be at the top of the function and i like to just call the values for my form a variable called value so the first one is the getter the second one is the setter so values and set values and then we're gonna have a javascript object to hold these values and the reason that we do that is because we want to make sure that the essentially the type doesn't change if it starts off as undefined and you're treating it like an object bad things are going to happen if it's supposed to be an array but it starts off as a as an undefined or a null you try to call map on it and it's going to explode so an empty object if it's going to be an object an empty array if it's going to be an array in our case we're going to be calling things like value values.email values.name so i don't want to leave it as an empty object because if you call empty object.name you're going to get undefined so what i want to do is actually give it a name and then just make it default to an empty string because it's going to have a string in it i want to keep using the same interface as the value that it's going to be so in this case a string so how do i set the value well now i can just call set values the setter will give you access you can either just say you know set values and then just pass it a value and it will put that value inside but in our case we want to since it's an object we want to we want to keep all the previous values that were in that object and then append one key so to do that we're going to create a object we're going to surround it with a parenthesis because if you don't then javascript thinks that it's a javascript function body not an object so what we're going to do is we're going to spread out the previous values so if we already had set email and phone number and now we're changing the name it's going to copy email and phone number from the previous state put it back onto the new state and now we can add the name and if we change this variable to just be called name instead of val we don't have to say name colon name because in javascript if the object label is the same as the variable or the object key is the same as the variable name you only have to do one side so then we're going to finish off our object so that's going to be close curly brace and then our parentheses and then we're going to have another parentheses here so when you type into this text field the on change handler is going to happen we're passing that into our text field the text field is going to call the on change that we pass in we're going to be returning back the value now the value shows up here in our arrow function we're going to call it name since that's the thing we're changing and the key inside of the object is called name finally we're going to set a value and the value is going to be name and what i'm going to do because it's actually values.name i'm going to destructure so i'm going to say destructure out the key of name from values so now when i type in here and i go over here to my components in uh react dev tools i can see now that there is a value for mark and this will change as i type a different value because the on change handler is firing and then it's passing the value that i typed into the text field into the state and so now you see it here and you also see if we look at our app you will see it here inside of the state okay so the next thing that we have is this email field now here's where our our text field that we just made gets really useful because i can just say email's going to start off as an empty string as well and i can just copy this text field bring it down to here paste it change this to email put you know like a fake example email my email.com and then here i can just change this to email because the key is email and i can set the value to email and then i just add email to my destructuring and now i have an email market devmentor.live and if i look at my app and i look at the state i can see that my state now has name of mark emailofmark at devmentor.life so this state object is going to handle our state but what if we want to reset our form field what i like to do is i'll actually cut this object out and i'll create a default values variable and i'll set it to that empty object that has all the keys for our form and then i can just pass that as the default state to the use state hook what this will allow us to do is just to reset our form with a button and it would just change all those values back to the default values which are set as just an object one key for each field inside of our form field and the value is a string because the value that's inside is gonna be a string now here's the other thing if i wanted to i could take this email and i could pass in a type and say it's a type of email and then what happens is this will automatically become an email field from html5 so i can delete the hard-coded email and now you get this so i can do the same thing for phone number i'm just going to copy the text field i'm going to change this one to phone the type can just be text what we'll probably do is we'll make a masked input field at some point so that we can have a phone number that has the formatting and you can't type anything other than character numbers into it and for now let's just do an example phone number so i'll just do a us format so something like 2 2 2 2 2 2 2 2 2 2 very very unique right very creative phone so same thing on change is going to now take the value of phone it's going to return that value we're going to set it to a key inside of our set values for phone remember that the previous values are being put onto a new object here's our new object right here and then that is passed to set value so the new value for values is going to be a brand new object that has all the old values plus the one thing we changed which in this case is the phone let's see we have a question we got penan from malaysia i will stay through the whole live session great teaching thank you so much will you be covering validation yes i will be covering validation one of the reasons that we created our own text field is we will be able to actually do validation on this let's add value to be the value that's passed in and so now if we missing a jsx tag i think i deleted too much there we go the nice thing about using prettier or eslint as your formatter and save making it so that it formats on save is if you have a some sort of error in your code here it won't format it which tells you that there's an error and it makes it easier to find the error so yes we're gonna be doing validation it's one of the reasons why we're building this text field that we're going to keep reusing because we will just have one place to add validation to it um so really there's just a couple more things to do i'm going to come down here i'm going to try to do this kind of quick we're going to replace the next set of form fields with our text field so this one can go away now and see what we got here this one actually starts here um so just so you know the reason that um the reason i'm using flex and item center is because i want my form fields to lay out to the whoops i paint my microphone to lay out to the right um so what i'm doing here is i'm using the flex and the item center to center things vertically and that will make each of these divs float out to the right so we're going to replace that with our text field this one is actually supposed to be our address so the placeholder could be something like i don't know one two three some place this is going to be our address address address come back up here address um and we're going to add address here we also have to do one for phone so we're going to add the default for phone and we're going to add our destructuring for phone like so okay value email will become phone email is email name is name there's phone this is going to be address address name email phone address okay what's this object input element thing i think it just needs to be refreshed yeah there we go so now we've actually got two addresses ah because this one was actually supposed to be labeled each of the addresses that you can add to this has to have a label so like home office work whatever um so we're gonna add label and i'm going to copy and paste address then i'm going to change the second copy to label and we're going to delete this address field so this is going to become label label label and here we're going to say that it's something like my office and the label is going to be label so now you see label my office when we type something in there we look at the app state we can see now that label was saved and if we look at the actual component we can see that label is now passed in as the value same thing with address now we got to do unit so we're just going to copy and paste this one more time and you could see like we've got a div with a class name of margin right two and inside of there we got a div because we're floating that or we're doing a flex then we got a label label has a class name and it's got you know html4 and then you got your input all of that gets replaced by our react custom component that we built this one's going to be called unit do something like uh int 2 call that unit unit unit and then of course we're going to add it to our default values and we're going to add it to our destructuring so you can see a pattern here now this line is done so let's go ahead and copy our our text component again come down a little bit further and we're going to start replacing this line so what do we have here let's see we have city so this is going to become city the example that i gave was austin so we'll put austin in there uh this will be city the placeholder will be austin and then of course we're gonna have to come up here and add city to our default values those default values get fed into our state setter notice that i don't have you know six or seven pieces of state i just have one piece of state it has an object inside of it and each of these have a key so we add city to our destructuring this will refresh and now our city's there so we can delete the html version of our city and just use our text field so that one ends here the next one that we're going to be doing is for the state so the label will become state the example is texas and then here our on change will become state the value is state and then we can delete this one do the same thing this time it's going to be postal code so the label is postal code the placeholder is going to be something like i don't know two two two two i guess 73301 is an actual postal code from austin this is going to be a postal code or we could call it zip or whatever but i'm going to call it postal code zip code is actually copyrighted by the us postal service so technically you can't use it and then we're going to add it back up to the top to our default state again it's just an empty string because it's going to have a string value so we don't want to change the interface and now we've got postal code and we also need state so state here and state in the destructuring and now our forum has been completely redone to use our text field so here's why this is so important you're sitting in your office and the designer sends you an email and they say well we really like the page that you made but we don't want to have a border around these things we only want to have an underline and when you mouse into the field with a focus we want that underline to turn purple if the code was the way that it was here where it wasn't dry we would have to make a change to six different fields and that's just for this one component if we had you know a giant website with a whole bunch of pages and a whole bunch of different components we'd have to do a find and replace through all of that and that's very dangerous but now that we've encapsulated the concept of a text field in one place when they come by and they say well we love it but we'd really like you to change it so that it just has a border on the bottom you can say okay that's fine we can do a border on the bottom and now as you can see we only have a border on the bottom and i would also have to get rid of the shadow because the shadow makes it look like there's there's more of a border and if you're ever wondering what the classes are tell when css is really good documentation so if we look at border we can see that there's border and then you could say you know like b which is for bottom and let's say that it's going to be two pixels now you can see that i was able to change all nine of these text fields by just editing one file and that is why component based design especially using react is highly useful but component based design in anything you do will make this a lot easier whether you're working with rails or pure javascript or html or whatever so now when we mouse into this thing when it's focused they want the line to turn purple we can do that too there is a helper class inside of a tailwind called focus and so now we can say that when you focus the border color is going to be border color border oops and they wanted it to be a purplish so purple and we have to give it a hue so i don't know 400 and now as you can see whenever you are moused into something the border becomes purple and again we only had to change one file we didn't have to change nine different places let's also get rid of that outline so no outline and it might not be no outline let me look outline outline none outline none so now you can see that the the the text field has a line underneath and the line turns purple when you put your mouse in so it's exactly what um the design people ask you for but what if we also wanted to make it so that when you are actively selecting it that it's not just the line that turns purple what if the label is supposed to turn purple and also the placeholder um or whatever you type in it is supposed to turn purple how would we do that well the focus thing works for the underline as you can see it's not working for the value and that's because this class doesn't get applied to the value that's actually a different thing so what you can do is you can say okay well again we got this single piece of component we can actually work this into the component so we can import you state from react and we can add this now we can say we have some state it's going to be called is focused and set is focused and that's going to start off as false so it's not going to be focused by default what we want to do is when they mouse into the input field we want to say on focus we're going to call set is focused to true then we're going to do the same thing for on blur which is when you take the focus out of it and that's going to become focus is false so now we have a piece of state that tracks the focus if we were to inspect our element we're going to go over here to our components and we look at this we can actually watch this change so right now the state is true if i mouse out of it the state becomes false so what we can do now is we could say okay well when the thing is focused i want to actually do i want to do a class here so what i can do is i can change my class name to use a string template so that's curly braces and then backticks inside we can put the static thing which is this margin left one and then we're going to say that if it is focused then what we want to put in here is text purple 400 and if it's not focused we'll just put an empty string and so now you can see that when you put your text in here the label also turns purple and then we could do the same thing for um for this little hyphen but i'm actually going to delete it for now because the hyphen would actually be better done with css not by actually just putting some markup in but you'll notice the text of what we're typing is still not purple so to fix that we could say also when we're focused make the text purple 400. but now we've got a bunch more code duplication again so you can see that it's purple when i type and when i come out of it it's not purple anymore but i've defined purple one two three different times what if they want to change it or they want the cue to change where again now we have to make four or three different changes right so the dry principle says have one reason to change something so our one reason to change it is going to be the color changes and we'll just say active color and we can set that to uh purple 400. so now what we can do is we can use a string template again we can say okay well this is going to be a string template so back ticks come on cooperate back ticks inside of here we're going to say that it's text and it's purple but now we can turn this into a variable so we can say that this is the active color and we can do the same thing let's get rid of that extra white space we can do the same thing here so let's highlight this whole css class and let's replace it with curly braces back ticks for string template and then we can just go in here and say okay well right here this is going to become a variable so string template dollar sign active color and the same thing here for this purple 400 still works and now we can say okay well what we really want we want indigo 700 and now you can see that change has been applied to all of the text fields again hey thank you so much for kicking me some cash design bro that's our design course that's really really cool um thank you so much i'm just going to read the comments here um way back when i failed a job interview because i couldn't figure out validation with js well we're going to learn that right now mike so you're good another challenge topic is multiple controlled check boxes if you can do that in another session be great um that will be handled you see this check box right here when we click add another address we're going to add another address to the ui and then there's going to be two check boxes so we're going to do that we're going to have that situation covered form is one of the boring coding part for me but after cu coding my spirits are up well thank you and mike street says good stuff thanks for the content and you know thank you guys for watching i i'm really trying to get my live views to to have more in my live streams because i mean like we got 10 concurrent viewers on here um so 10 of you are really awesome and all the other people in the world suck apparently um okay so we've talked about well you know the designer comes back and they say well i want indigo 700 not you know whatever the hell it was and i wanted to have underscores and so we were able using component driven design or atomic driven design to make that change in just one place right okay so the next step here i would say is well let's go ahead and make this button the add another address button actually put another address in so right now our address is a single object the problem is is when we add multiple addresses we're not going to do something like and i've seen this done many times by people we're not going to say okay we'll just add a one to all these because now we can do two addresses but we can't do three or four so this is not the right approach the right approach is to now say okay well const default address values equals surprise surprise javascript object and we can just copy these out put them here now why is that important because addresses is going to become a array so now the key is going to be called addresses right and it's going to be an empty array because we're going to be able to add um multiple addresses to this form by clicking the button can you do a video on migrating away from material ui what's the benefit of tailwind i can do a video on migrating away from material ui but i can tell you the process is the first thing is you shouldn't have material ui components all over in your in your project you should make yourself for instance a text field uh component and your material ui component should be inside of here that's called a proxy object what that allows you to do is when somebody comes by later and says we want to get away from material ui you only have to make a change in this one file by taking the material ui component out and putting your own text box in because your code references your custom text field everywhere right it doesn't reference the material ui whenever i set up a brand new project i always create all my own proxy objects my own proxy components like say i want a drop down but i'm going to use react select that's fine i will create a drop down component in my ui folder and inside of that drop down component i'll put the react select inside of there then if later on i run into a thing where react select has a bug and the the you know the maintainers aren't fixing it or whatever i only have to pull react select out of that one file and put in a different select and then my whole site gets the brand new thing um and as far as tailwind uh i mean tailwind is just awesome what can i say uh i haven't written a line of actual css in like three months because tailwind handles everything one of the best benefits of tailwind other than it's really really fast to do design work like you can see here um is it makes the styles look the same across all browsers so tailwind is built has a reset built into it so when you add tell in your project the first thing you notice is all my headers aren't styled anymore my links aren't styled anymore my lists aren't styled anymore that's intentional because what it's doing is it's resetting all of the css styles across all browsers and operating systems and platforms so that you can build up your styles the way that you want things to look and then you know that it's going to look right in all the different browsers it also fixes a lot of browser uh compatibility problems that you have in css i'm a huge fan of tailwind let's see noted thoughts on style of components i don't actually like styled components because i don't want all of that noise in my javascript for this the css css belongs in a css file so let's just say somebody comes through and they're looking at my component and they're like well this javascript is nice but i really hate the fact that all the css is in here so what would i do well i would i would do css modules because now that i got this nifty little folder for my component i can just say new file styles see if i can actually type styles.module dot css and inside of here i could say something like um you know this is a text field and then i can put all of those classes in so let's say this is a text field input what i can do now is i can come down here and i can just literally cut this code out although i can't because i haven't installed style modules we'll do that in the next next session i can just cut this out go to my style module say apply and put it here now obviously i can't do it with this because it has a javascript variable in it so those pieces would probably still be in my component but all the rest of this code wouldn't be there but yeah i don't like styled components style components just put a mess of noise in your java in your react components because now you've got html and css and javascript all fighting for space when i look at a react component i want to be looking at the functionality and the layout of the react component not all that style you know at the top of my file um so anyway yeah i don't like don't like them like css modules tailwind react i don't like typescript i like my javascript i like dynamic programming besides microsoft sucks okay so our array we want to have these default values and we wanted to start off with one address in our array so we can do that like this by saying we have an array and then just doing default address values one time which is going to give us this object that has all of the address values to get this to display now i come down here and i find where are where's the division for these addresses and i can actually use these little carrots to find them so we can see that if i close this up i get all of the address fields but i don't get the check boxes so the check box is over here on the right and it's how you distinguish which address you're going to ship the thing to so let's undo that and then let's close this one and then when we collapse that we can see we've got all the address information so the division for chopping this out is right here so let's chop that out let's go inside of here and let's create a ui element well yeah why not let's create a ui element and we're just going to call this address and inside of here we're going to create an index.jsx file and inside of here we're going to create our component we're going to call it address and we can just paste this stuff in but here's the thing we don't have access now to all of these fields like label and address and uh we also don't have our set values so how do we get that in well we add them in as props so we're gonna have uh label we're gonna have address we're to have unit we're going to have city state and postal code and we're also going to have set values so now we've got this component that wraps all this together we're going to have to bring over our text field for it because it uses text field so this is going to be uh dot dot slash we're already in ui so up to form and now we can put it back in our project so we're going to also import address from ui address and we can put a single address in here again by just putting in our address component and then we can say okay it's going to take some values it's going to take a label so we'll pass the label in and it's going to take an address so pass that in and it's going to take a unit so we'll pass that in it's also going to have a city and it's going to have a state if you're wondering how i'm typing this so fast i use vim binding so one of the things that i suggest everybody does as a developer is get good at them and there's this really awesome website called vimadventures.com so if you're trying to up your vim game i suggest you play vim adventures because it's sort of like like a old legend of zelda style game and you use vim keys to move around and it teaches you how to use vim by giving you uh puzzles like you can see this treasure chest over here and there's rocks in the way and the only way you can get them is using vim shortcuts so yeah if you're wondering how i'm typing so fast it's because i use vim um so city state postal code all right so now here's my address it pops back onto the page but we're going to have a list of addresses right so that's going to be a javascript expression we're going to say we're no longer going to have these values in the destructuring instead we're going to have addresses so i'm just going to delete these other ones and we're going to now iterate over our addresses with a map each iteration we're going to have an address and then we can just do that and then i'm actually going to do instead of just doing an arrow function that goes straight to an evaluation like this i'm going to instead do a javascript object or javascript function body and i'm going to return and explicitly my address and the reason is is because now i can destructure the other part so i can say destructure out label and address oh we can't use address because we have a field call address so let's call this uh let's just call it a let's call it addie so address uh we can call that a field adders yeah let's call it adders so label address uh unit city state postal code postal code and we're going to destructure that out of adders so now we come back and our our shipping info is still there right our addresses are still there so how do we make this button spit out another address and the answer is well first off this button should be encapsulated right so we're gonna go to ui and form and we're going to create a new folder we're going to call it button this time we're going to go in here we're going to say index.jsx big surprise right then we're going to do a react component we're going to call it button it's going to have some children which is the label but we might want to have spans and other stuff so we're just going to go straight to the uh the children that needs to be in curly braces we can actually print this out now so we're going to extract it we're going to paste it in like so the children is what will get expanded here inside of this expression and now we're going to have an on click and the on click is going to have a default value of again just a empty arrow function so that if we don't provide an on click it doesn't explode and the reason that it would explode is because we have to pass this property here like so and if this was undefined when you clicked on it on click would call undefined and that would throw an error so what this is going to do is it's just going to give us a empty arrow function as a proxy so if we click on the thing but we don't apply an on click it's not a big deal so now we've got to come back over the top let's import button from ui form button let's go back to our button down here and this time we're going to say okay we got this button it is a component and inside we have add a add an address all right react without reporting direct binding let's get rid of that okay so now we got this button we click on it we don't get an error the next thing is buttons default to a type of submit because of that's the way it used to be on on the interwebs so we're going to default this to a type of type we're going to add type here just like we did with the text field and the type is going to default to button so that it doesn't try to submit the form so now we click it nothing happens but it also doesn't resubmit the page now we got to do is pass an on click handler to it on click and say what we want to do when you click on the address and what we want it to do is to call set values and again we're going to be getting the previous values we're going to be creating a brand new object we're going to spread out the previous values on here then we're going to go to addresses and addresses we're going to do the same thing because it's a nested object we're going to create a new array of addresses we're going to spread out the previous dot addresses so now essentially we're going to have a new object with the old values and new addresses array with the old addresses that were already there but it doesn't add a new one yet and so now remember at the top we created these default address values now what we can do is we can just say add the new address values like so now watch what happens bam new address new address new address pretty cool right so this is how you write good code i'm actually going to take this hr tag and i'm going to put it inside of here so that every time you add an address you also get the hr tag let's refresh it let's add an address how come we're not seeing our hr tag oh look it's over here on the right hand side so probably what we want to do is put a fragment around this well we could do a div or we could do a fragment i think i'll just do a fragment and then down at the bottom we'll do a closed fragment and then we'll put our hr tag there so now you can see we get an hr tag in between each of our addresses so what do you guys think so far uh you could spread out the address as props but um i wanted to show how you destructure so you're right like if you wanted to do this you could and i don't really have a problem with this right here the only time that i have a problem with spreading out props is sometimes the object that you have has 30 keys in it and you only really want three props out of that out of that object you don't want all 30 you just want three so i'm a big fan of being like deliberate in your coding this is implicit code this is saying whatever is inside of the address you know give me a prop for each one it's not very deliberate but i would have to agree in this case it's probably more concise and maybe a better practice but in general i practice deliberate coding for a reason because when people aren't deliberate uh coding code starts to kick their ass but i would say this is fine so good tip um you're with me till no typescript well i've been writing javascript since 1997. not sure how long you've been writing it typescript is just microsoft's third attempt to divide and conquer the javascript community they tried it with javascript their own javascript it's called jscript then they try to do it again with vbscript and now they've successfully done it with typescript i'll tell you what michael street you give me one i'll tell you what let's do a live stream sometime with you and me on the live stream in a zoom call you show me the problem that typescript solves that javascript can't solve you can code in one window writing the same app that i'm coding you code it in typescript i'll code it in javascript we'll see who gets done with their code faster and we'll see whose code is cleaner at the end and i guarantee it's going to be my dynamically typed javascript but if you're interested in that mark at devmentor.life i would love to set that up hey danny how you doing danny holland says great stuff um yeah so i think that's about what we have time for tonight tomorrow um we're going to be making it so that this check box you only select one check box for the active address and we're also going to add the second page so that down here i will also do the validations right so if all of these fields are valid then this continue button will actually allow you to go to the next page if the values are not uh validatable if they're not valid then this continue button will be grayed out and there'll be little hints so like if the name is invalid or missing um it'll show you that the name is invalid or missing so yeah we'll cover that tomorrow or i guess not tomorrow it's wednesday so friday i have my live stream with my hardcore supporters we're not going to do it then so i think it's going to be monday um do you guys like this nighttime stuff because if you like the nighttime schedule i normally do my live streams in the morning uh if you like the nighttime stuff i'll live stream next monday at the same time at night so yeah i would totally totally love to uh continue this on monday i hope you guys can join me um again real quick uh dev ed follow him on youtube if you don't already he's a very interesting guy and he's fun to watch uh kevin powell awesome with html css i learn from him all the time and i've been doing this forever jesse from codestacker jesse's just a good dude i mean like you need well i don't know about you but when i need something and i ask jesse he's always there for me and josh como really smart young kid does great design work i love his um so those are my shout outs again if you don't know already you probably do but if you don't i do private mentorship doing javascript react dynamic programming i can teach you ruby rails uh we can do all kinds of stuff html css design work i'm also a designer so if you're interested in upping your game you can go to devmentor.live you can hear what my students have to say about me and if you like the idea you can click to start here button you can schedule a free mentorship interview it's gonna be like 15 minutes we'll get together on zoom we'll talk face-to-face person to person we'll discuss your goals and you can ask me anything about my mentorship program that you would like to ask and when you're ready to book a session you just click book a session and you can book a one hour private mentorship with me the cost is 80 usd the value is out of this world and if you need consulting for your project you can do that as well my consulting rate for people that come to me just like through the internet they're not part of a giant corporation is a hundred dollars an hour when i do consulting for large corporations my rate is 200 an hour um yeah that's it and i will see you next time happy hacking thank you so much for joining me on this wednesday night hello and goodbye from puerto vallarta and if you guys are ever in puerto vallarta mexico please look me up and we will drink some tequila together on the beach talk to you later

Channel: devmentorlive

Views: 2,385

Rating: 4.9736843 out of 5

Keywords: react, reactjs, web development, javascript, es6, programming, sofware development, learn to code, linode, digital ocean, running a node app on a vps, running a create app on a vps, installing your own node server, deploying a javascript app to a vps, deploying a nextjs app to linode, deploying a nextjs app on digital ocean

Id: oHG8ql2rPE4

Length: 72min 56sec (4376 seconds)

Published: Thu Feb 18 2021