React Project 2 Day 2: Learning Material UI - Live Coding with Jesse

Key Takeaways

hey everybody it's Jesse and uh today we're going to continue right where we left off uh yesterday so I had to work on some other stuff and um I had to fix one problem with the project that uh we had worked on previously it had to do with the JW player uh video but um I kind of fixed it it's basically a workaround uh but I'm done with that and I'm ready to start on this project yesterday we made some decisions about it and um we're going to use material UI as the framework and we use create react app to get everything started so today we're just going to go through and try to build our layout with material UI I've never used it before I'm familiar with material design but I'm not familiar with material UI specifically uh so this is kind of going to be a trial and error learning uh session today uh where you just going to go through and and see how things work if you're watching on Instagram uh this is the uh the view of me coding so if you want to see the code check it out on the free code Camp YouTube channel uh you can watch it live now or uh if you're seeing the recording later later on uh this will be um the the uh title of the video is react project day two learning material UI and that's on the live coding with Jesse playlist on the free code Camp Channel all right so let me get uh let me take a look at the live chat say hello to everyone all right hey everyone cool I see some familiar faces and some new people so uh if if you're new welcome and um don't be afraid to ask questions uh give advice uh definitely open to uh to all that uh if you are new this is not really a tutorial this is just me doing my everyday work so there are going to be mistakes it's not uh rehearsed beforehand um so I guess that's it can be good at times because we try to work through the mistake So eventually we usually figure out the right way to do things um let me know yesterday uh we had some issues where my phone was giving interference with my microphone so let me know if that happens again and I can move it so right now I'm trying to manage uh the phone streaming at the same time as the YouTube streaming so um if it's too much I I can just cut the uh the phone stream so I don't have nearly as many people watch the phone stream all right so just go in the live chat real quick see everyone wow Taylor says it's uh it's night time it's 2 2 a.m. wow Taylor where where you at right now uh that it's 2: a.m. already uh Al SRA put the uh little parentheses and the the fire looks like the free code Camp logos that's really cool um let's see white white lightning says Hey Jesse big fan of material design so I'm interested in how you tackle material UI cool yeah I'm I really like material design as well uh so I'm really hoping material U UI turns out to be awesome uh because i' I'd love to use it uh let's see okay I think we can get started oan says Jesse I've had some problems with the previous react project okay let me know uh ocean send me a message on Twitter um and let me know what issues you're having or you can open up an issue uh on the GitHub repo for that project so i' I'd like to know what's going on with that and um see if we can uh get those problems fixed Evo says uh 8:00 p.m. here in the Netherlands so perfect time for live stream cool that's cool I always I don't really worry that much about what time I stream because people are watching from everywhere so it doesn't really matter what time I stream it's going to be you know different time for for everyone so um it would be cool to do it maybe some morning streams my time just to give people a chance to watch it who maybe can never watch it w 11:30 p.m. in India uh Allan from Michigan here hey how's it going uh I have heard of react MD I have not used it though Kevin says how are you uh not bad I'm pretty tired uh got up really early with the baby this morning uh so definitely running on some caffeine I had a double espresso this morning and right now I'm drinking some G fuel uh it's like an energy drink so um hopefully I can do a good job in this stream I usually get pretty pumped up when I'm doing the stream and I don't feel quite as tired unless it's like a three-hour stream then I start to feel it all all right so I'm going to get started uh I'll come back periodically and check out the live chat and try to answer the questions I've I've been having a lot of people ask a lot of questions in the live chat so let me know what you all think but I've been thinking about maybe having some sort of moderator in the chat not really to like tell people what to do but just to uh keep track of when people ask questions so there's some questions that I probably don't need to answer like when people ask about like what uh what editor I'm using or what the theme is things like that there are basic questions are when people come in and say like hey what are you working on which those are valid questions you especially if you're new but everybody else in the live chat could could answer those just as well as I could so those kind of questions it'd be cool to have uh the moderator basically uh categorize the questions between ones that have a simple answer that could just be handled in live chat and the ones that I probably should answer and then you know when it's time for me to go back to the live chat to answer questions then I would I'd be able to see those somehow uh so I'm not sure exactly how it'll work out maybe there's already something developed to handle stuff like that and uh if you all know about a good way to handle that let me know and if anybody's interested in kind of being a moderator uh let me know as well I would just say uh if you are going to be a moderator make sure you're somebody who doesn't have a bad temper and is very patient because uh I like to keep everything really positive no matter what people are saying uh so uh I don't want anybody getting upset uh at the the people in the live chat uh I don't consider any question to be uh you know like too much of a a noob question or anything so um anyway so I'm going to give it some thought and uh if you all want to give us some thought and let me know you know maybe I'll do that uh we'll see yesterday was a crazy day we had just a lot of people in the chat today is uh still above average but not quite as crazy so uh maybe I won't need it uh we'll see um for right now I'm going to start up my uh Pomodoro Timer and try to you get into our first uh coding session oh one more thing this is not an endorsement just just a uh helpful uh FYI Udacity is having I think like a 50% off sale right now on their courses so if you were thinking about doing a course from Udacity now would probably be a good time to sign up uh because they're um you know that's a pretty big discount uh for their courses so unfortunately I already signed up for my course um about a month ago so I won't I won't get the discount uh but I know I think some of you in the chat had mentioned that you're interested in doing some of the courses like the react course or anything so uh so it's a good deal right now all right so as you can see I didn't do literally I did nothing with this project since yesterday I didn't even have time to set this up so I don't even have a link to this yet because right now there's nothing in there uh so I'm not I'm not going to worry about the trell board I'll kind of have to like go back and fill in what we've done I am keeping track of the the time that I've put into this on a separate spreadsheet on my other screen so uh I'm going to know how much time I put into things I'll just have to fill out the Trello board uh later on all right so let's get our code up here let me get things organized how we how we normally have it uh let's see I think I probably want to do uh kind of a side by side so let's minimize that and I uh yeah this should work I probably don't need two two places right now we can get rid of that and let's get rid of this side there we go that'll give us plenty of space increase the font a bit let me know if that font is too small I I probably won't look at the chat for a little while but uh if I see it I'll I'll make it a bit bigger okay so one thing I noticed yesterday but I didn't do anything about is that this doesn't do anything and it seems like it should right so let's um see what's going on here I think this is probably one of those things where that um that kind of extra click thing that we had talked about yesterday see I don't need that let's go to the setup and see what they're saying about okay so this tap event plugin uh this is probably what we need to make that work so let's bring that in wow these semicolons are freaking me out a little bit on the last project I got used to not using the semicolons and now they're there and I I can't take it they just look I'm just going to take them out right now they're really bothering me all right did we get them all no one more all right cool no semicolons um I think at some point we're going to have to eject uh create react app and uh do some some stuff with it because I'd love to have the uh automatic formatting like we had when our with our other project all right so is this I just want to see if I have to actually install all this if it comes with it looks like I have to install it so I mean it's worth a shot to see uh if it comes with it first but yeah no it's um so I'm wondering it uh at least this is not really uh descriptive in terms of ought I to put this inside of component did Mount I mean would that be maybe I'll look at uh these docks might be a bit better oh okay so it's saying just initialize it right there okay all right let's try it out like I said I might have to install this it didn't say on these instructions so there's I guess a possibility that it'll just work didn't start up my server so let me uh start up my Dev server in the console here let's see where am I at it's just going to use yarn start I did see somebody left a comment in the video yesterday about um like the latest version of npm is actually just as fast as yarn and it has like the same a similar uh lock file so wow the um the error page looks way different for create react app than it did for uh for next that's that's crazy um but anyway uh for this project at least I'm going to stick with yarn since I've already I'm already using it but I'll have to look into that and maybe in future projects I'll I'll just use the newest version of npm um I just I just saw I just happened to look over quickly at the live chat and I saw uh White Lightning's comment about uh his question his or her question sorry about um why why not use semicolons uh basically I did use semicolons and then on the last project everyone uh watching the stream kind of convinced me not to use them and uh we had like some Auto formatting going on with we were using prettier for that and it automatically removed semicolon so I just got used to it and now that I got used to it I don't want to go back it's really nice to not have to type out that semicolon it seems to me that if there's there not really a difference between semicolons and not semicolons then uh the easier route is better and the easier route being just not add a semicolon so I mean that works for me I don't really care if anybody else use semicolons it's not it doesn't bother me if they use semicolons but at least for my projects I think I'm going to not use uh semicolons anymore so where's that at I just want to see all right so tap event plugin so this should be what we need let's go to our console where'd it go oh I moved it to the side sorry yeah this is it okay uh yarn add actually let me make this bigger I'd made this smaller earlier just to give me more space to work work with um there we go so we're going to add that tap event plugin and hopefully everything works okay there we go all right let's try to restart there we go and okay well still nothing happens uh we probably needed to install that anyway so I'm not really worried about that but I do want to see why I think I was going down the wrong path here in terms of trying to find this out uh so it looks like it wasn't the tap event plugin uh I think this is the code that we use let's see what is going on I need um I'm assuming that this is basically also you know the same component here uh so obvious obviously it's working there yeah this is a react site let's just see how they did it I'm going to check the live chat here in a second too because I'm sure uh that uh some of you are thinking Jesse what are you doing uh here's the simple answer that often happens you all are usually ahead of the game at least ahead of me all right so let's see what was that what was the name of that app bar there we go that's odd this is not really an at bar component oh well maybe um maybe mine doesn't even have an appar component oh yeah so it looks like maybe it's a different version for that I don't know so there there's a huge difference uh I guess between what's going on with the uh you know between my site and this site so I probably not going to be able to use that for an example so let me check out the uh the live CH here all right let's see I'll scroll up a bit just to see okay so uh looks like you do not add an event for left button app bar so if you click it nothing okay so I have to add um okay so actually have to add the event okay cool good to know thanks uh Sebastian and uh tour I I'm not sure how would you pronounce that it's it looks like it's t o r e uh so let me know how you want me to pronounce that okay you must add props to okay cool uh let's check out I'm going to move uh this I guess I don't need to move this over right now I don't need to see it so let's check out what props there we go I think feel a little bit silly now if I would have just scrolled down and read all this I would have known sometimes it's just more fun to just try it and see what happens uh especially if I'm doing a stream like I don't want to spend the whole time reading that would be boring all right so call back function whenever attouch so all right cool so I do need to add let's add this drawer there we go cool how do I get out of the drawer okay [Music] so let's put in a drawer and import all these and all right so I'm not going to include the button so actually I probably don't need this button because I want to make my um my icon the drawer so I just need this drawer and I guess I'll put this oops let's put this right below the app app bar and uh we'll leave it to stay open for now just to see it make sure working and let's see all right I'm not going to worry about this for now I just want to see if it works oops cannot repr property open oh yeah let's see of course I have to put state in and let's leave it open okay cool nice and for all right so now let's go back to our handle to St yeah let's go back to our app bar and let's see on left icon touch we're going to add this that's weird for second I kept clicking and it wasn't doing anything it was odd all right so we're going to want for now just something simple so let's say um I'll just copy what they have here save some typing function event oh okay thanks Patrick Pat Patrick just pasted in the live chat exactly what what I need to do here so uh cool okay all right let's see we're doing oops what's going on here unexpected token I don't need this whoa what is this what did I do all right whatever happened there it didn't happen again so I'm cool with that oops okay not okay thanks uh I forgot this yeah all right cool it's all is the worst awesome okay um it seems like that's the hardest part when I do live streams is you just forget syntax that you type all the time but for some reason when it's live your mind just blanks so I really appreciate it when you all catch that and uh and let me know what the syntax is it saves me having to look it up which I'm fine with doing but it does keep the stream moving along faster when you all help me out like that so I really do appreciate it okay so we need uh the desired behavior is that if you click outside of this it will close so let's let's check on that so I'll probably need to go back into the drawer component and let's see this has got to be any I mean this is pretty basic functionality so this this class okay I think I probably forgot to add something that in here no I guess I didn't all right this is the one I want I want to say so I'm I'm trying to figure out which um which part close which part of this is actually making it is it the undocked part see what undocked is docked okay so it just brings up the overlay so that makes sense H that not all right so I'm not seeing the overlay now what did I do okay I did not put this in there which maybe that's what's messing things up nope all right I'm going to look at the live chat oh man you guys saw it uh Sebastian I see Sebastian so up for [Music] sure I added the this um these two props I had it on the wrong component so I did have open what am I thinking okay so now this will make a lot more sense to me hopefully want request change is this what I need yay okay it works cool all right my timer is up so I'm going to take a short break to go to the live chat and uh check up on what I missed answer some questions I'm I'm preparing myself mentally now to see uh all of you um telling me what I was doing wrong since I just uh made a series of silly mistakes all right so let me scroll up a bit oh I got 82 viewers now that's that's nice it's um it's definitely over uh what we normally average so um probably a lot of new people in I'm guessing so welcome uh thanks for watching and so I'm scrolling almost all the way back up to the top see uh Carl says uh Hey Jesse or anyone after completing the JavaScript section on free code Camp is it safe to try and jump into react or is there more to do I'd say uh go ahead and jump into reacts I I don't think there's anything wrong with you know trying it out if if it seems like it's too difficult then maybe you know go to something else and come back to it later on but um you you don't have to be a JavaScript Master to know react and you'll get better at JavaScript as you do react because you you'll find yourself using parts of JavaScript that you maybe didn't use before that was my experience all right we got people from someone from the Ivory Coast Ukraine oh man Phillip says I'm feeling you there my son got up at 5 a.m. this morning can't wait until he is a teen I don't think I've ever heard anyone say can't wait till he's a teen uh usually people dread the teenage years but uh yeah I suppose te teers will probably sleep in so I guess that's something to look forward to I'll finally get better sleep when my kids get bigger all right Stephen uh asks um says Stephen says I'd love to see a black screen with green font much easier for an old guy to watch uh I get see um if uh if you all have a really cool theme you'd like to suggest to me uh put it in the comments for this video uh or you could message me on Twitter uh but uh I'm using Adam as my code editor so if you do have a theme for that that you want to suggest I'll try it out if I if I like it then you know maybe I'll do that uh for the streams I don't think I've changed my theme for years for the same same theme so uh it might be cool to change it up all right let's see all right looks like uh some of you are saying that I could use a bot uh to help moderate the chat that would be cool hey philli votes for Patrick to be the moderator hi from Down Under oh cool so uh Jack does that mean you're from Australia because that's cool if you are from Australia because I've never had anyone in the live chat say that they were from Australia and uh that's the only like the only continent other than of course Antarctica that I haven't had somebody say that they're from so that's really awesome now I can honestly tell people that I've had uh people from all the habitated continents okay Stephen said the Udacity sale is actually more than 50% off that's awesome also since we're talking about sales uh Nordstrom has has sales going on right now if you need some clothes so I needed a new pair of black dress shoes so I I bought a pair uh on my lunch break also anytime I talk about a product or anything I don't officially endorse or get paid to uh talk about anything so this is all my honest opinion all right stevenh says uh yeah use prettier uh atom package oh yeah I hadn't thought about that you just using the atom package uh before I it was like a uh like a commit hook to where every time I committed it would change everything uh use standard JS as well uh for linting but I I hadn't even thought of just doing it in atom I kind of would like to have it as part of like the commit hook so that if people uh want to do a pool request everything is the same uh but I guess until I eject actually I'm not sure is it do I need that's probably a good question um let me check this out do I even need to eject uh create react app in order to set that up I thought I did but now that I'm thinking about it I don't I really don't think I will because I don't really need to change anything with um with like webpack so I think I could just do it so maybe I'll try not right now uh but at some point maybe I'll try to just uh bring over a lot of the stuff we used for the last project for linting and like formatting uh and try to use it uh here all right so my my five minute timer uh is up for the chat so I'm going to just kind of go through really really quickly uh and see if there's anything super important that I I should address before I go on okay so see there are some questions I'll I'll uh try to come back to the questions a little bit later um wow 2:15 a.m. in China uh looks like uh Sierra from 2:15 a.m. in China wow so thanks for staying up so late and watching uh talin Southway says Ting this is awesome I'm currently making my tribute page keep up the good work that's cool uh send me uh send me a message on Twitter I want to see the uh the tribute page when when you're done with it uh that would be cool so if you don't mind I'd like to check that out uh Ricardo from uh Brazil says uh your live live streams are great awesome thank you uh M best best of hard style from Portugal I enjoy some uh some hard style occasionally okay cool let's get back to work uh if um by the way if you ask a question in the chat and and you're not able to stick around until I go through it later on uh you can just send it to me on Twitter or uh put it in the comments for this video uh and then I will get to it uh later on when I can CU I realized like sometimes the streams go really long so it might be an hour or more before I get to your question so uh it's not really reasonable to expect that everyone can stick it out through the entire stream all right so let's let's see what were we doing oh okay we're setting this up so we've got our sidebar here which is awesome and does anybody else do this when you make something that's interactive like this you just click it a million times I don't know I've done that I've had clients say that they do that too when when they test the site uh it's just like satisfying somehow all right so that's not bad right now for the layout uh let's put in um a footer because that'll be a standard layout for every view is going to have uh the nav the sidebar and a footer so let's check out what we uh have to work with here with the footer do we have a footer oh okay maybe maybe no maybe we don't okay so there's a potentially maybe there's a footer There's Hope because there's a footer for this site am I just missing it what's stepper I'm not used to this terminology this is definitely different than materialized Oh okay that's cool all right don't really need it for anything right now but it's good to know um cool uh T text f tool okay so it looks like there's not maybe I'm just not seeing it but it looks like there's not really a component for for a footer I mean the closest thing I'm seeing is a bottom nav so I mean the bottom nav would at least have the behavior that I want of being um an element on the page that would always stay at the bottom so maybe maybe I can try putting this in and then just editing it maybe I could start with this and then edit it to look more like I would want a footer to look like I mean really I don't I don't absolutely need a footer but it would make it more consistent with all the other sites uh that I do for the University if I had a standard footer let's see all right so let's just let's put in the bottom nav I don't really care about having these icons right now because I'm not going to use them I just need actually I'm not even sure if I want to give it a depth for let G see maybe this will work if I get rid of these icons let's see nope let's get rid of these let's put something in here oh there we go I didn't even see that all right that's definitely not the behavior that I want I must be missing something let me check check the chat really quick and see um ah Rohan hey Rohan how's it going um you haven't really missed that much we just got our like side navigation drawer working um basically you missed me like making mistakes for about a half an hour so um it looks like some uh we have in the live chat some people talking about like what they're doing with free code Camp so we have a few people are working on the tribute page and the portfolio page and everything so uh that's really cool um I saw someone said the tribute page should be so Zanna says the tribute page should be simple yeah that's just to give some quick advice on that um you know with those early projects in free code Camp don't worry about trying to get them perfect right away you know just do the make sure that you complete the user uh you know stories uh and then move on you'll learn a lot more and you can always come back later uh and make them better how you want uh and then the portfolio I'm I actually never completed the portfolio part because I always I always wanted want a better portfolio so I always thought well I I'll wait and do some cool stuff and then I'll add it in and I never went back and and added it in at least not yet okay all right so I don't see anyone in the live chat talking about this but I I need to to maybe look at this documentation because at least in the materialized framework you know there was definitely a certain structure that you followed and it made sure that you know the footer stayed at the bottom even if you didn't have any content you know things like that so I'm thinking maybe I'm missing something some rapper component or something that uh I should be using here so let me see if there's like something that talks about the layout theme Styles colors uh I guess I'll start I guess I'm going to check out one of the uh examples and then I'm also going to look here oh okay I can change the theme that's pretty cool okay very cool can customize the colors and everything that's actually awesome I'll probably end up making a uh standard theme uh with the University colors then and then I can just reuse that for future projects okay cool all right cool so everything's an inline style okay all right I'm not definitely not going to use the built-in colors have to use univers colors okay uh so didn't really find the no I didn't actually want webpack I wanted the the example uh I didn't actually find the info I wanted within this so let's see just want to see how how they're doing things contain okay yeah I'm not maybe I'm missing something y'all can fill me in I'm not seeing anything like really special going on there okay uh okay uh I see Christian said in the live chat a footer is not part of the material design guidelines that makes sense yeah that makes sense Sebastion I see your your uh your comment there it says there is no footer in material UI but the material materialized CS one is just a grid yeah I'm not I'm not necessarily worried about creating my own footer component uh what I what I was hoping would be kind of already made is uh making sure that it stays at the bottom so uh I just didn't want to have to like do that CSS on my own if I didn't have to but it looks like I will have to which is not really a big deal um so what I'll have to do is just make guess I make a footer component I don't know at this point maybe I should just move on uh to something else because I don't I don't absolutely need a footer component I just like to have it but if I were categorizing like what's essential to this project the footer is definitely way down on the list and it's not essential at all so uh maybe we'll just skip over that and then that'll give me some time to to check out how I'm doing that on my other sites that use materialize and I'll probably just take the markup materialize uses and convert that to a component and I'll put all the Styles you know right inside the component that's actually not a bad idea anytime something I'm used to using a materialize is not here I'll just convert that into a component and I'll eventually I'll end up with kind of a hybrid uh set of components that that can be used for future projects all right so now since I'm not going to worry about a footer I'm going to remove let's see the bottom nav and I'm going to remove remove it from here as well and so now we have this we can start to kind of populate how how we want this to look Let's uh let's change some of the colors right away uh just to get that out of the way so since I was looking at this uh themes let's see I think this is where I seen it at H all right yeah so I definitely want to override I'm not because I'm not going to use any of these colors this might be a little bit more complicated than I thought I'd assumed that it there would be an easier way maybe maybe there is maybe I'm uh overthinking this so probably what I could do then is here instead of putting uh having this variable for the color I can just change the color I I just basically put put a hex color if I wanted to or I could you know import colors uh which maybe more properly can you all hear that in the background yeah so my uh my boss came back from his honeymoon and um he has like a a Minion toy so if you remember uh what was what was the movie um I can't remember what the movie is now uh you know what I'm talking about there's a movie with um Steve Carell did the voice for it Despicable Me that's it so the movie Despicable Me had minions in it and there's like several of the movies and then they did a separate movie for the minions he has this little toy that's a minion that like dances and sings so he just got back yesterday and um he's like I keep hearing this he keeps playing it so um anyway looks like I only have a few seconds left on the um live stream for Instagram so you can check out the recording if you want uh I don't even think anybody's watching right now so um yeah but if you hear that noise in the background that's what it is it's that that toy so uh he even before I got the job here he was I don't know how it started but he had minion decorations and stuff and uh occasionally would call his workers his minions so all all for for fun though okay I guess I could do this if I go in and edit this colors. JS file I'm thinking do I really want to edit it or should I just make another file my I only hesitate to edit things directly because um what if I want to update later on you know they come out with a new version if I want to just try to pull that in and update it uh what I'm I guess looking for is a way to do like a sub theme that would remain and still work even if I updated the main the main theme if anybody knows how I could do that uh please let me know if I can it's not a big deal let's see uh I guess I could just look it up something hey there we go stack Overflow has how to do how to apply a custom theme in material UI all right so all right so this person on stack Overflow wrote a custom theme in a separate file okay all right so it seems like I could do it in a separate file and that would work okay I guess we can try that any other uh any other thoughts uh of a better way to do this I mean this this seems like a similar uh issue to what to what we're doing right now now okay let's uh so we make a separate file for now I'm just going to pull in let's just pull in uh with this other guy did on stack Overflow to give us something to go by I probably won't need to do right now I'm only worried really about the colors so I won't need all of it I could take probably most of it out where's my actually I should commit this first huh so if you're not familiar with Git or using the command line um what I what I just did was I checked which files I had changed and then I committed those files I added a message so I actually committed and added at the same time that's what that am flag is added a little commit message and then I push those changes up to the repository on GitHub all right now what I want to do is make a new component let's say actually let's call it let's call it that and let's pop in whoops there we go so let's pull this stuff in I don't need the colors I don't think I'll need the color manipulator I'll leave it in for now I'm not worried about see see index I'm not going to change any of this right now so really I'm just worried about the pallet okay so let's just try to change the primary color for for now let me pull in um oh I let me show you guys the style guide this actually um I had been telling people that I hadn't built anything in react until like spring of this year but I'm pretty sure that I actually built this in December and this is my first react project so this is in react and I think I did use uh this might be next trying to think I think I originally tried to do this with create react app and then I wanted to try out next so this might be the version they use next I can't remember exactly so anyway it was not exactly true the well it's true to say like the first react project that actually went live you know for a client I did in the spring but this one was in uh December of 16 and it's not officially live yet so it never um it was supposed to be reviewed by some people higher up and that never really happened so it's it's already a bit outdated I've changed some of this but the part that I want is just these these colors so um so this is all done with materialized framework uh but basically uh you can see what I was trying to do was you know kind of build out a custom version of the materialized theme with all the colors that we use at the University so for now I really just I need this dark green and uh just got a message from my boss so let me type this on my other screen back to him uh so I just want to try this out and see if it works so we'll just change the primary color need to put that like that so let's save that and then let's see how um how they applied it so obviously this didn't work for them pretty sure you need to have static child context types and all right all right so sorry I'm just trying to read over this and uh trying to make sense of what was done actually yeah I want to see the the full code uh so I let me open this a new thing so let me see theme pretty sure they called it theme do yeah theme. JS right h all right not really sure maybe it's been changed too much all right let me check much time okay it I thought I heard it beep all right so uh time for a little break to uh go to the live chat let's see do want a custom theme it's this may be too much to try to fit in the rest of the stream we'll see we'll do as much as we can all right I'm going scroll up a bit and try to catch up then with the live chat okay all right so a lot going on in the live chat but I'm not coming upon a lot of questions yet so I'm going to keep scrolling and looking uh Vladimir ask can you suggest some learning path from uh HTML CSS JavaScript reactjs uh I would recommend uh try the free code cam uh challenge and um work through that that's that's a decent um Foundation uh to kind of work your way up there's a lot of other good uh resources as well so um I think I mentioned I did a video on uh my own channel about how I became a frontend developer and I think I mentioned some of the resources I use there so you can check that out uh the Link's in the description and uh i' I'd like at some point to do a more detailed video on that all the resources but I think uh free code Camp is will definitely steer you in the right direction oh man so uh John Hansen says starting a new project just installed webpack I'll see where I'll go from there react looks so tempting though I still want to use pug and SAS uh jumping into es6 as well with Babel that's a lot of change all at once so yeah you can still use SAS uh with react I know there are ways to do it I I haven't done it um but pug I don't know does anybody use pug with with react like would that even make sense I'm I definitely see why it would be it would be hard to to switch if you're used to that yeah um I agree Patrick says uh react is not or es6 is not hard to pick up webpack is a pain though I agree webpack is was at least for me it's difficult I think weback is great but it's just difficult you know if you if you're not used to it it's really like a a steep learning curve uh Dixie says nervous about making my tribute page any tips on how to not look at the source code and trusting my knowledge um yeah I mean I guess you just got to resist that temptation to look at the source code um and uh I would say don't the tribute page is a really really basic type of thing so um you know work through it don't don't get really nervous thinking it has to be perfect or everything just worry about meeting those user stories those requirements uh just the basics and then once you met those you know like hey like you've completed the project and then anything else you do on top of that is great but at least you've got to that point where it's complete and I had a similar thing happen earlier so on my lunch break I was doing doing some work on my react uh course and uh the first project I had gotten to the point where I had fulfilled all the requirements but I didn't really do a lot of customizations and I thought about it and I really wanted to do customizations but I thought you know what I fulfilled it like I need to just turn this in and move on and learn more instead of worrying about trying to make it you know really really good and perfect uh so that's what I did so I just turned it in and it would be really cool if I had made it unique but uh you I only have so much time you know and it was better you know to move on and uh continue learning uh then to wait and wait and get backed up and maybe never get to some of the later stuff in the course all right let me do scroll through a bit more um Andy M says how did you uh start learning react uh hey Andy Andy also has a YouTube channel where uh he does live streams so um you can check that out um how did I start I think I started with just reading over the react documentation trying to get a hold of that and then I um I did the course from code academy and watched a bunch of YouTube videos that was like my my very beginning and um create react app then came out after so I think I had started trying to learn it before that came out when that came out it was cool and it was really helpful uh and then when nextjs started to get so when nextjs first started out it wasn't a lot of the features they have now they didn't have so it was okay but not nearly as good as it is now so as they added features then it started getting really fun to work with with next okay uh Galaxy Tab ask when building react projects using Mac what software do I use um yeah you just need a code editor I mean really I mean you need node okay it looks like Patrick um Patrick answered says whatever editor you want you also need node and npm so that's cool uh Galaxy says you don't need xcode or Visual Studio yeah you don't need any of that all right I'm almost at the bottom of live chat that's why I'm kind of going over time a little bit because it's just so tempting to get to the bottom uh John says uh John samuda we have several John's that are in here so I'm going to have to start using the the full name uh but John samuda says Jesse you rock more commits uh all subview should submit pool requests and help him out uh that he can review offline oh well thanks for saying that that's cool yeah I I totally don't I expect you all to you know uh help help out so uh I'm I'll I'll do this no matter what uh as long as I think it's helpful to you uh but yeah if you uh if you have if you have the time and you want to work on it and submit some pull requests um that's awesome uh I of course like I can't guarantee that every pull request is going to make it in sometimes there are really good things that don't make it in just because I don't have time enough to move on uh so it's not even necessarily because like I didn't like what you had done I might really like it and just don't have time to pull it in but um uh yeah anyway I appreciate you saying that okay all right so I'm pretty much to the bottom of the chat right now uh I'll come back to it in a bit all all right so let's go this will probably be my last see what time it is yeah this will be my last uh Pomodoro session uh before we do questions and so I want to try to be done around 4 today is uh I think I mentioned this yesterday maybe I didn't all right I don't think I mentioned it so today is my wife's birthday and my uh my son's birthday uh so they um they share a birthday so I want to get home at a decent time so that I can um celebrate uh their birthday and then tomorrow is my other son's birthday so we've got like a you know birthday weekend uh happening here all right so what were we working on we're trying to apply this theme right yes all right so I'm going to move this over to my other screen for a second and I'm going to come back here and and look at I want to look at the actual documentation and compare it to what the uh this person was doing on stack Overflow so uh this was asked by knows not much on stack overflow okay that's good to know I didn't see that before it says never directly mutate the theme okay cool this this looks like I can do just some basic uh manipulation of the theme just to try it out uh at first like this okay that works I don't know why but when I read this before it didn't make sense to me but then after after looking at it again now it makes sense I guess that's how it is it happens frequently maybe my uh my brain just needed to work on that subconsciously while I was doing other things to to get it so uh so I'll probably end up putting some stuff in a separate file at first so I'm not going to delete this or anything I'll just leave it for now but I think really what I need to do is where I have this uh this theme provider I can add in let's copy and paste this right and and let me take that that color where did I have that that primary color I forget what that was let's take the whole thing primary color okay now let's see what that does oops is not defined no undefined all right what am I doing wrong this is not F uh maybe I did I not I didn't put this in cool check it out all right so our primary color which I suspected the primary color changed the title bar because that that made sense uh so it did cool and I think it shrunk did did our tile ball get smaller or this called at bar so material UI calls this the at bar um cool all right so now potentially if I want to I could use a separate file if I end up customizing a lot or if I don't I could I could just leave this in here if I'm only going to customize a few things cool it's nice when things work oh cool I see a lot of you are saying H happy birthday um for my wife and both of my sons have birthdays so uh thanks I'll let them know that you all said happy birthday sometimes uh like I'll my kids I'll say like uh occasionally if if you all tell me to like tell my family or my kids something I'll say like everybody on YouTube said this and uh they kind of look at me like with this weird look like um the uh oh no I'm sorry I just got distracted I um so I did the video on uh Instagram and I waited way too long to hit the share button and so now I couldn't share it so that's too bad I'll have to remember next time oh it looks like my wife posted a video on Instagram of my son Ambrose blowing out candles on a cupcake so that's cool now now I wish I was home all right so let's um so Bas we have the color we can change our theme what's our secondary color going to be probably the gold is going to be the gold or do we go with the actually I might go with um where's it at the style guide I might go with this yellow let me's see how this primary primary color two okay now okay I think I want the yellow to be the accent color primary color too maybe will'll be gold it probably won't really make any sense to change these yet cuz I don't have any elements on the page where I could see what it would do so I'm not going to I'm not going to do anything more with this until we build this out a little bit more uh actually what we'll probably do is uh we might not even have this title uh or this at bar be green I know it's like not exactly in line with the material design specs but I've been doing this a little bit differently lately where um I have a white at bar with a thin gold border underneath and then we have a logo that's that uses the green and the gold colors uh that shows up nicely on the white so I might end up going with that too because uh my boss really likes that uh it it looks nice it looks pretty nice it's clean uh so that might change but for now at least if we figured out how to change the the theme colors so what we need now is to figure out our uh our basic layout let me see how much time I have left okay 15 minutes all right so we need to figure out kind of like the basic layout that we're going to use and in case you you either didn't see or don't remember um I'll bring over what we're going from and where did I put that I don't know where I put that so I'll just let's type it in again all right so here's what here's what it currently looks like and um I'm not going to try to mimic this exactly but basically I need what I need is for users to be able to get to any section of this site immediately when the page loads so I don't want a long scrolling page so that's pretty much the only requirement uh for the the first screen that users see so I mean this works I could try to just mimic this what do you all think let me know uh let me know what you think about maybe keeping this or something similar okay so uh Patrick says plus one for the current layout yeah I my initial thought yesterday was to like change it but now that I look at it it's not I mean it works it's um I don't really know what I would do that would be better to direct users to the different parts of the site okay cool looks like got some got some more uh votes uh Rud r r rangu uh nandy sorry if I messed up that pronunciation uh for your name says make something out of the box I I would love to make something out of the box but I do have to keep the users in mind and in this case my users it's probably good to go over the who the users are for this with you all cuz I don't think I've done this yet um my users are this is going to be an internal site for University employees and that includes a lot of people who are older uh professors who don't really use technology very much at all uh so I mean we're talking about like people like they don't have smartphones uh they want everything printed out they so I have to keep that user base in in mind so I mean there's the majority of people are like somewhat okay with using computers but there's definitely a group on campus that it needs to be very very straightforward uh so with that in mind then we you know we'll go forward with this uh so it seems like let's let's just try to keep this layout so basically we just need columns we need uh three column layout two rows how do I don't even remember how this looks okay so then it just goes yeah so we just need to set up two break points and I have no idea how the break points in the grid system works in material uh UI so let's check that out where is it at okay grid okay cool so I guess this is similar to what I need so this is like this is a grid list I'm wondering is there a layout something more that I'm missing here so it wouldn't even it wouldn't necessarily be a component I don't know yeah I don't think the grid list is what I'm really looking for I'm wondering now uh does material UI then does it not come with a um like a system of of columns actually if if it is the case that it doesn't come with a system of columns I'm wondering if I can just pull out the the whole like column system from materialize and use it use it here all right take care see Okay Christian said I might have to new use the newer version Alberto says yeah the newer version oh so we're we're back to this so yesterday I originally had this version installed and then I switched and installed the new version and then um I was advised to not use the new version since it wasn't really ready yet and so I switched back to the old version I just let me I'm not I don't think I'm going to switch over but I just want to see it I want to see what it's like here yeah this actually is exactly what I want I don't know I don't know everyone I'm I really kind of want to switch now um wow yeah all right um now now everybody's saying switch uh Maxim I don't think I can't use get uh uh get revert of revert anyway I changed too many things I think yeah I'm I might switch back let me check really quick cuz I know you all told me yesterday that there were um some components that I couldn't use because they weren't ready with this one man I just like how close is this to being done like are we talking like a year until it's released or I kind I really want to I want to know I know I didn't see anything talking about a timeline all right let's see what components so we are all right we have the at bar right that's that's standard let's see what I I need the at bar for sure I don't care about the bottom knv right now I'll need cards which that should all right like that's standard um I need form elements let's see what the form that that that might be the deal breaker so we have Tex Fields where's my uh okay cool I like using the ones where the label pops out all right awesome so we got Tex fields we need select what do they call they didn't call them select they were dropdowns right do we not have dropdowns okay here's some check boxes looks good actually I'm not I don't really like that as much as the way materialized does it I might have to modify that component because I really like the way materialized of it um cool all right I like I do like that switches okay so menus so basically uh text field select menus coming soon all right so they don't have that this should work though for what I needed to to do uh just like a regular menu as long as I can just get the value of whatever is clicked on which shouldn't be a problem then all right cool um I think that this version actually does have everything that I need so maybe we'll go with it all right I know it looks like some of the people that were really against me using the uh the latest version of this are not here right now so so uh they're not here to tell me not to do it oh Maxim I know I know it was a joke about the revert revert it was just um uh I was just reading it out okay John samuda says you know you'll be upgrading later might as well do it now Christian says feels pretty stable finish to me uh schmack says I always wondered how long it takes to make a legit web app by yourself it I suppose it takes a long time if you keep switching your uh your framework back and forth every day okay John samuda says it could Fork it kiban says look at the road map oh okay cool am I missing the road map then where is that at vision would it be here oh this has support for uh um some CSS and JS that's cool I like that better than having to do all inline stuff so that's another Plus okay uh Kean has linked okay so there's some issues let's check out the GitHub issues oh okay cool this is super helpful thank you thank you for this link also my timer went off so uh the the rest of this is until I'd like to end around 4:00 so I'll try to get as many questions answered as I can and if I don't get your question just uh send it to me on Twitter or put it in the comments uh below if you were just here for the code thank you so much for watching and for uh for helping me out and I'll be back next week all right so let me look just quickly at this I can have H this is as of all right so this was edited 6 months ago so I assume it's better now yeah so it looks like maybe this list is not maybe it's not up to date is there's a new section now on the docks let's see all right let's check the docks then I said they added it but I don't remember seeing that oh yeah there it is I can't believe I missed that um cool to say they don't support multi-line Tex Fields it can't be that hard to uh apply the same styles to a multi-line text field as you can to a single line so assuming this list is up to date this is probably one that might be able to do a pool request for uh and get that updated okay let me go to the live chat now I'm going to scroll up a bit and um try to answer as many questions as I can right now I'm thinking that I'm I'm going to switch and if they don't have something that we need we will uh add it and potentially submit a pull request and contribute to this project so like I mentioned yesterday I've actually been wanting to uh either do something like this on my own or contribute to one so I think I found a a decent one to contribute to okay uh Cy so sssr nty y asks is react hard I don't know I think uh something being hard or not is really relative question so react doesn't seem that hard to me now but when I first started it did seem really hard so I mean just like anything you you know practice at it and keep at it and um you'll be I mean a year ago I was just hearing about react you know and now I'm I'm able to actually build things with react at work so uh you know in less than a year you can get to a point where you could you could be getting paid to make react stuff all right let's see uh chrisan asked uh you mentioned earlier uh the discount at Udacity would you recommend it to learn react where would you place it in relation to free code Camp um okay that's actually a really good question uh so for me this is how I've used free code camp and Udacity uh so this is going to be pretty specific to me but there might be some other people in a POS similar position that I am so free code Camp is really easy to just go in and and do uh really quick things especially like in the browser uh just go in and do the exercises and spend like a few minutes a day just doing something just to you know just to keep things fresh in your mind so for me I used it like that to where I would come in like before I started work I would do one Challenge from free code camp now there are like projects that you can't just do in a couple minutes but a lot of the challenges you could finish in a few minutes so that's how I would use it and just do just a little bit every day for Udacity it's it's set up as these large courses a lot of them are free which is really cool but I was less able to just do things so some of the courses do have in browser exercises but a lot of them require you to set up your development environment uh so those were more like if I had a an hour to work on something then I could do that uh so and and those were also sometimes really specific to something that I wanted to learn you know so they're broken up into these courses so uh if I really wanted to focus on one thing I could do that and be done with that course free code Camp is is more like just a linear progression all the way through it's a little bit harder to just pick and choose things because it builds uh so anyway so I used them both at at the same time and it was simply a matter of uh I tried to do a little bit from free code Camp every day and if I had a few minutes it was free code Camp if I had like some specific topic that I really wanted to go like in more depth with I would use Udacity uh and I would have to set aside more time to do it the majority of what I've done from Udacity has been all their free stuff this react course that I'm taking now is the first time I've actually paid for uh they call them Nano degrees uh from Udacity so uh so far I've been happy with it but there's more than enough free content on Udacity that you could learn a lot without paying for anything so hopefully that helps uh hopefully answer your question okay uh John samuda said just made it over from another live coding session at treehouse cool I didn't realize Treehouse had live coding I'll have to uh I'll have to check that out is the Treehouse live coding is it free uh or is it something that you have to pay for because I know some of their stuff is paid and they do offer some free things uh John also said thank you for the live work you're welcome thanks for watching uh adventurous programmer said I use step uh gritter webpack course on Udi for $10 to learn webpack 2 made it easy that's really good to know thanks for sharing that so uh if anybody's trying to learn webpack uh check out uh UD Demi uh step uh let me Steven gritter webpack course so uh yeah again thanks for that okay uh rud rud rangu uh nandy uh says you he provided a link uh to where you could use pug with react so it's a there's a Babel plugin to use PL pug with react so if you check out the the Pug uh repo on GitHub it looks like it's in there so uh thanks for sharing that uh B batter conon says I am just I'm just a beginner but my friend said JavaScript is very complex and hard to learn is this true uh I don't I don't know if it's I don't really think JavaScript is that complex and hard to learn uh but but you know I've I've been using JavaScript for years so um it's I guess it's hard to remember what it was like at the beginning learning uh so I would say like if you're thinking about learning it go for it you know there's you're not really risking anything by trying it and you'll find out soon whether or not you think it's too complicated uh but I mean I I don't think like a lot of people learn it you know uh you know average people of average intelligence learn it so I don't think it's you know that difficult uh John says uh John Hansen says it's odd to see you code react here as pug offers much of the same sort of thing as component building though just the HTML uh it uses JavaScript feels very logical to me though react yeah yeah definitely um react is does remind me a bit of different like templating um different ways to do templating uh so yeah it shouldn't it shouldn't be that much of a jump to to move to react from something else like pug or I guess even you think of like handle bars or something like that uh hey Jordan how's it going Jordan said hi okay so Patrick said earlier let me put the P up on the screen uh Patrick really dislikes that I was doing this in index.js and thought I should be doing it an app uh JS so okay so that's cool I mean that that will not be a problem to move that over so I mean I'm not going to do it right now but basically you know to let you know what I would do it'd be as simple as um removing kind of this out of here and then wrapping it wrapping app in this uh so it would have the same the same effect I'm assum assuming I don't see any reason why it wouldn't work uh kban asked does register service worker come with create react app yes it did I didn't add that in that came uh by default uh Zanna said I don't quite get it what is supposed to be that white space under there so yeah I think I assume you talking about this all this white space yeah that was probably just um I had the idea that I wanted this overlap up here so yeah it's always going to have this white space probably what I'll end up doing is vertically centering this if I redo it because I'm not going to have this giant uh header so everything would be vertically centered so there would still be a lot of white space but it would be at least evenly distributed okay cool and I just read uh r on your comment about moving the grid towards the bottom and uh so yeah that's exactly what I what I intend to do Zanna says I suggest you make an accessibility audit yeah that's that's actually good idea um I'm actually really um conscious of helping people who uh are blind or have Vision impairments being able to go through the site so we do have one Professor who's blind and so I want to make sure that she can in in all the sites that I do I really do want to make sure that she can you know see be able to use a screen reader for everything so when I initially made this I'm not sure that I uh I kept that in mind as much as I should but I definitely want to this time so I'm going to have to look up some more with it uh as well because I'm I'm sure there's some stuff that I could be doing that I'm not also I have an uncle that's blind so I'm always like when I'm doing sites I'm always thinking like would he even be able to use this site uh so uh so thanks for bringing that up Zan I definitely uh it's definitely something I want to keep in mind as I'm building it I I'm just reading all the messages that you all had about uh me switching to the newer version of material UI so it seems like I the messages now are just excited for going for it as they were yesterday about not going for it I mean to be fair there are different people in here today A lot of different people than there were yesterday so um so it's not like everybody's changing their mind I'm changing my mind but uh not I don't know that you all are changing uh Mastermind says hello sir what's HTML Java JavaScript and CSS all right that's that's like a really big question uh let me try to give a very like succinct answer so I'm not going to talk about Java Java's a programming language computer programming uh language that I'm not very familiar with so I'm going to leave that out now but uh things like uh Android apps are built with Java uh but as far as HTML JavaScript and CSS those are the uh languages that websites are built from uh so the HTML would be gives the structure to the page the JavaScript helps with interactivity so things moving around on the page data being sent to different places uh and then the CSS is the style of the page you know the colors the fonts uh things like that um so I guess as an analogy if you were building a house the HTML would be the frame of the house the uh CSS would be all the decorations and then the JavaScript would be like all the electricity running through the house and the plumbing that makes the water flow and the lights turn on and you know things like that so not really a Perfect Analogy but uh I think it works well enough oh cool Christian uh says I had mentioned earlier based on the uh documentation I was looking at that they didn't support multi-line text Fields but Christian says they do support it uh and Christian is using those multi-line text Fields so good to know so evidently that documentation is not updated so um I'll just have to see for myself and uh you know what's available and what's not and not rely on that documentation okay Patrick says uh has pasted in some content from the material UI road map oh okay there's the road map. MD I'll have to check out that file later uh but it says first both versions can be used at the same time people can progressively migrate one component at a time that's really cool okay that's something I'll have to think about uh maybe I don't have to completely switch maybe I can just pull in some of the components that I need so uh that's really cool that must mean that they're actually really compatible if you can just pull in a component when you need it that's good to know uh Christian asks what will the back end be for your application uh I guess in it like in terms of like the backend it's it's just going to be I'm not exactly sure what you're asking so I'll just give you a basic idea of like the whole stack uh so I mean I'm going to run it obviously with node um and and express and then the data there's not I'm not really dealing with a lot of data so I'm going to send data to a project management system called Reich and then I'm going to email it out uh as well I haven't decided yet if I'm actually going to try to save data in a database it might be cool to do that uh so it may depending on how long this takes uh I may have time to try to do something like that uh but I'm not super familiar with uh how to set up databases so um so anyway that's it's it's not going to be really complex um a complex site okay cool Patrick says I was always on team go for it awesome uh this is I think the last comment so this will be the last uh question that I um that I answer for today uh and it's from parake so Peake says hi Jesse can you give an advice where I can find good app specs that I can read and Implement in a fairly big react app I'm not very good at imagining apps for practice H I don't know uh so I'm guessing uh let me know if I'm I'm wrong wrong on this but basically like you're asking for ideas for large apps that you can make um I know I don't know what the websites are it's been so long since I've been on them but I know there are some sites that just give a ton of ideas for for apps uh so people just you know offer their ideas and uh you can you can work on them so try to look up something like that I just I'm sorry I just I like can't remember at all with the name of that these even even one of those sites where and I'm pretty sure there's several different ones uh so I would check out something like that uh otherwise like you could you know try asking uh colleagues or um you know friends family for their ideas uh about things so I'm I'm somewhat similar situation and that I don't I don't exactly have um a lot of ideas on my own it's hard to come up with them all right okay cool Christian uh said ideaswatch decom SL startup ideas slapp so cool thank you Christian all right so uh Patrick says go celebrate with your family so uh and he says thanks for the stream uh you're welcome and I'm definitely going to do that right now so uh thank you all so much for watching and for all of your help uh today and um didn't get a lot done in terms of what's on the screen but uh I think we I have a much better understanding of material UI so I think uh it was it was a good day uh for learning so um yeah so see youall uh on Monday and have a great weekend