React: Material Design Tabs (P2D34) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live-streaming with Jessie and today is going to be probably one of the shortest streams that I've done since I first started so I had something that was supposed to happen at 5:00 and now it got bumped way up to 3:30 and it would take me a little while to drive there so that means we have we got to be done pretty quickly so if you've watched before you know usually the streams go like at least an hour and a half so what I it's gonna be a little different than normal for today's stream so I wanted to implement some material design tabs and like this I thought it was going to take me a lot longer than that really did so since I knew it had to be a short stream I started working on it before the stream and thinking that I could get some of it out of the way and then just finish it up and I ended up getting it finished so what I figured we'll do through the stream is first part of the stream I'll just go through how I implemented it and it was it was so easy I don't know why I thought it was gonna be more difficult than this but I'll run through how I implemented it and of course I'll answer any questions about it then I want to demo another react project that I'm almost finished with so I just have just like one or two like tiny bugs that I need to fix but basically is completely functional so I want to demo that for you that's the the react project I was working on for that Udacity nano degree and then after that we'll do our normal question and answer session and then we'll finish up so I wish I had I had already scheduled the stream before I knew that I would have to be out of here around 3:00 so otherwise I would have scheduled the stream earlier but it I think it worked out so let's get to it let me show you first of all I'll show you what it looks like so you can see you know we have we have tabs now so just to give you an idea of what it what it did look like if you don't remember let me pull it over from the other screen so this is what we had so we didn't if it wasn't really tabs it was just kind of like a menu there was nothing nothing to indicate what tab you were actually on so I think we had talked about changing these at some point but I never got around to it so now not only does it look more like material design should look I mean normally you wouldn't have this many tabs but you know we're kind of stuck with this many categories right now I was able to remove one category but now there's actually an indication of what's happening so you have this little underline so I think that's nice and also by default it defaults to the franciscans before we had the default to all but I talked to one of the designers so the graphic designers and he thought it was a little bit confusing to have all of the logos right there and they were kind of intermixed so they thought this might be a better better way to start out and now that we have an indicator it makes more sense so users can still get all over you know once but now it's just not quite as many you're right away so that's what we've well that's what I've done today among other things and this is actually you can see I'm on the live version of this site so if you want to check it out it's our C dot Franciscan University slash logos so you can check that out I think this is going to go it's going to go live you know obviously it's already live in the sense that it's available online but I'm I'm actually gonna link to it for university employees on Monday so think I've got you know all the major things completed I just tested out both the forms on the live version they were going where they were supposed to go all the data I probably I think the only thing I want to do is set up some sort of backup for the data so it may end up just being a Google sheet that gets populated but I'm open to other ideas so if anybody has an idea for a way for there to be a backup of all the form data that gets sent so I just need you know the info from the fields somewhere in some other place other than just being sent by email and being sent to the project management system so if you all have any ideas of something that's really kind of lightweight easy to implement let me know otherwise I'm just going to send it to a Google sheet and that'll help our project manager out a lot just to be able to double-check have a backup to tell if you know maybe some slip through the cracks or just to get some data it's a lot easier to look at a Google sheet and see how many people requested what services then to try to go through our project management system so alright so let me check the live chat just quickly there's some some of you saying hi hey everyone santosh says I love the material design good I'm glad glad you liked it gee CPR says the logo designs look great awesome I'm glad you like I can't take credit for them our graphic designers they don't hide skillful mess says congrats on 100k and 200k thank you thank you yeah we got if you haven't seen the video already check out the video Quincy put out earlier in the week and it's we got a silver play button from from Google so really cool you get that when you pass up a hundred thousand subscribers rollin says you could add it to sequel light database harsh it says firebase from back up okay cool I'll look into those I'd like to get implemented as soon as I can but actually I'm interested in firebase I've had a few people recommend it to me so I'll check those out all right well let me let me get to the code now so I think the easiest way to do this is just going to be to bring up github just to see the difference so obviously right I I added to our package JSON because you know we get if you tried to download this project you know we get like warnings and stuff are our linter won't work if we have things basically functions that we're using that we haven't declared so anyway that's all this is I just added it to the the package JSON it's just yet another thing to ignore and so I've added a handle of tab change which it just simply changes the state so not really a big deal before I was changing the state like right inside the render but I vaguely remember someone saying at some point that you shouldn't do it like that so I pulled it out into this handle that change function all right so that's that's just basic stuff this is where the change actually happened so let me show you here's what we had before so we had a ul with Li so each each menu item was an Li so basically we just had a click handler that when you clicked on it it was setting this the active tab you know based on whatever that value was the tab key and then that would change which you saw in terms of logos now the problem when I initially looked at the tabs from material UI and why I thought it would take a long time is so check this up so the way these tabs work or you have your tab but then within the tab you have markup and this is what gets displayed when you change tabs so I thought that's not gonna work with what we're doing right because we were using a masonry component and filtering things right so I thought that it's just going to be way too much work to redo everything like this but when I started to get into it earlier today I thought maybe it's worth a shot to just leave this out and see if we can put the click you know the click handler here where we have this on change and see what what happens see if that would work and it actually did work and that's why I was able to get it done you know so quickly it was like less than 20 minutes and I will here in my code go here we go so here's what I ended up doing and it actually is you know even you know more concise so that ul now becomes the tabs component are what used to be our click handler now becomes the on change and then instead of changing the state here we just call this handle tab change and we change the state up there okay so we're passing it right the value from this from tabs and then we're setting the state of active tab to that value and then here we're adding instead of an L is we're adding tabs and then we simply took the same thing that we had you know we had on tabs right we were put inserting into this a tag tabs key and I was giving us the the actual display of what users were seeing in terms of menu items and now we've put that same thing in as the label all right we've had it we have the same value our value as is the tab key and then we've just added the key right because anytime you you know iterate over something in react and have multiple elements here you need to have a key right so that's basically it and and it worked so that's all we had to do and because we already you know we already had it all set up so that the logos show up based on the value of the active tab and state all we had to do was make sure that when we click a tab we change that value so we change the state and that was it it works so this is actually how it came up pretty much by default the only other thing I had to change so we had a little bit of space on each side and that was because originally we had we had all of this inside a column in a row and that put our padding on the sides there so I just removed this from being inside a column in a row and I moved this name hide on medium and down this class I move that directly on to the tab so it's I don't need him and down and that gives us the drop down so when it gets too small you see it starts to get really crowded here and then it drops out and then we get our drop down which still works I mean it just changes state so that was it it was it was so simple so sorry that you know normally I do code live obviously it's that's the whole point of the show but I just like I said this ended up being way easier than I thought and I finished it before the stream started so if anyone has any questions about how that worked or what I did I'll take them right now and then I'll do the demo for my other project so let me just scan through the live chat quickly Zubair says suggestions continue this project further with react native that would be cool actually I really like that idea I'm I'm working on a react native project right now so after I finished that maybe I'll give it a shot at using doing this and react native that would be really cool to be able to tell you know users that if they wanted to they could have this as an app as well so maybe I'll give that a shot let's see hi John handsome said and react is supposed to be difficult for the easy stuff yeah I've heard that before when people's the Arak reactor might's hard stuff easy and easy stuff hard tea John says nice tab is a controlled component you're lifting state up yeah so if you check out even a material you I so I went with I went with the controlled example of the tabs so there's there are different ways you can do it but this one fit I think the best for what I needed it for so yeah basically the tab is a controlled component and by that and correct me if I'm explaining this wrong but normally you have inputs as controlled components in react very rarely would you not want to have an input as control component but in this case we have this tab which is not exactly an input but it functions in the same way in this case so the value of the tab is based on the state value and then when you click a tab it changes state value right and then it renders and the tab value gets updated right so you're not directly changing the value of tab with the click the click changes state and then the change is they triggers a change in the value here so that's basically what a controlled component is and that's normally how you would do forms so if you notice all the forms that we've done they work like that it's also kind of cool that when you go when you need to work with that form data you already have it there in state right as you know it's already there is an object so I I think it makes working with forms a little bit easier than normal but anyway that's that's controlled controlled component alright so let me show you and I'll get ready for this so brace yourselves and let's let's take a trip back in time and imagine what it would be like if we had react back in let's just say the 90s and we wanted to make a blog with comments and voting right so here's what it would be like in my mind so so here is here is my latest react project and I use Redux for this so with Redux we have a store and that's the source of truth for the state throughout the application so I did use some local state for this mainly for the inputs so that they were controlled right and I may have a UI element somewhere in here that uses yeah actually I do so I have some things that appear or disappear based on the state and that's best handled with local state so anyway it's really basic whoops I don't even know what I clicked on let me go back so here you have post right here so post title it tells you the author you can vote on it so I can vote to increase the score or do increase the score tells me how many comments there are I can delete the post if I want I can add new posts so we can't oops actually I just saw something weird it's using a different font here I didn't know that I have to change it and now we have our new post and I can vote it up and you can see as I vote it up it's changed the order because by default it puts the posts that have the highest score here but we can change that and go lowest score first or we can go date first so the newest first or the oldest we can check out more about this post so let's go to this one since it has comments so here we have the post here's the content the body of the post I could edit it if I wanted to and if I edited it oops is it broken did I break my submit ha ha I did make some changes yesterday and then committed them without testing so it's possible that I broke it and I think I did in fact whoa Fiona said 4:45 oh okay actually I did know about that I just think it's chance to fix it yet so anyway normally you'd click Submit and then immediately you'd see the change let's see we have our comments we can actually sort our comments the same way so we can sort by votes or by date and then you can edit a comment in line like this the comments should work so let's add something submit there we go so we added it added the comment there it could add some votes and we could delete comments if we want and then at the bottom we could we could add a new comment so just add so now we have a new comment let me think the only other thing we could sort we have categories so we sort by categories so that's it that's my that's my project and if you want to check out what's going on behind the scenes there is a Redux I get plug-in or something for for Chrome what do they call them for Chrome extension a redux extension so we can see what's going on with the state so here's how I have my state organized right we have our posts each post has a unique ID and comments also have unique IDs we're also grabbing the categories now I have the comments here as well because initially I did not put the comments with the posts is it's two different API calls to get them so I may end up changing this so that it's not redundant in that we have the same comment data repeated there so once I figure out a way to make everything work with that maybe I'll do it we'll see if I have time but right now it works as is our sorting also this is in the in the store so how we want to sort both the posts and the comments is kept in in the store so this is kind of a cool a cool way to see what's going on so we can see let's make some changes and then it'll show you what changed so right now the only thing that changed is that we we updated from 7 to 8 in our our votes core for that particular post so really cool shows you what action was set off anyway so this is my kind of fun fun projects it was interesting the first thing I've ever done with Redux so I've learned a lot about Redux and that's kind of why I went with this minimal UI I've been wanting to do something like this with a really like kind of old-school looking UI and I thought this project would be great because I had so much to learn with using Redux for the first time I didn't want to get caught up in the UI so much so this is very simple not that I didn't put any thought into the UI it did you undergo some revisions but because it's mainly text base there's a lot of things I don't worry about like like borders you know it for luck cards and you know what I'd normally do or worrying about colors right there's all just one color so anyway I just wanted to share that with you all if you want to see the code for this it's on my github profile so if you check it out to get up its Jesse or waggle its my github profile and then its Udacity react nd readable so I will be working on this you know so it'll be updated but for now it's almost complete and you can check out everything I'm doing there's instructions for how to get the the server up and running so that you can use it if you wanted to you know you could create posts and and have it all work just like you know it's working here so you'll need to get the servers a separate repository I at some point I may end up integrating the server into the project so you don't have to download two things but for now it's like this I think that's it so anybody have any questions about that I'll answer that otherwise I'm gonna take questions right now we'll do our question-and-answer session and I'd like to be definitely need to be finished with the stream before three it would give me a little extra time if we finish before three which would be cool but I'll certainly take questions up until I don't know let's say like well actually it's a different time zone for you all so I'm not gonna say three let's say probably for another 20 minutes I'm good to take questions so I don't know if it'll take that long but it's about 20 minutes so you have any questions go ahead and throw them in the in the chat now and I'll get to them and if you don't have questions but you can stick around that would be awesome too and then I'd love for you all to help me answer the questions and if you can't stick around for the question-and-answer - thank you for watching this was kind of odd that it was such a short string today if this is your first time watching it doesn't normally work like this usually we get at least an hour of real live coding in before we get to the question and answer so if you can join us for another stream later on you'll get kind of the real deal so alright let me go through the questions now if there are any ok Harsha did mention that react 16 is out all right and that's the react fibre it's also the one that has the new license I think reacts under MIT license now so and there's a there's other cool stuff I haven't gone through all the changes in the new version of react but one that I heard that I thought would have saved me some time and earlier project was that you don't need to have everything wrapped in a div so before I don't know if I have an example of this so that I could quickly show but before you would need alright we can show it on here so like in this return everything's wrapped in this one tabs right but what if we didn't want to wrap it what if we left off the tabs and we just had these two sibling components with no parent we would get an error before but I guess from what I've seen basically just from what I've seen people saying in Twitter you can now do that where you could have two sibling components with no parent and it'll work and you won't get an error so I think that's really cool I know especially when I'm trying to convert something that's not react and then make a react version of it you copy and paste a lot of code and you end up adding a lot of extra divs in there that you didn't have originally because you're trying to break everything out into components and when you do that you you need to wrap everything in div so this this I think will save time and be useful I don't know about the other changes I've heard there's some differences in the way you do server-side rendering and it's faster it's supposed to be faster than than before so anyway so it seems cool I'll have to maybe read up more on on react 16 so the next react project that we do will most likely use react 16 and then we can get into some more of the changes but I probably won't get into the new react project for a little while so next week when I come back we'll probably be working on project 1 again and that was that catechetical Institute site so we're gonna be doing some updates for that now that is react but it's we're doing some weird stuff because that's that uses some react and it uses some jQuery so I'll be I'm interested to revisit that and and try to remember like what I was thinking when I did that but hopefully we can improve upon what we had before and get some things done that we just you know ran out of time and couldn't get done ok you go back to the live chat John Henson says that looks more like the 80s yeah you're right yeah in the 90s like we actually had I mean Windows was already out in the 90s so you wouldn't really see this my original inspiration for this was the matrix you know where you had the screen with all the green letters and everything so that's where I got my my idea for the green at least and then I just looked on google fonts for the most old-school looking font I could find it looks kind of like pixelated you know anyway okay Santosh asks Heywood rerender the tabs also on tab change let me see let's go back it it will need to render in the sense and see right so it will need to change right this this underlined so I'm I'm assuming I didn't look behind the scenes to see what all is going on with this underlying and the effect here so to really know I have to look into what's material UI is doing in that tab component I don't know but I assume there's disree rendering going on probably doesn't have to rerender all the tabs each time but I wouldn't guess at least the the previous like the current tab and then the new tab that you're switching to I don't know look that's like kind of a little bit more technical than I usually get with material UI I don't often look into how the components are made unless I have two T John says awesome man I love the terminal look thank you actually my reviewers so I mentioned I'm doing this for a react manner or at udacity nanodegree and so you have to have your project reviewed until it you meet all the requirements and my first reviewer really love the retro kind of UI look so that was that was cool I was worried I'd sent a message when I sent it into review and I'm like listen the UI is like it's a joke it's just for fun so if it's an issue let me know I can change it but they were totally cool with it uh-huh a boo now says okay I just found where I belong huh so I'm assuming you're saying you belong here if that's the case that's awesome welcome all right cool so thank you a few more people are saying that they like like the app this one how it looks so cool glad you like it yes would probably never make anything for real like this it's just for fun but yeah I don't know it is cool it's like it's the Souchak you know let's see okay I banal says please what can you tell a beginner like me what preliminaries do I need in order to catch up I know just HTML CSS and I'm self-taught okay well I think the next step for you would be JavaScript so that will allow you to do a lot more like if you wanted to move on to react probably should learn at least some basics of JavaScript first if not more but pretty much anything anything more advanced in terms of front-end development anything more advanced than HTML CSS you get into JavaScript land so you can check out you know free code camps lessons if you wanted to or if there's a lot of places that have materials free materials to learn JavaScript so depending on how you like to learn there's something out there for you there's a great book called you don't know Jay s and it's available for free on github I don't really have the link right now but if you search for the title of that book the whole thing is available on github for free so if you liked reading that's it if you like in browser exercises you know go with free code camp or code Academy if you like YouTube videos there's a ton of great JavaScript YouTube videos on our Channel so bo Carnes does a lot of JavaScript tutorial videos all the way from the basics to more advanced stuff and then there's a lot of other YouTube channels that have tutorials as well so so check that out and then you can always you know come in to live chat when I'm streaming and ask any questions that you want or you can you know send me a send me message on Twitter or something I'd be happy to help you out as much as I can Alexander says just to send love and I'm on my way to work well awesome I have a great day at work thanks for stopping in let's see John B says I can't share the link but search in Google github free programming books and the first link or second link has all sorts of free books including you don't know J s alright cool thank you for that John B alright so yeah I'm really glad that we could help let's see oh one more thing I want to say before I wrap things up and if you if someone puts in another question I'll answer that as well but this is totally not programming related but it may help you with your programming so if you like to listen to music while you while you code I just found out I got an email from Spotify about a new playlist that they have and it's called your time capsule and so they I don't know how they've figured out I mean maybe they have my age but somehow they figured out like what time period would be nostalgic for me so they've suggested all these nineties songs for me and so far the playlist is is pretty spot-on in terms of songs that I did listen to back in the day and that I still like so so I don't know about you but I'm always looking for new music yeah sometimes it's a struggle to find new things you know so long just get old after a while so anyway check that out the your time so playlist I don't know I think the right music can really help you be productive when you're coding so see me check that out okay at E John says what was the biggest challenge with learning Redux probably I'm like figuring out how to organize the state like so this the store so in the class I was taking it said like you should figure out how you want to structure your store first and I didn't really know enough that I felt comfortable doing that so I started doing the project and then I had to restructure the store you know like several times before I got it to the point you know where it's like this so that was frustrating for me that I had to constantly keep changing my reducers and then my actions accordingly to restructure this store and so I got it to this point where a lot of all my post stuff is here and then each view is pulling from here and then when something updates it updates automatically in every view you know which is the whole point of Redux but coming from a place where like each component has their own state and you might have a parent component so you could share state it was it was weird it was definitely different so it just it's what we want to get used to that idea of like you're not directly changing things you know like within a component it's very simple to say okay I'm gonna change state it's just right there you change it but now it's like a roundabout way of like I'm going to fire off an action and there'll be a reducer and then the state will change and then the store will change and then that'll get passed down and then it'll get put into props for each component and so there's like this whole flow that happens that it just took a lot for me to get my head around that I mean I know that's not really as a specific answer but Redux is like it only works if all the parts are in place it's really hard to just take a chunk of Redux and try to learn it you have to learn the whole thing at once because you can't just say like all right I'm gonna learn actions well actions by themselves will not do anything you can't just learn reducers right you have to learn it all so that was it was tough to just get my mind around the entire thing so there was a ton of refactoring that went into it and rethinking everything but eventually I eventually I just found myself like being able to delete huge portions of things to say like alright I I was knowing it like this but I don't need all this stuff so it just took a lot to get down to that it took me more time and I thought it would but now I think I'm finally you know getting it I would I'm like by no means an expert right this is my first crack at it so I'm sure there's a lot of things I could be doing better but but so far the reviewers have said that I've structured my reducers you know well and my storage structured well with the exception of the redundancy with the comments so I'm happy about that let's see I got some these new questions in here Swallow says kulap and I don't know if it is just me but I like the theme more than others used for the editor at least for presentation like this what idea is do you mean this this theme I mean this is the this is dev tools chrome dev tools and with the redux extension and it's just kind of like a middleware so you have to tie this in when you first initialize your your store dart says what IDE would you suggest I don't really use an IDE per se but my code editor is Adam I also use Visual Studio code I like them both santosh acid doesn't help in terms of performance Redux there's just plain reacts I don't I don't know I haven't tested it out myself and I haven't really read anything about it whether or not Redux is more performant than just handling state you know within components depending on the size and complexity of your application it can help keep everything straight reduce bugs because you don't have like you're not trying to pass down state through a ton of child components and you you never like mutate the store directly so there's it's almost like there are these safeguards in place so that things are consistent in terms of the state you know throughout so I don't know if that translates to any performance increase but it I it simplifies development I would think for a small application to definitely make things more complicated than it needs to be but for something larger and complex it can just simplify the way you reason about it t-jon says awesome job man thank you I appreciate that okay John B says asks if I know UML diagrams might help in future for helping map out how the stores should be structured actually no I've never heard of UML diagram so I'll have to check those out let me alright so I I just did a Google search for that and I'm gonna leave that up on my screen so when I come back on Monday out it'll be right there and I can check that out so anyway it's just about the twenty minutes that I said I would do for for questions so I'm gonna wrap things up now thank you so much for watching sorry that it was not a normal stream and shorter than usual but still got some questions answered and hopefully you know some of you guess on some help and a little a little intro to redux maybe let's see yeah that's it I should be back on Monday Monday afternoon at some point or at least afternoon in Eastern Time but have a great weekend everyone and I'll see you on Monday