Starting a New React Project (P2D1) - Live Coding with Jesse

freeCodeCamp.org · Beginner ·📅 Project Management ·8y ago
Skills: React80%

Key Takeaways

Sets up a new React project, including environment setup, project planning, and task management

Full Transcript

hey everyone it's Jesse and today I'm really excited that I get to start a new uh brand new project um as if you've all been watching for the last month or so I've been working on the same project and I'm just so I'm so happy to be be finished with the project and it I'm happy with the way it turned out and I learned a lot on the project and you all help me so much but um it's good to start start something new so I had a lot of people give me feedback uh that they wanted to see a project from the very beginning so this this is it this is we're going to start from scratch you can see I have I have nothing this is literally nothing on the screen right now now uh so I'm going to start you know here even even my terminal is uh I haven't even typed one command yet and I have a blank Trello board so no no work at all beforehand we're going to start this up uh you know from scratch so the the first thing that we're going to do is I'm going to go over what the project is and what the requirements are and then that's going to be determine how we set things up all right so since the the point of this stream is to show what you know what it's like for me as a developer uh I want to show the whole process uh so I'm not going to jump right into the code we need to get a little bit of planning in as well so and I I hopefully you all can help me in that planning process uh so it looks like we have a lot of viewers right now I'm going to try my best to keep up with the live chat but is going pretty fast right now so uh let me pull over um a my timer so we're going to use the last couple of shows we've been using this uh pomodora timer and I'm going to start this and then that way every time this Pomodoro Timer goes off we'll take a fem minute break and during that break I'll make sure i' catch up on as much of the live chat as I possibly can and then during the other 25 minutes I'll try to dedicate that mostly to focusing on the askk at hand uh so hey everyone I see a lot of lot of people saying hi um let me show you so here here's what the project is going to be I want I already know ahead of time I want to do this and react um and uh I just had uh somebody said in the uh the Instagram feed uh so I the secondary feed for this stream is on Instagram and it's the view of my face as I'm coding and I just had a question in there it was from my some from one of my former students and he asked who is your favorite ex student so and that's from uh from D that was of course his nickname but DV uh since no since none of my other students are watching this stream right now uh I'm going to say you were one of my favorites now I I don't I can say that without lying at all I really did like having you uh in my classes so you're you're a good guy um so anyway thanks for watching this I hope everything's going well with you uh but uh I'm going to get to work now uh so anyway I know I want to do this project in react because I've been working in react I'm doing a course in react right now some future sites are going to be in react so if you're tired of me doing things in react I'm sorry it's going to be more react and let's there's some really really good reason that you all can come up with why I should do this using something else it's probably going to be a react project so let me explain what's going on so my very first project here at at this job uh almost two years ago my first project was to make what they called a resource center so I work in the marketing department and we do a lot of things for all the Departments here on campus this University so we were constantly getting requests from people lots of people in different departments and um we um we just didn't keep track of them well and sometimes things would fall through the cracks you know if we're getting these requests sometimes it would be you just happen to pass Somebody by when you're you know walking you from one building to another and they'd mention something or a phone call or email so you can see how it easily would get overwhelming and then there's no record of what we you know what we did so my original goal was to come up with some system where we could track everything where people could submit you know what they wanted us to do and also where they could get resources that they were constantly asking us for like logos uh they could just go on and get it themselves without having to email people or call people so I did that and it worked and it was great but now it's time to to redo it and up it so let me show you the old one to give you an idea of what we're working with and what we need and uh so I'm going to pull this over on the screen let me make it a little bigger and uh so this this is our current I guess kind of internal site this runs on it's called jics so a company called jobar makes this for uh for higher education for universities so this is the homepage I did not design this I'm not going to say any more about it but it was not me I'm going to log in and show you the part of this that I did design and so let me just tell you when I click this basically I do some things with Z index to where the the page that comes up just hides all the stuff that's behind it it goes in front of it so you can see there's definitely some weird stuff going on when it loads but this is it all right so yeah yeah I just check the live chat Umberto that really was the menu yeah can you believe that uh yeah so it's I think that's safe to say that the UI for that is terrible I don't think I'm going to offend anybody here at the University um I think uh it's there's a general consensus that that UI is terrible uh so the good news is that that UI is going to change the bad news is I'm going to have to redo all what I've already done uh because Jen zbar has finally decided that it's a good idea to have a responsive website so I'm really glad because it's 2017 and they they're finally having a responsive site so they're coming down uh they're coming out with their version nine which totally um will conflict with any custom themes that have been done so far so I've been seeing that the only real way to get information about jenar stuff is on their list serve it's crazy this company is just like I don't know like straight out of the 90s and never changed um and I've been seeing over the list serve a lot of people have been having trouble when they've upgraded with their UI just breaking so I'm expecting that to happen so I've decided that I'm not going to try to develop it within here because let me show you this is how I have to edit it I have to actually go into here let me show you the JavaScript here so um I need to go in let me find um see it's crazy I can't even find what I'm supposed to find Let me refresh uh literally if I want to make any edit I have to copy and paste into here uh into these little text boxes so I'll show you again you can see it's it's so frustrating I mean I've spent hours on this and it's still hard to remember the sequence of clicks that I have toh go through so let me show you whoa I don't see I'm not even sure why that wow so I can't even um I actually can't even click now I can't even show you where the the box is to edit this because uh evidently this entire page now has become a link to canva so you can see the frustration and trying to develop this so I am definitely not going to try to make what I made work with uh whatever new system they come out with so that's out of the question we're definitely re we're doing this it's going to be hosted most likely on a digital ocean server and I'm just going to link to it from within this they call it my Franciscan but this kind of uh University internet all right so these are the main things that we need this uh this site to do the a lot some of these are just links so this brand manual this is just a link to a PDF super easy so it needs to be able to link to resources we need to be able to let people download uh different versions of our logos so this is what I have set up this is using um I think isotope or masonry yeah so just has the logos you can download um different versions of the logos and it does so anyway that's that's one of the main features I think the poster one is simply some links and some information not a big deal uh letterhead is also just some some samples some images not a big deal I'm just going to skip ahead the rest is pretty much the same a lot of text the only thing that's going to be a a little bit of a big deal is this form so the form is actually going to change a little bit we want to change this wording but as I said I'm I'm holding off on making any updates to this until we totally redo it because I'm I'm not going to try to go through the the headache uh of you know copy and pasting every change so basically we just we need a form we need that form to be to be able to upload files and then we need the data from the form to go directly into our project management system which we use Reich for project management so it needs to go into Reich and it also needs to send out an email to the person that submitted saying that hey we you're submiss went through and then it also needs to send out an email to someone here in my department saying that someone submitted something okay so those are the basic you know just the very basic things that it it needs to do so this is not going to be you know really really difficult project now I'm open to changing anything in this UI so you could see this was early on this was before ID kind of refined the uh brand standards uh for for this University and uh but it basically adheres to a lot of what we're doing you know you can see material Design Elements here uh you can see it has you know some of the proper shadows and things border radius so it has familiar elements to some things but if I'm going to redo it I may as well update the UI I don't want to make it I don't want to really startle people but if the UI for my Franciscan is going to change completely it shouldn't be that big of a deal if this UI also changes because people will most likely expect it to change if everything else is changing as well uh I currently do have all the other links to to things in my Franciscan uh here these I probably won't be able to to pull these over and I don't really know that I I even want to if we're going to make a new um a new site that's not within my Franciscan uh so anyway that's the that's it I mean that's that's the project requirements uh I have probably I'm going to say like three weeks that I want to try to get this done in you know give or give or take a week uh so I'm going to go to the live chat I want to see what you all think based on what I said so here's here's what I I would like uh your opinion on I'd like to know well one is there any really good reason why I should not use react I'm I'm like 99% sure I want to use react but just in case there's something I'm overlooking then um you know I'm I'm open to that also should I use nextjs like we did for the last project or should I use something else uh like create react app or should I I really actually I don't want to attempt to do it completely from scratch and set up a webpack config and everything because I just don't think I have enough time to really learn that properly uh maybe I'll save that for for a later project but I'm kind of thinking I ought to just use nextjs I'm really familiar with it I can develop quickly with that I don't necessarily need the server side rendering uh this is not a site that I need to be indexed by search engines uh the routing that comes with it would be nice but there's not a whole lot of routing that needs to happen right now this is all just I didn't show any of the code for this but this is all jQuery even the routing uh is with jQuery so these they have hashes for the uh links and they all work so you C you can actually go to uh you know to the URL assuming that you had a login and it would take you to the right spot so that was all custom jQuery routing uh but let me look at uh let me look at some of your responses I see there's a lot of stuff in here uh let's see I I'll see if there's any questions to I guess I'll answer them now I wonder what I'm not uh yeah I'm not not quite to the time yet for questions but since I asked you all so many questions uh I'm just going to check the live chat now yeah some people were commenting on how many people were waiting there were actually at 10 people waiting at one point for this uh for the video that was really awesome wow we're up to um a decent number of viewers too 163 that's well above what we uh what we normally get so I assume there's some new people here watching for the first time so uh welcome and uh please feel free to join in the live chat if you can uh you're I I really value your opinion and helping to figure out how we're going to do these projects so um I had some questions uh where are you from I'm from originally I'm from West Virginia in the United States but now I live in Ohio uh I'm actually right on the border of Ohio so I'm closer to Pittsburgh Pennsyvania uh you may know that's kind of a bigger city so you may know where that is um someone asked do you go live I do stream every weekday unless something comes up where I can't like on Monday I I wasn't working so uh but I try to stream every weekday at 2 p p.m eastern time um let's see I'm skipping over some stuff here I will go back through though and at the end and I try to answer as many questions as I can uh Earl ask do you charge for services on your campus no we currently don't charge for the services on the campus although I I um I think as a department we should charge and that would give people a better idea of how much things actually cost and whether or not it's a good idea because I think right now people just think okay we we're starting a new thing we want video we want um print materials we want an email campaign and a new website and all this stuff because they never see the bill for that necessarily I mean they have to pay for the printing and things but uh I I think it would people would be more realistic about what's uh what's possible what's reasonable if they did have to pay uh someone mentioned uh that I am salaried yeah so I am salaried here okay the uh someone mentioned that the microphone is buzzing it's probably my phone I'll try to move my phone a bit further away let me know if the mic is is still buzzing I moved it a bit I see y some people were saying it makes some want to cry when they saw that site yeah that was the first thing I saw when I came here my very first project and I was just it amazing that I stayed all right so I'm getting to so sorry there's just so much in the live chat going on I'm um I'm trying to find I know I saw some people give me suggestions about what we should build this in here we go um uh Zan said if you need an app too why not refactor in react native it would be cool actually to make this an app that would be really cool okay so you have people saying yeah you use react some people said nextjs okay preact create re react app Don't reinvent the wheel create react app okay so we had some people a lot of people saying create react app okay maybe we'll do that then we'll use create react app all right let's do that it looks like we got a lot of people saying use create react app so I'm going to go with that we're going to use create react app and then we'll use we don't need anything crazy for routing so uh we'll just use basic like react router and I think that'll work that should work yeah so I will say this this is going to be more of a learning experience for me because I do have a lot more experience with nextjs uh more so than I do with create react app so um I'm going to be learning along with you I am using uh create react app in my react course that I'm doing right now and that's the one from Udacity so I'm not in I have used it before so I had up on my screen oh here we go I had it ready basically I had the ne next and create react app ready to go uh so we could kind of walk through some of uh the installation process uh let's all let's also start I want to show you uh how we how at least I plan out my projects so I'm going to do a to-do ready ready for Dev in progress testing and done and then wish list okay so we're just going to make some basic cards so it's going to be and whenever I do things I always put an estimate uh so I'm going to include some other setup things in there that's why I'm saying it's going to take I estimate how many Pomodoro Cycles everything will take so uh let's see see what else we want to do I kind of don't want to break down everything right now yeah I'm going to unless somebody really wants to see this I'm going to fill out these cards afterwards because I'd like to get pretty detailed in all the steps and that'll probably take a long time and won't be that fun to watch so since we are going to work on this today I'll just fill this one out and I move it to in progress but the idea is I take all the tasks I know I need to do I estimate how much time it's going to take and then I move them along the process and when it's done I also say how much time it really took and I don't think this is public now but I'll make this public so you all can see it as well all right so let's take let make I'm going to make the font size a bit bigger so you all can see and this is just the create react app uh GitHub repo if you want to follow along so let's go through the setup process uh I want to I keep all my projects in a projects folder and let's say Resource Center yeah okay so I'm not going to use npm I'm going to use yarn so let's go yarn if you're not familiar with yarn um well if you're not familiar with npm at all this is a way to install node modules so nodejs is a way to use JavaScript uh server side and not just in the browser and uh so npm is the way that you pull in different little bits of code that people have written and packaged up in these little modules so you pull them in with this command line tool called node package manager or npm yarn it basically does everything that npm does but it adds a few extra features uh one thing it does is it seems to be a bit faster and uh it it keeps better track of like the exact versions of things so for now we if you're new just know that you can use yarn or npm interchangeably and uh they'll both they'll work so I'm going to pull in this create react app uh npm package so I'm going to go yarn ad it's just a little bit different create react app and I don't think I have I'm not going to worry about installing this globally right now I'm not really sure how many times I'll use this we'll see how it goes with this project all right so actually let me see if this created I'm going to open this up and add them it should have yep it did okay so we have now a package Json file uh with this dependency of create react app I didn't fill out anything else from the package ason file but I can always do that later on and now let's create the app so we'll tell type in create react app and then we're going to name it um I should have done I should have done this uh one level up oh well all right it it looks like the mic is still buzzing so I'm going to move I'm going to move my um my phone try to get it farther away I may just have I had it plugged in charging right now but I may just have to keep it unplugged and move it like really far away all right let me know if that's it yeah okay Sebastian I see your thing so I I did realize this so I let me let me just go back because I messed this up I really should have installed this globally and I wasn't thinking when I first did it so ah dang it and I wasn't thinking then I got sidetracked and typed in so let's let me go back out here um oops um R RMF so I'm going to remove recursively everything in that Resource Center folder all right so now I am going to do this properly I may already have this installed no actually I think it's on my laptop I don't think I installed it here uh right now I'm working on an iMac okay so now let's try this again the correct way now is a great time to give my normal disclaimer that uh this is entirely Live and Not rehearsed so you will see all of my mistakes I do my best to not make them but as you know like everyone I'm not perfect so I will make mistakes and you'll see that hopefully you all can learn from my mistakes along with me uh and maybe you know you won't make them because I've already done it create react app and now we're going to call this Center resource censor let me make this a bit bigger I just occurred to me that this was still pretty small all right so now this is doing its thing all right it's um installing so if you're going to if you want to try this out and read all this installation stuff you can but basically it's just it's installing everything that we need to build a react site all right so while that's running I'm going to come back and catch up a bit with the live chat I think my timer did go off let me find it here yeah it did and I I didn't click the break so uh the short break so let me take a few minutes I'm going to go back through and try to answer some questions especially uh if anyone's new and you ask some questions uh definitely want to get to your questions hey everyone yeah I'm seeing a lot of new people so welcome I I really I appreciate you watching and uh feel free to ask any questions I'll try to get to as many questions as I can and um don't worry if you're new and you're not sure what's going on uh I'm happy to explain anything uh so just let me know uh let's see R rochu says can you please train us with some Java projects um I don't do anything with Java uh at least not for years I I haven't done anything with Java so I won't be uh doing anything with that uh Carlos ask what terminal I'm using it's iterm I think it's iterm two so uh yeah it should say yeah iterm two uh Earl says very cool that you're doing this for everyone uh thank you thanks for saying that hopefully uh you all can get something beneficial out of this I know I do from uh all of your input I get uh Kaz kazak I can't pronounce that but if the first part is kazak says Hey Jesse many thanks for what you're doing uh you're welcome thank you so much for watching and uh for saying that uh Park Ryan says love free code Camp live awesome I love that you're watching thank you for saying that uh Phillip said woot woot marketing so I think Phillips and uh marketing as well I I I think I remember talking about that before uh with you h I just saw uh RX said uh from 1995 to 2017 in one click yeah so that's when I went from the um from the one uh site into what I had done for it yeah everybody was really surprised whenever I built that it kind of caused um I don't know if I want to say trouble exactly but it was like it caused trouble in that other department then immediately wanted similar things for their sections of it uh and so that kind of caused trouble because people were asking they were asking the people who were in charge of that site to do the same thing that I did and it just so it was a little bit weird uh I was happy that everybody likes it so much but it was there's a little bit of tension over it okay so this should work so um I didn't get through all the um uh all the live chat because there's so much in there right now which is which is awesome uh I think that's that's so great you all are are so active in the chat um I just see Alberto's comment it says mumbles net core with reactjs Donnet so yeah I'm not going to be doing any that stuff anytime soon although the um we do have some sites that run onnet that I'll probably need to be doing something with uh so um it's possible there might be some net stuff happening so I'm going to go back let's see oh I guess my five minutes isn't up so let me I said I'd give five minutes to the live chat so uh as soon as that timer's up I'll go back to it um let's see okay so Scotty says uh Scotty is new so hey welcome welcome um RX says new awesome uh meet says I don't understand how devs can allow client side rendering because my first rule is never to trust the client yeah I mean there's benefits to doing client side rendering so I mean I wouldn't uh obviously the the best I like to do both to have server side rendering and client side uh then you get the benefits of each so you know that's my preference but I certainly I I don't like to render everything client side unless there's no other way which there there's usually another way all right so yeah didn't get through everything in the chat but I'm going to go back over to here so we can kind of get through some stuff and I'll I'll come back into the chat I did just want to get through that first part because once we get a lot of messages I won't be able to read the stuff that you all put in the uh live chat earlier on all right so let's check out the uh message that it's given us here says success awesome uh we created Resource Center inside that directory okay so it's telling us the commands that we can use uh and using yarn as well uh so we can start our Dev SE server we just yarn start um we can build our files if we need to which we don't need we won't need to do that for a long time and okay we can run test and then if we want to I don't know that we're going to have to do this but we might at some point we we might need to do this H we might need to use yarn eject and when we do that then we're going to be able to configure things a lot more than we can now so uh create react app is it's really nice because it gets you started with things without needing to know anything about webpack or all the build tools that you're using but the you have to give up some of the freedom to customize in order to get that uh and if you don't eject then you can take advantage of all the updates that come out but once you eject then you have to handle some of that stuff on your own so um we'll see we might need to eject at some point point I'm thinking possibly to handle um some of like the file upload things CU what I've used I have used some things in the past that I'll need to do like I um some custom stuff with so we'll see uh if we can make it through without having to eject that would be ideal uh but I'm not opposed to doing it all right so uh as they say we could start by sding into Resource Center so let's do it and then typing in yarn start so let's see what port so starting the dev server showed up in this little tiny window all right so here we go so here it is so as you can see it didn't take that long it would have been really really fast if I hadn't to spend so much time messing it up and then talking uh but in very you know very small amount of time and effort we now have uh a react site and it works I love that little animation that's cool um we actually we also have this available on the network which I didn't realize that the last time I built that I didn't even know so that's really cool uh so obviously this is not what we're going to keep so we're going to get rid of all of this and everything but it's good to know that at least it's it's working so let's check out what code we have now uh in that let's see and I think I'm just going to exit this because this had our old stuff when I messed it up and I'm going to duplicate this tab because this is going to stay open with our server but then now I can't do anything on it so I'm going to duplicate that so now I'm in here and I want to see I'm going to type in adom uh and then Dot and that's going to open up adom and let's get rid of these welcome guides and let's see what we have let me make the uh font a bit bigger all right so here's our package Json file if you're not familiar with this this is the file that it lets us know a little bit about the project and what dependencies that we're using so like what other packages so essentially when we have a package Json our project is now uh an mpm module and we're not really worried about most of the time nobody's going to download our stuff as a module right if we're just trying to create a site but uh the official name and everything is you know this is kind of like an mpm module how how it would normally be set up so we're not really worried about I don't worry too much about uh editing kind of this this up here uh what we want to worry about more are dependencies and our scripts we're not going to change anything right now at some point later on we might though um we we might want to add in some you know some things to um process our CSS uh we'll we'll see we'll see what we need as we go on and let's see it did make a read me for us right now this read me has a lot of stuff uh a lot of stuff about create react app so at some point we'll probably do a proper read me for uh for our project but for now I'm going to leave this in here and uh possibly refer to it if necessary and let's see what else do we have the yarn lock is a file you'll probably you'll never want to update this manually and then you have your uh G ignore so this is going to so we're going to use git for this project uh but this is going to tell git the files that it doesn't need to worry about tracking okay so this is pretty standard you generally don't want to track your node modules uh and depending on what you're using for your project you might have different things that you're not going uh going to track so the next step is let's check out our source and so I want to open up some of the pages so this is our index.js okay so all this is doing is we're importing some things uh and then we're rendering the app component so let's check out our app component so we have app.js and this is where we start to see like things that actually look like HTML uh and this is called jsx so it it does look like HTML but it behaves a little bit differently uh so we use class name instead of class that's kind of a big obvious thing right off the bat and then we can actually put Javascript inside of brackets so this logo here is actually a uh JavaScript uh you know variable we're calling on we've imported logo uh from the logo do uh from logo.svg so those are just a few of the the different things and we can see um we can change change some things so I'm going to add some exclamation points because I'm super excited and I'll show you see now we have the exclamation points so that's the file that we're going to start editing uh first and at this point what we want to do is I guess we should set up our um our git let's set up git first because I want you all to be able to see all this code normally I'd actually wait a little while to set up git uh because I do so like some just basic stuff uh to set up the project but in this case I think it would be better if if you all could see and interact with all of the code so let's do that now so we're going to do get a knit and that's going to make this uh a get repo all right so now let's do get commit let me let me do status just to show you all right so we have this get status so um we have these files that are untracked right and notice that these aren't all the files in our project so those ones that were in the G ignore aren't listed here so we're going to do a get add and I'm going to press just put a period there and that's going to add everything and now if we look at our status you can see we have green so now we're ready to go to add all of this so I'm going to go get commit and I'm just going to do the m flag which means I can put the message right here in line for this commit and I'm just going to say and it this is our initial commit and there we go so now this is a git repo let's set up the repo on GitHub so that you all can see what's going on so I want to go into my GitHub actually we should I'm going to do this in the uh GitHub for my uh for my department so let's go let's make a new repository Resource Center okay so we're going to have a new repo called resource center and all right so just a quick description we're going to make this public there's no reason right now that this should be uh private there I am going to have some API keys and things later on that I'm going to need to use but I'm going to use it server side and I'll use environment variables that won't get shared in the repo and then that way I can still share all the code without worrying about sharing API keys so when we get to that part I'll um uh hopefully I'm able to do that in a stream because I think that's an important step if you've never done that it's good to know so you don't accidentally share uh you know keys that that should not be shared so we're not we don't need a read me because we already have one the same thing with the get ignore we don't you know we don't need one uh license I'm not really worried about a license right now um let's see so let's create this repo all right now we we have an existing repository so we want to push that from the command line so we're going to copy this this get remote ad origin all right so basically we're setting up our remote here at at this address and then we're just going to push everything up to GitHub so here's our first command and then here's our second there we go and let's check out the repo all right awesome so here's our repo as I said our the read me has like everything from the create react app read me which we're going to take out at some point uh but for now that's in there uh it shows our first commit it shows our code uh so it shows like our app JS so you can even see where we added the three exclamation points so there you go so now you can uh you can look at this I'm going to paste this uh URL for the repo into the live chat and then I will be putting this in the description for the video uh for every video so that you all can see it so there it is in the live chat and and let me I'm going to check my timer okay let me move let me move this off and let's bring this in since this is where we're going to be doing you know we want to see the work so we have to we have to come up with our how we want this layout to be how it's designed to be now we have some brand guidelines that we need to follow we already have how it looks now so we just need to kind of determine well how how do we really want this to look also we got to make another decision here and uh I need your help on this one because I'm I know what probably should be done but I don't know if I'm ready to do it and here's the thing I've used materialized framework for all my CSS but it's based off of jQuery and it's not good to modify the Dom with jQuery when you're using react you want to modify it in the react way uh preferably using state to reender things so do I use materialize framework again and just just deal with the fact that I'm going to have some jQuery do I try to use materialize but don't use any of the parts that use jQuery or do I try to just completely do it from scratch um doing it from scratch is going to take a long time it would be cool to try to convert maybe use materialized but then convert some of the stuff that it has I'm not really sure or is there another library that I should just try to use instead I haven't seen a material design react library that I was that I really liked there have always been things about the ones that I've seen that were kind of like deal breakers for me I didn't want to use it so I'm going to go to the chat I'm going to see what you all think about that before I make a decision on this because I mean I'm at the point really where I'm going to start putting content in so uh if I if I'm going to use a framework I need to know because my markup is going to be based off of that framework all right okay got a lot of suggestions here let me actually says uh Bill said you plan on using test for this project actually I hadn't even thought of it but that's a great idea uh I have not used tests uh very often at all so maybe I should I do want to learn how to do tests so maybe now's the time to start maybe this is the project where I finally do all those things that I know are good ideas but I've I've always put off uh because of tight deadlines so we'll see all right so we have material UI so these are some suggestions for um alternates to uh materialized CSS so uh there's a material UI uh react materialize okay another suggestion for react materialize bootstrap re okay another suggestion for react materialize wow okay okay so it seems like if I'm going to go with the framework the most votes in the live chat go to uh react materialize so let me bring that up right now so everyone can see what we're talking about all right so let's check it out react materialize let me see looks like I've already gone there all right so this is what we see react materialize all right this is at least this would be consistent I suppose if it's based off of materialize it'd be consistent with what we've done before I'm assuming some of the markup and classes would be the same I'm also assuming that for sure they're not using any um jQuery I think it's safe to assume that we'll see okay I need to see let's see what the forms have okay not bad row I'm liking this so far this would have been helpful in our our last project uh if you remember we had some trouble with our um selects okay see how the date picker oh nice nice great okay and uh hold on JavaScript let's see want to see if it's says for sure that it's not using jQuery this has actually come a lot farther along than when I first looked at it so I'm I'm really impressed with this now I mean maybe I just didn't do a very good job of looking at it all but uh I thought the last time I checked which has been quite a while uh that it didn't have nearly this this much uh so I do want to verify that they are not loading J oops and it looks like all right jQuery is being loaded let me see if let me check their GitHub page does any can any does anybody know for sure have you used this and does react materialize actually use jQuery or is that being loaded for something else on that page oh it does say all right Carlos I see that thank you I think Carlos answered my question before I even asked it so uh thanks for being so on top of things all right so we go to the getting started let's see yeah all right well it looks like I was really really excited about this but this is not what we want uh what we want is this without the jQuery and I know it's got to be possible right I mean there's nothing special about jQuery that that can't be done in react so yeah we're going to um it's going to have to be a no for react materialize I feel really really bad about that because it looks so promising I was actually like have been really considering trying to contribute to this too uh because I I want to do this as well and I I didn't want to just start my own thing if they're already doing this uh but if that I don't know if they intend to try to make do it without jQuery or not um if that's their intention and they need help I'd be happy to try to do that but uh for now I just don't yeah all right so I'm not going to use that uh what was TR material UI let's see all right here's m serial UI let's see some of the components I'm actually I'm really interested in the form components since we will have a form all right so let's see text Fields okay it looks good let's see how the code looks all right that's pretty clean before I go any further I'm going to check right away and see what is being loaded these are fonts browser Stacks CSS all right cool all right that's good let's um let's see they we I think we do use a date picker okay cool that looks good select that's what it's crazy I'm looking everywhere and this is an alphabetical order it shouldn't be that difficult okay that's not bad I like that okay I'm liking this so far let's see um I'm going to go to the live chat really quick to see if someone has uh contributed some uh important information before I commit to this but I think this is going to be what we go with okay Greg is ask asking please say if you're going to start doing tests I'm listening to the background I really want to start testing myself I always have issues doing the setup well I guess I probably should start doing tests this is going to be a small project so it's probably better to start with something small so I'm G to try to start doing tests uh I can't guarantee that it'll be that helpful to you since I am not that familiar with test but I'm going to try try my best to uh do some tests um Josh Arnold this video will be available after after I'm done uh streaming so the um the secondary stream on Instagram is over now you can only stream for an hour so just to let let everyone know in case you were wondering so I did have some some viewers in there this time uh and so that that will be available for 24 hours in case anyone cares what I look like not sure why you would care but maybe Earl Lewis says isn't jQuery dead no it's not dead you might call it a zombie so it's I think it's more Undead like it'll always be around it'll NE you can never really get rid of it I don't really have that much of a problem with jQuery it's just when you use jQuery with react uh then you um you mess things up with um uh I don't want to get this wrong I always say the wrong thing help me out everyone uh it's virtual Dom right react has a virtual Dom I always accidentally call it the shadow Dom and I don't think that's the right term react has a virtual Dom which is like a copy of the the Dom and um if you change something in the Dom without doing it the react way then react it doesn't have an exact copy of the Dom so it messes things up okay oh um ma Maxi may ask what's the timer uh it's a Pomodoro Timer so uh for right now I'm using the Pomodoro Timer uh to help me get an idea of like how long I'm I'm doing things through my normal work I time everything I do with this and I it helps me to break up my work and estimate things better uh but then during the stream this helps me to remember to stop what I'm doing and go to the live chat and then also to stop looking at the live chat and do my work okay and it looks like react we have some people talking about react toolbox now what's react okay cool it is virtual Dom so I got it right this time all right let me check out react toolbox since I just had a lot of people talk about react toolbox yeah uh Maxim May anyway the yeah the timer it's just tomato timer.com so tomato hyen timer.com really simple it works for me there are some some ones out there with different features but I don't need all the other features so uh that one just works fine for me it's right you know right in the browser uh what am I looking at Material all right I'm just going to very quickly look at react toolbox because I don't want to spend too much more time on this I mean it's definitely an important thing to spend time on because this is going to determine a lot of you know what we do from here on out but beautiful material design components hm okay I like that it looks nice this looks good but do they have um it doesn't look like there's a lot of components though like maybe I'm missing something but I'm not seeing um like a select all right okay mobin says material UI has tests in GitHub so I guess that's better uh material UI is fine um let's see Anu rag ask what are you making how is react useful um I'm I'm making basically a website that needs to users can go on there download uh PDFs and images and then also uh they can upload files and uh send information with uh an an online form actually I've actually been meaning to update this with some other cool things I'm not going to I'm not going to commit to anything right now but I do have some ideas to make it a bit more interactive uh particularly like maybe giving users the ability to check on the status of their submissions and possibly even edit them so not 100% sure if I can do that through the uh Reich API that's our project management system but I've I've thought that possibly that would be cool to do oh drop Sebastian says look at the drop down in react toolbar oh okay so basically the drop down is like the select I see all right um since I can't decide here's going to be the decider whatever project has more stars on GitHub that's the one I'm going to go with I don't know that that's the best way but uh I don't have time to do any more research here on the stream so uh that's what I'm going to go with so let's check out the GitHub um repos for each one I appreciate everyone giving their input so um let's see all right so we got 27,000 stars and this one has only6 000 all right so I mean I guess I guess it's pretty um it's much different here next all right so I guess we're going with material UI my my reasoning also behind the number of stars is that probably means more people are using this and there's more like there'll be more stuff on stack Overflow about it if more people are using it so if I need help I can find it so it's not entirely without a foundation there but uh assuming that the two Frameworks are pretty much you know similar in what they offer I'd rather go with the one that's used uh by more people just to have that kind of that Community uh that I can go to for information so let's do this let's install material UI now do do we want to do the pre-release I don't know maybe I'll just stick with the stable one okay where's my so let's do this let's go what was it again I think it's just material UI yep so let's go yarn add material UI actually should see this react tap event plugin I had issues with this before I think someone who watches the uh these streams asked me to check out an eror they were having and it was related to this react tap event plugin I'm going to have to go back through maybe like my Twitter messages and see what that was because I don't want this to um I don't want this to mess us up as well so I've definitely had this error before and I've figured out some way to fix it I mean it's not an error right now it's just a warning but uh in the case where I saw it before it was actually messing things up quite a bit so I don't remember who it was though if it's someone watching right now let me know um otherwise I'll have to look back through so hopefully it won't be an issue uh let's go get status let add material UI all right so for now everything's going to happen just on the master Branch since this isn't even live at all at the point where this goes live then everything will switch over to a development Branch if you're doing any like really crazy changes we'll have another Branch for that uh so for now if any of you are interested in submitting any pool requests like uh you want to um obviously we only have one branch now so it's I guess it's a no-brainer but just to let you know eventually it'll end up being a Dev Branch um so if anyone's really interested in getting um you know some contributions uh for your GitHub profile uh I'm definitely open to that right now there's really not much going on but once we get started there'll be some more obvious things uh ways to contribute so um and I don't expect anyone to take time out of their day to contribute to my projects but if you'd like to I do appreciate it all right so let's go to the uh here's a quick [Music] example so I I've never used this so I'm going to have to go through how to use it as well okay here's that react tap event thing okay so we're going to have to just inject this tap event all right so let me move this over here and we'll look at the code oops I guess it was I on the break and I start I can't remember what I was doing um all right I guess I'm going to go back to the live chat for five minutes now then uh since I haven't gone there in a while I don't want to lose all the things at the top of the chat I'm already starting to lose some of it uh so anyway yeah so for now for the next five minutes I'm going to be going through live chat stuff um got some more new people I see uh welcome thanks for watching uh Sushi asks are you starting the whole project from scratch yep starting everything from scratch this time uh Ahmad says first time in here thanks for doing this Jesse you're welcome uh thanks for watching uh sham says yeah there are lots of new people it' be awesome if you can explain from Basics if you can okay yeah I'll do I'll do my best to try to explain everything uh in terms of just the stream in general uh I think I mentioned this before but I'll mention it again uh for new people coming in the whole this stream is just me doing my normal work I work at a university I'm a frontend developer so it's not rehearsed beforehand you will see me uh make a ton of mistakes and uh together with your input um we're going to build some cool stuff and uh this is definitely not a tutorial and I'm not claiming that I have the right way to do things either so uh just realize that I'm I'm learning I'm learning how to do react and I'm always trying to learn and do new things uh so uh it's not going to be like the place to go to get a step-by-step tutorial but it's definitely going to be if you want to know what it's like at least for me day-to-day as a frontend developer then this is a good place uh to go we've built up a nice Community here in the chat so people are very helpful if you have questions feel free to ask them I'll try to get to as many questions as I can you can put questions in the comments too and you can direct message me on Twitter if you like as well uh I try to get to everybody's questions as soon as I can uh I think that's it I think that's my normal the normal stuff that I say so uh if you're new you should be all caught up then uh and you know what the stream's all about uh SV asked any plan for small react project from scratch yeah it would be cool to do uh some videos and just do a really really basic project from scratch this is going to end up this is going to be a small project so it's kind of going to be like that uh it'd be cool to do a video where I do the entire Pro project um start to finish including everything maybe one day I'll do that this is not going to be it there's definitely going to be stuff that I do that's I don't stream uh just cuz I I need to work on this you know while I'm at work and I'm not going to stream the entire day uh the Raph says I'm new to programming so I wondered what tip you have that's the most important um honestly I think if you're starting out the most important thing is um just keep keep going don't get discouraged uh always keep learning uh so yeah that would be the most important thing like just always keep learning and trying new things uh if you ever get to the point where you feel satisfied like you don't need to learn any new things then I that's a bad thing I think that's that's a sign that you stagnated so um anyway and if if you're new like feel free to ask any questions or anything I'll I'll try to help you out however I can we have some people uh clubs in from Los Angeles uh Kevin from Trinidad awesome welcome Sport Fit is is Ohio not in the United States maybe I don't maybe uh I don't remember saying it wasn't wasn't in there but possibly the way I said it made it seem like that so sorry about that uh definitely unintended um I don't even remember how I said it but uh let's see aravan says new from India awesome welcome must be pretty late in India what is it in India uh like 1:00 in the morning a little after 1:00 in the morning so everyone from from India and from those time zones over there thanks for staying up so late to watch uh Scotty says retiring vet looking to get into coding uh well welcome um and uh definitely uh I'm I'm if you have any questions or anything I'm more than happy to help you uh there's actually an organization just for uh uh veterans that looking to get into coding so if you're interested in that uh send me a message on Twitter the uh my Twitter info is uh in the description uh and I can hook you up I met the guy that's in charge of that organization uh at a conference uh so if you're interested I can uh you know get you hooked up with that organization as well so uh and um yeah I definitely i' I'd be happy to to help uh a veteran in any way that I can uh roony says new from Israel awesome uh welcome uh serum says can we text you in Facebook for some small tips yeah um yeah feel free so you guys feel free to follow me on any social media things uh if you check if you check my YouTube channel I have have most of my Social Media stuff linked from there so if whatever you're comfortable in uh follow me in that social media channel and then I I can you can ask me questions there so I'm on pretty much everything um yeah I'm on pretty much everything unless there's some like really new Social Media stuff that I don't know about yet uh but otherwise most people ask me questions on Twitter uh and that's cool but if you're not really into Twitter and you want something else then that's fine as well um I'm also frequently on Instagram um Facebook so I do have a Snapchat but I don't think that's really the place uh to get coding advice from so not really on there that often all right so let me go back to this and this will probably be the last let's see what time it is so I'll do one more Pomodoro session of uh doing some of the work on this site and then uh then I'll try to get through as many questions in the live chat as I can um let me see let me take I'm going just do a few more questions that are at the top of the live chat cuz I'm afraid that they'll um they'll get pushed off uh if I if I don't look at them now so also if if I don't answer your question in the live chat I'm sorry uh please put it in the comments for this video or message me on some other uh social media uh platform and I'll I'll get to your question because I really do want to answer all your questions I just don't always have time uh in the in during the stream uh Mia ask how did you work through that site being new okay that must uh must be in regard to the um that first site that I showed you all uh this this site yeah it did it took me a long time to work through that uh when I was new it was crazy I actually didn't even have a computer for the first couple of days that I worked which was insane because like I'm a web developer how what am I going to do without a computer uh so once I did get a computer then I just I started to look through it all and um I just kept looking at the code I just inspected it in Dev tools and kept looking and just messing around and seeing how far I could push it and uh after a lot of trial and error of doing it like that then I finally got to I got it to what it is now uh so it did it took a long time and you know the it was it was frustrating it was a bit of a mess but uh I really really wanted to prove myself uh and um so I I did it it it worked and uh my my boss gave me a ton of time to do it so it was really cool about since I was new just really gave me a lot of freedom and time to figure things out uh but anyway yeah it was it wasn't exactly fun in terms of the workflow but it was kind of cool just to see how far I could take a platform that was obviously outdated all right so I think I got far enough down on the chat that I won't lose too much and now I can I can do some of this uh so let's see I guess we can just start into a homepage now and let me bring over where' I put it got a lot of windows open sorry need to find where I put uh the example oh I see I it logged me out automatically so that's another wonderful thing about this site is that you frequently get logged out you can't use the back button if you try to use the back button it gives you an error uh sometimes you can use it but a lot of times like it just gives you a big an error message so anyway all right so this is what we're going off of like I said I I don't have to go with this so just for the basic layout that I think I am going to keep no matter what is you know I definitely want this side panel I may even go with uh an always open side panel at least for desktop and the top bar I don't think I'm going to do this that says you know says the name I probably could do it since everyone yeah I'm not I'm not going to try to do this so it's not going to say people's name so that was kind of a fun little feature but definitely not um you not at all necessary all right so first things first let's just get this base layout of the header nav and then we'll throw in a footer I don't have one here but uh we may as well throw in a footer and that'll be a nice start all right so let's go to the code here and let's also on my my other screen let me bring it over on this screen so you all can see what I'm seeing I'm going to close uh in the side here in my my code editor uh I just kind of closed off the uh the file the pane that has all the files in there just to um gain us some space all right so I'm going to kind of scroll through this just to see uh if there's anything that I really need to worry about so this usage section seems kind of important so let's just check this out before we do anything okay uh so theme to be provided okay so it looks like I need a theme import a theme provider it's a appjs so H all right I'm not if if someone has used material uh UI before uh let me know about this but this is what I think it's saying it seems like it's basically saying I I need to anytime I use one of the components from there I need to import this this uh mui theme provider so can I get away with just importing this in my app.js or do will I actually need to import this in every um like can I just wrap app in this or or what I mean potentially like could I go out to the index.js and wrap app inside of this so I'm going to I I actually want to go back to the page that has the examples because that'll be better to get the visual so let's see if it if it explains it more wow I guess it does all right so that's like wow they're getting started page is really like getting started like what is a single page application all right is this the one that says yeah version one is coming why don't we just use this version how about that has anyone tried the next the new version I mean if if they're about to come out with version one why are we building it with the uh earlier version that's just a rhetorical question for me it's not it's not your fault it's my fault I should have thought about this um yeah let's do that let's let's use this version uh so material UI next let's do that uh where's my yeah okay so we're going to do yarn remove I think remove is is what you say material UI all right that's important actually uh I'm kind of glad I did this because if you're using yarn you want to do yarn remove it's not a good idea to go in here into your package Json and actually like delete something from this it's better to use yarn the reason being when you do yarn remove it'll update your uh yarn lock file you don't want to mess with that manually so uh always remember uh to do do this uh through either uh yarn add or remove and it'll just be it'll work out better like that all right so now we want to do yarn add and we're going to use material UI next all right so that's cool I I really I like the idea of using the latest stuff anyway I think that's better okay all right so now that we're through with that material icons all right let's install the icons as well so yarn add material UI is it oops material UI icons okay all right so now theme this actually this looks like exactly the same thing that was on the GitHub documentation so not really telling me much all right I'm gonna um I did look at the chat again I could see you all were like hey you got to read all right so let me let me read at least the bottom of this chat again uh because okay so bill says the mui theme provider is only at appjs awesome okay so just that really cool Aron ask are you familiar with Redux not yet but I am learning it I will be learning it soon and bill says later on I'd wrap it even around the react router okay that's good to know thank you oh man uh risb says there are some missing components in mature uiv one okay uh I think I'm going to deal with that I I think I'm okay with the missing components and I'll work around that if we need to build out some components on our own I'm I'm kind of I'm cool with that um Aon says is not read yeah I wasn't reading the chat um okay cool Sebastian linked up uh he he put in a link in the chat about which components are actually supported so thank you for that I'll check that out Sebastian says this will sucks for him okay Aaron says he's lying you can remove dependencies from package Json you just need to run YN again after you do it okay good to know yeah I um that's cool uh you can run YN again so if what I was saying about yarn and not editing package Json is not exactly true so uh it you just have to run YN again so if you're used to I guess it would be the same way if you're using regular npm like you can remove it from package Jon but it's not actually going to be removed until you run it again so yeah forget what I just said thanks thanks for calling me out on that Aaron so as long just remember if you don't use yarn remove and you edit the package Json directly run yarn again Oliver says not a good idea to use an alpha version of a framework yeah actually Sebastian the link you sent for some reason is coming up with a blank page for me so I'll have to check that out later um is this the one all right I guess it doesn't say all right at this point I just want to build something so if I have to switch back to the other one it should be fine cuz it seems like the um the the markup at least is somewhat similar I mean at least this part is similar so the first part that I need to do will be similar so let's just do that um let's look at let me make this a bit bigger so you all can see oh wait what did I just do H I tried to uh commit this and I didn't add the files first all right cool get commit um there we go all right so where's our app there it is let me see I actually don't want this on my I want to put this at the level of the index so I'm going to copy this and put this in here and we're going to wrap this all right cool all right so no errors great and then just double check and make sure I didn't miss something great okay good let's um layout I don't really want I just want components there's our nav okay that's what we need terminology is a little bit different than than a materialized framework so I have to get used to that but let's check out what we need to do here we need to import quite a bit wait a second H button okay I see terrible idea to use Alpha version unless you're a contributor all right so I'm getting a lot of uh a lot of advice about not using the uh Alpha in production all right all right you all have convinced me I'll switch it back I'm not going to switch it back right now because you've already seen me switch it back and forth a couple times so I will switch it back uh later on today so you guys uh you you all that are giving me guys um I totally understand what you're saying and uh you have convinced me but it did it felt a little bit like um I don't know like when you're a kid and and you're about to do something that's probably pretty dangerous and uh like maybe your friends or your parents or somebody are saying like no no you don't want to do that don't do it uh so I like I guess I was being silly and wanted to live Dangerously all right so I guess I should just double check really quickly to make sure that the um let's see make sure that everything is the same in terms of markup since if I'm going to switch it no all right let me let see how much time I have okay F four minutes before I'm going to stop so let's try to do something let's pull in let's import this at bar and let's get rid of some of this stuff and then what are we calling this at bar probably I'm guessing that some of this isn't going to work since these icons I think are different for the um the newer version but might be able to at least see something nope oh well see I thought it said that the icons were different I should double check before I remove these icons I guess it doesn't say anything about the icons so maybe I don't need to worry about it so maybe I can remove it safely oops is it not I thought it was thought that's what it was called gu we'll double check that whoa material UI oh okay I guess it's not I didn't have to put that in when I was removing it okay so John says in the says living on the edge Jesse's Mantra yeah I'm in a unique position I feel like um to where I have like nearly complete freedom to pick what tools I want to use to build sites with uh and I don't think I'll always have that so I kind of like to take advantage of it to try a lot of new things so um that way it it's good like a learning opportunity I don't want to build things the same way every single time all right now we're going to add this back in okay wonderful now let's see if this will work now it's still not working what am I missing at bar okay so we have this header all right it's it's giving me a header that has a height of zero what did I do wrong okay uh Aaron says try restarting the server that's a good idea let's um give it a restart see what happens it's going to be kind of rough all right awesome thank you so much Aaron that was great advice um it's going to be a little bit rough starting out because this is a new framework for me I mean I'm I'm really familiar with material design but in terms of this particular uh framework I I have no experience with so I apologize for the uh slow start here uh but I'm sure once I get the hang of it uh it'll be nice it'll be a lot nicer than trying to make all the jQuery stuff work uh with um with react so awesome uh so that's cool that works and that's probably yep my time is up so anyway if you are just here to watch me do my thing on the screen and set things up uh then you can you can safely leave now uh cuz I'm done with that part of it now I'm going to go through the live chat and try to answer as many questions as I can before I end I would like to end this around uh 4: uh and that'll be a 2hour um 2hour live stream uh which I think is plenty plenty uh long and terms of a stream so um anyway so if you did watch and you need to go now and you're not worried about the you know the question answer session thank you so much for watching and uh thanks for all your help and as I said earlier feel free to ask me any questions on any Social Media stuff uh or in the YouTube comments and uh I'll be happy to you know get back to you as soon as I can I definitely don't consider myself an expert but if you still want my uh advice in spite of that I'm happy to give it uh now for everyone that can stick around I'm going to answer answer some questions uh I'm going way up to the the top of the live chat uh so I a lot of the chat is now not available to me anymore um but basically everything from around 2:30 p.m. uh Eastern Time on is still available for me right now so I'm going to just start there and go down if I didn't get to your question cuz let's say it got pushed off the page I'm really sorry please ask me again in some other form uh either in another live chat or in any any Social Media stuff I've actually I've even had people find my email address and email me so that's cool too if you want to do that I no one has yet found my phone number and called me so I'm waiting I'm sure it'll happen one day okay so uh NE neandra asks I am new what kind of project will you do today how long does it take um uh Zanna gave a nice EXP ation uh saying I'm refactoring a very old static site and uh it's probably going to take about 3 weeks so yeah I'm going to stream probably around two hours every weekday uh for the next 3 weeks or so and um I I expect that's what it'll take if I decide to add some extra features then you know it might take longer than that but I'm thinking just keeping it with the base features that it has right now I'm guessing about 3 weeks and that's in including like I I realized there's probably going to be times when I can't work on this I'm going to have to spend time in meetings and things like that um I know I have some I have to do some interviews uh we're interviewing for a web developer job here I have some interviews scheduled um coming up uh and so there's going to be a lot of other stuff I have to do so if I were dedicating all the time to this I probably could do it in less than 3 weeks uh and then there's also the additional um you know added extra time in that I'm using uh create react App instead of next which I'm not as familiar with and now I'm using material UI instead of materialize so I'm going to have to learn some things as I go also going to attempt to use tests all right Lucas says what's up what's up Lucas thanks for joining us uh amelo asks does anybody know what this site is going to do like General like uh crud um it's it's not really going to like do a ton in terms of like interactivity right now uh the um it's just going to have a basic contact form and um not a contact form a project submission form that is going to have a file upload uh but I'm not creating a database for that information at least I don't plan on it now it might be cool to do but we'll see how it goes but basically that info is going to go to uh through using an API a rest API it's going to go to our project management uh system which is Reich so that's the plan if I have time it would kind of be cool to hook up some sort of database to this just to have like another place to back things up right now we have the problem that occasionally the files won't go to Reich I I you can upload files through the API to Reich but occasionally it it won't work uh and so it'll come through in the email the file name but the actual file will never make its way into Reich so it might not be a bad idea to have another place where I store those so we will be going over how to do file uploads in node which uh that'll be cool Alberto says I understood it to be like a Service Des desk ticking system yeah actually it's exactly like that on Berto that's a good way to explain it uh abishek says I just started studying react from Full stack react book is completing the book with examples enough for getting my first job um ofex says says no uh Augustine says try and see how it goes so I would say it just really depends like getting your first job uh is going to depend on a lot of different things so it's hard to say whether or not completing you know one book or one course is going to be enough uh basically to get a job all you have to do is convince someone to hire you so that it helps if you have experience in a good portfolio but really you don't you don't necessarily need that uh so the more you can do to build up your portfolio then the better chance you'll have at getting a job so if if you're learning a lot with this book and you're doing a lot of things then yeah maybe you could get a job with that uh I'm not really familiar with the book so I can't say I can't speak like to the content of that book specifically but I do get similar questions occasionally and you know my answer is just uh you know you you can try to get a job at any point you might get it because you know it really all you have to do is convince somebody that you can do the the job uh so for some people you know they take they study for a really long time before they get a job other people a few months and they get a job uh and then they have to learn a lot on the job but uh I wouldn't say like don't feel like you have to complete so many things before you can start looking for a job look for a job while you're learning uh and if you get it wonderful if not keep learning and keep trying in this industry it's not like you need a certain type of certification which I think is really cool uh so uh but I would say as you're going through those examples build up your portfolio uh actually build do side projects do some freelance stuff do whatever you can because that's really important to be able to prove that you can do the work bill says I went back and listen to the first 25 minutes of the stream uh I missed at four times speed caught caught up the speed diff was draing at first I must talk slow enough that that's possible to understand me at four times speed I never thought about doing that that's pretty cool oh Maxim May asked about the black GitHub so let me show you my GitHub so the background is black so yeah um I kind of don't want to go into again how I got this to work cuz I've done it a few times before in previous videos but uh basically there's a um a GitHub Dark theme so if you do a search for GitHub dark you should be able to find all the instructions to do it maybe one day I'll do a video like showing how to do it since a lot of people ask me about it uh but for now like check out GitHub dark all right it looks like there's there's been some a bit of discussion about women programmers and Men programmers and stuff so uh I don't know if I want to read out this whole discussion uh in the live chat um yeah I think I'm probably just gonna skip it I don't want to like uh trigger anybody uh if you know you came here looking for react and instead you get a debate on uh you know gender and coding and stuff so uh so I'm going to see I'm just letting you know everybody involved in that discussion I'm not going to read out the comments not that it's not a good thing to talk about I just don't want to um uh I I don't want this stream to uh get into like debatable topics I just would like it to be a calm Place Abby Shack asks uh okay so if I complete the free code Camp react challenges then so then can you get a job so I mean I think my answer from before still suffices to this it just you know you can get a job when you get to the point where you can convince people you can do the work and to convince them to hire you uh so yes free code Camp will help you get to that point but it's not a guarantee uh so just you know you got to do whatever you can to increase your skills you know and try to network too there's other things besides just the programming that can help you get a job being able to network uh you know having a presence online via your social media and your projects your portfolio that all those things are are important okay bill says great about a create react app is built in the j/ enzyme support Okay so for testing I should probably start looking into J then is that I think that's what what Bill saying here since uh create react app already has has that so that's good to know I wasn't exactly sure what testing framework I should start with all right okay Zan said John that that would be oh it's um John uh said to make make your own in terms of CSS Frameworks make your own less bulk that would be really cool I do really want to do that one day to make my own framework that um basically would fit everything that we use at the University for our brand standards uh and our style guide and make a framework that other like if we hire people to build websites that they can just use that uh or if other departments end up having developers that they can use that so that that is actually the end goal for me at some point if I can just build off of work other people have done though that would be cool as well uh I know it would be more lightweight if I did it myself but I mean there's there's a lot of things that I could just build on that other people have done that I don't necessarily need to redo myself and then Zanna kind of rightly says that would be ideal but he only gave it 3 weeks so yeah that's that's kind of the thing um I'm not worried about actually building the UI but in terms of then taking what I've built custom from scratch and then testing it in all different browsers and devices and screen sizes like that's the part that I think is the most difficult when you're trying to build like a a CSS framework or something from scratch is that these Frameworks that are already there so many people are using them that a lot of those issues have already come up you know from their use and so they've you know they've dealt with issues that I wouldn't even you know know about uh when I so it's just you know yes it is a little bit more you know possibly a little bloated but you get the benefit of having all the basically all these testers you know for free that that you have all their experience and all the issues that they've worked through so I'll probably end up doing some sort of custom framework but it'll definitely be built off of someone else's potentially I might just end up trying to contribute to one of the material design react Frameworks out there and that might be better than trying to do my own just in general for the for the entire Community it might be better to not make a new one and instead just try to make an existing one even better all right let me look through looks like I'm going back through there there were a lot of different suggestions for um for framework CSS Frameworks and stuff so I really appreciate all the uh all the suggestions all right so uh Ryan asks do you use the pomodora technique when you are working or just during live streams answer questions so um I think I actually mentioned this earlier so maybe uh You' ask that question before I said it but yeah I do use the pomodora technique when I'm working and um I find it helpful I should actually add that to the list of stuff that I'm going to do videos on um because I've gotten some questions on that too I think that would be useful just to go over how I use that uh T tunahan asks which backend are you using um I mean this is this is going to be node uh everything's going to be in node and in terms of uh like there terms of database there's B there's going to be no database uh Pro probably no database we'll see we'll see how it goes um but yeah this is going to be reacting node.js okay about about an hour ago uh K kazak asks how long this is going to be uh cuz it was already 9:00 p.m. in Europe so I guess it's a little late for that question but usually the streams are around 2 hours long uh Kyo asks will you make the source code available yes it it actually is available now on GitHub it's public it'll be there uh so you can check it out whenever you want okay uh so I got some comments about the inject tap event plugin and how to initialize that so cool it says the drawer component doesn't work without it so that explains why the drawer component wasn't working I suppose so thank you for that Nathaniel says I do not know how to use react however I'll be learning soon maybe after I'll do some pool requests that sounds awesome yeah uh definitely let me know if you need any help and everything with with learning react and then that'd be really cool uh vk3 as someone from Macedonia Smiley with a smiley face so anybody from Macedonia around uh vtor um says love from Portugal awesome thanks for uh thanks for watching uh Jack bannett ask what's a good language to learn um I would say JavaScript but I'm biased because that's what I mostly use it it entirely depends on what you want to do uh so if you want to do web development then learn JavaScript that's your best you you're for sure going to use JavaScript at some point if you're a web developer you may end up using other languages as well but you wouldn't have to uh you can build pretty much whatever you want on the web with just JavaScript uh Nathaniel ask any resources you'd recommend for learning uh react uh the react documentation like the official documentation is great if you want to spend money Udacity has a react course right now that I'm doing and I'm pretty impressed with it so far uh free code Camp is good free resources code academy has um a free course uh so I would check those ones out and then there's a lot of YouTube videos about it as well Maxim says from France uh awesome I I just I love hearing where everybody's from it it does it never gets old to hear where everybody's from It's Always really cool every time to hear people from all over the world uh that are joining in uh Michael says hey just starting up a react project for myself project myself creating a ride share app for a university that also records CO2 statistics per ride and an aggregate that sounds really really cool uh so Michael if you're still watching I know that comment was from a while ago if you're still watching uh i' I'd love to see that so if you could put either in the live chat or um send me a message on Twitter or something like if you have a link to the GitHub uh a GitHub repo for that that would be really cool I'd love to see that uh Shar from Bangladesh awesome RAC says it's 1:00 a.m here hyped awesome anurag says I'm from India awesome things going on cool uh thanks for saying that say oh Greg says would I would love to see you the Trello board when you're all set up yeah I'm going to make the trailer board public and then I'll put a link in the uh video description so I I'll have the link in all the descriptions for the videos when I'm working on this so uh my one of my co-workers um is logged into the Franciscan University YouTube channel and uh he occasionally um types in silly things into the chat so this time he's typing once I did get a computer so um see uh RX says how do you plan what to do first uh setting up routing directory structure or go feature-wise in a project um I'd have to think about it a little bit to think about how I've done it before um because I'm often I usually don't get a chance to have like a nice planning period occasionally like I'm just pulled into projects sometimes that are it's not exactly from scratch so I don't know I it kind of does it depends on what the project is sorry I can't my brain's just like not not working right right now I just can't think of how I normally uh do that and um so I'll have to think more about that and get back to you I would say like in big picture I definitely think about features but then when I actually get down to it I go more by like structure so like you know Pages at a time like get the main page layout and then uh each page so I guess that would be that's kind of how I I go about it R rbob says use angular material I assume you're being funny assume you're joking there so not sure that would work for this project uh amazing says please can you continue this live or maybe record it even if you have to voice over later I'll probably do some uh live streaming like in the mornings where I don't really give commentary and I just work uh and when I do those I actually I do them on my own channel so that I don't take up the free code Camp Channel all day uh so if you're interested in that uh if you follow my or subscribe to my channel on YouTube then you'll get a notific when I do that I also usually post on Twitter when I do it too so um either way if you check see my Twitter notification or whatever uh you know then I'll you might be able to see more more of the project all right man there's so much in the live chat I'm really I kind of think there's no way I'm going to get through every question so I'm I'm really sorry about that let's see hey Evo how's it going I just saw Evo said hey Jesse what you doing so and John John B says what are you building so yeah I'm building a react uh a pretty simple react site ibuka says there's nothing wrong with using a framework that's on a bleeding edge all right thanks ibuka I mean yeah it's probably a good idea not to use it in a project that I really need to do for work maybe in a side project I'll try like the really bleeding edge stuff Aaron says programming always starts off slow yeah that's true uh Iuka says if anything you'll be encouraged to contribute to the project yeah that's that's actually good idea so he's saying if you use something that's bleeding edge uh you know like Alpha version or something of of a framework then you'll have a lot of encouragement to contribute because I mean you're likely going to see a lot of bugs and things so I never thought about that but that is uh a good point uh noi says slow is cool for us beginners even uh because of you I'll start learning react oh that's cool that's really cool um yeah uh NY let me um let me know how it's going with learning react and if I can help with anything I'm I'm happy to help Aaron says keep on rocking Jesse cool thanks uh Enix core says I'm too late again ah sorry sorry you're late you can check the uh recording I'll probably do tomorrow I'm actually going to do a different time so maybe it might be better for some people I think I'm going to have to do a stream in the morning uh because I have a meeting at 2 p.m Eastern tomorrow [Music] moin mvin did you really uh try to post my um my phone number in the in the live chat you didn't post the last two that's actually my I think that is my work number I'll have to look it up because I don't remember my work I actually don't know my work phone number 283 yeah moin I think that is my work number so I kept thinking people would get my cell phone number cuz that's out there as well but uh yeah you found it I didn't even think of about that that obviously my work number is probably online uh but my sale number is online as well because when I was freelancing I use that as my business number so anyway if anybody really really wants to call me I just I never answer I let everything go to voicemail so if you leave a message I'll get it uh I just get so many like calls from like spam calls uh that I I just never answer my phone anymore um let's see Bailey says hello new here just wanted to say thanks for doing this when is the next time you'll be doing this uh welcome and uh uh you're welcome uh thanks for uh for watching the next time will be tomorrow so probably tomorrow morning uh Augustine says thanks for coding mate it was good when is the next session so yeah same thing probably tomorrow morning John B says how long have you been using react um just this year so I probably started building and react in the spring of this year somewhere around there so not not actually that long I think some point last year I tried to do like a Hello World app and react but so I don't really count that cuz that wasn't really seriously trying to learn react uh Aaron says uh is there a way I could do a stream on free code Camp I've been programming for 18 years and love to teach um yeah I I think that's possible uh it's not really my call um you would need to ask um Quincy um or get a hold of B so um check um probably on Twitter it might be the best way to get a hold of of Quincy so or you can just tweet at freec code cam so he manages both the accounts so check out the free code Camp Twitter and maybe send a message and say like hey you know I was checking out Jesse's stream I'd like to do something like that and uh he he might be open to it so I can't really guarantee anything but um that would be really cool uh John says is it possible to make the final production JavaScript and CSS set save separately for each page and a website even though there are many shared components templating Etc um yeah I I suppose I suppose so maybe um I'm sure maybe if there's some other people in the watching right now that have more experience with that you could explain it uh in a better way um see Mar says is finishing my free code Camp front end certificate enough to get first job I'm almost done I have CS degree already but that hasn't been enough honestly Martin if you have a CS degree and you're going to do the free code Camp certificate I mean you're you're in a good place right there because you know you're going to have the best of both worlds in terms of you know you have the kind of online doit yourself learning and you have the degree so um you're going to have an advance vage in kind of those old school companies that still really value a degree uh so I would say yeah go for it and um it sometimes it can take a long time to get a job I know uh when I was looking for work after I finished College it took me a long time and the jobs that I eventually got were not really great jobs and um then whenever I quit my whenever I quit teaching I used to be a teacher and was looking for work it took me a while to find work too and I eventually basically just did freelance work um actually hold on my wife is calling so she's about to be on the stream hello hey hey you um I was going to leave maybe around 5:30 is that is that cool okay okay all right okay bye okay sorry about that but I I want this to be realistic about how my my normal day is and so sometimes I get phone calls okay so uh DJ says uh it could be enough to just get the uh certificate from free code Camp to get a job from personal experience I was able to get one without a CS degree after doing the front end certificate so that's really cool so um so DJ is saying uh they were able to get a job with without a CS degree with just the front end free code cam certificate so that's really awesome congrat congratulations on that that's that's great and it looks like uh you all are given some great advice to Martin there in the live chat so thanks for that and um yeah Martin as well um some people were talking about like LinkedIn and different social media uh Martin if you want to follow me on some Social Media stuff and um yeah that might help like expand your network a bit like on LinkedIn and if you want to like put out a tweet or something saying that you're looking for work I'll I'll be happy to retweet you uh I don't have a ton of followers on Twitter but most of the people that follow me are in you in Tech so uh it would be a good you know good to get those tweets up uh to get to get it out to people who might actually be able to to hire you or pass it along to somebody okay cool uh Bill and Aaron are both saying yes use Jess for the testing framework cool all right Aaron says I made my own CSS framework for hired.com that's really cool um Aaron if if you're still uh with us in the chat how how long did it take you to make the CSS framework uh and was it was it a difficult process I'm I'm really interested in um in that you know because as I said earlier I'd like to at some point John B says should I apply If an employer wants five plus years experience when I only have two years of experience um I would do it I've applied for jobs where uh I didn't have the experience that they wanted CU you never know um usually when people put out uh job descriptions that's like best case scenario of what they want but they're willing to take less than that uh so and if they don't get anybody that meets those requirements sometimes they're they're more willing to take less than that so it's worth a shot as long as the application process isn't like really difficult then it might be a waste of your time but if it's a pretty simple application process and it only take you you know a few minutes or so then I say go for it uh Martin says I'm already over a year past graduating I should already have a job yeah I mean it it can be really tough I would say like I mean finding a job I don't I don't know if IID say like you know you should or shouldn't already have a job like it just all depends like your location the job market there uh there's a lot of factors that go into how easy or difficult it is to get a job so don't get too down on yourself uh just keep at it keep trying you may have to take a job just that you don't really want just to pay the bills there's no there's nothing wrong with that um or like maybe you might want to take a job that is paying you a lot less than you probably you know would want but it'll get you good experience to get the job that you want so I mean there's a lot of you know there's a lot of different factors to go into that but I say just keep working keep doing side projects if you can or freelance work do anything you can to build up your portfolio and keep applying uh you know keep applying to a lot of a lot of places and even if you're not exactly qualified uh you know that's that's the only way I mean at some point it's probably going to work out there's a lot of jobs out there so you just got to keep at it uh Wesley says uh try to take advice serious and dare to take risks in life and you will succeed in almost everything you put effort into uh any thanks for that Wesley yeah I mean definitely uh you know when you're giving advice by people especially people that have you know kind of been in they've been there and they've gone through that like uh yeah try to learn all you can and um yeah taking risk I mean sometimes it does take that it takes going out on a limb like I I quit my job and ended up going freelance and it was really like I wasn't sure how things were going to go uh you know was I going to be able to pay the bills and stuff and it led me to where I am now you know after it took a couple years you know a couple years of you know it wasn't always easy it was it was difficult but you know I kept at it and now I'm I'm you know I have a job where I'm I'm happy I'm doing what I really like I make enough to pay the bills so um yeah keep at it uh thanks for that Wesley uh Martin Martin says actually Martin Martin said something that's a bit negative towards Wesley's comment I I'm not going to read it out uh but Martin I will say um I mean if you're going to come on here and ask for advice and people are going to give you advice like you really probably shouldn't be negative at them you know like uh they don't owe you any advice they're just kind of trying to do it out of the kindness of their own heart so if you don't think the advice is good just don't take it but um I I don't think it's really it's really right to be so critical of someone who's just trying to help you out and and doesn't really owe you anything also uh I try to we try to keep the live chat a place where like we're we're very like non critical of um of things like I'm all up for a debate about you know various Frameworks and tools and stuff but I don't want any like uh any like name calling or like derogatory things being said so you know let try to keep this a positive place where people can feel free to um you know Express themselves here give advice ask for advice and things so um you know just you know every for everyone you know just keep that in mind for yeah um Martin I'm going to read this one out here uh Martin says here I am getting bered by people who actually got jobs doing the same exact things uh I've tried when I was unlucky and didn't I mean I would say like um I mean I I just read all the comments there Martin so I'm I'm not sure what you mean by being berated uh everybody's just giving you advice so I know it must be frustrating not to get a job but um you know and the idea uh I mean the idea that you're just unlucky and didn't get jobs implies that they got jobs because they were lucky I don't think luck has anything to do with it uh getting a job is based on you know your skills your effort uh who you know you know your connections so I mean the people in here you know most likely worked really hard it's it's not easy so I mean I wouldn't you know don't don't belittle that and don't try to boil it down to like luck or something like you're just going to get that's not going to be a helpful Outlook you know because then you're like just turn that into something more creative I know it's easier said than done but uh if you see people around you getting jobs you know you could take it you know two ways or more but you know one way you could take it is you know kind of getting down on yourself saying like what's wrong with me that I can't get a job another way you could take it is like motivation like hey like it's happening for them it's going to happen for me like I'm going to work hard I'm going to ask them for advice see what they did so um uh anyway I'm going to skip through um I'm going to skip through some of that cuz the the uh the debate is kind of getting a little heated there yeah it looks like uh Martin's kind of still going on with this lucky stuff I will say this like Martin there's no such thing as luck man I mean I'm like there there is the like CH it's it's it's not luck it's not like these people have some good luck charm to get jobs it's um you know there there are steps you take right to to do to get jobs and you keep working at it will some people fail it's possible yes some people will probably fail and not get jobs there are people without jobs it happens uh but uh I don't really think it's right to to say that all these people in here that have jobs just got lucky I mean that's that's not that's not the case you know you have to do all the work and put in all the effort and even then sometimes it's not enough but that does doesn't mean that these people were just lucky and didn't put in the work and it doesn't mean that they didn't you know in a sense earn uh what they have so um I know you're really frustrated on that but yeah just not I'm I'm not liking all the uh the negativity uh cuz once again you know everybody on here is really trying to help and you you ask for the help and they're just doing what you ask them to do um let's see Nathaniel said I'd appreciate if you send me some links to react resources on free code Camp forums I'm a moderator on the Forum so you should be able to find my profile easily from the team list um I'll see I actually want to do a video on that as and uh so maybe I'll um I might do a video on that if I get a chance soon uh so I'm I don't know if I'll get a chance to put them on there if you the best thing to do would be either put it as a comment on this video or send it to me in on like Twitter uh basically that same request so I don't forget about it and then I'll try to do it uh one asked about the project being in GitHub it is it's in GitHub now but there's not really much to it uh shivom ask how is angular versus react in terms of performance uh sham I'm not really sure I can answer that because I'm not nearly as familiar with angular as I am with react all I can say is that I've been very happy with react uh so far when I'm using it um but that's not really enough to answer that question properly so I I apologize but I I'm not going to try to you know talk through an answer when I I'm really just not confident in uh my knowledge of angular to give a good answer uh Victor asks can JavaScript be used for making simple offline applications too I often have the idea an idea for a tiny thing I want to make uh and from Denmark um yeah you can you can build uh offline applications with JavaScript so uh if you're like with react you can build web apps but you can also build apps that will work on a desktop you can build apps that will run on uh on mobile phones so uh JavaScript is very versatile in terms of uh what it can do uh Evo says uh in regard to the performance issue between react and angular says I think a lot of the performance talks can be skipped the performance only really matters when you need fast rendering application I'm talking over 60 frames per second okay so that's that's cool um perspective there yeah and that's probably true I mean really it depends on what you're doing but for most sites and web apps uh the difference between one frame or another in terms of performance probably won't even be noticeable to the average user uh it like I said depending on what you're doing it may not be noticeable all right I'm kind of I'm trying to skip through okay I miss Anna saying goodbye I always miss her saying goodbye so um let's see I'm going to try to skip through a lot of this stuff um and just get to some questions um Martin actually says it's really demotivating to watch a stream like this where everybody already has a job has jobs or internships why would you be watching this if you already have a prog programming job uh actually there are a lot of people that don't have jobs yet that watch this and I've already had at least two people that started watching when they didn't have a job and then um have gotten jobs since then so um it's definitely a mix a lot of the people that are actually contributing to the chat do have jobs um and that's so that's why it probably seems like most people have the jobs but it just so happens the people at jobs usually have the most experience so they're able to contribute the most in the live chat uh but definitely um uh definitely do have a mix of people and we have people of a variety of Ages all over the world and are all skill levels too uh I frequently have people come on here and say like hey I just literally I've had people say I just started learning to Pro programming yesterday uh so definitely different uh you know all different people for instance uh Victor just writes thank you guys just getting started with coding and I've heard a lot of good about JavaScript will probably keep going down that route awesome that sounds good Victor and um you know if you if you need any help with that or anything you run into any trouble like just let me know i' be happy to help if I can oh man Shivam said it's at 1:45 a.m. in India and that was that was a little while ago so uh getting pretty late so everybody from India over there that's watching really late uh thanks for staying up and watching uh Martin says um I have almost nothing on my GitHub uh too but I'm finishing the free code cam certificate right now which is something yeah actually um I I definitely uh Martin I definitely recommend uh trying to fill out your GitHub profile uh as much as you can um because like I know uh sometimes like when we're hiring people here and I have to look through resumés uh if someone has a GitHub profile I'm way more interested automatically and then I check their profile and if they have they're actually using and they have stuff on there that's a big plus to me I'm always nervous uh when somebody applies and they don't give me their GitHub profile I usually try to look it up anyway and if I can't find it I wonder like what like what are they doing you know where's all their code at it doesn't automatically mean that they don't know what they're they're doing but it's just like I I can't see what they're doing so uh that's that's a big thing and I've I've actually heard other people who hire a lot say like if you have a GitHub profile you're automatically on the top of the pile uh if if you have an active you know GitHub profile and stuff on there so uh definitely um you try to get as much on there as you can and um you know side projects if you're doing freelance work uh you know I would try to put it like in your contract that that your all your code is yours and you're allowed to put it on GitHub and things like that so that you can get that stuff on there uh Martin saying all my projects look bad though yeah Martin I would say um it's better to have something on there than not uh if a if a person hiring they're going to look at like when I look at somebody's GitHub profile uh like if I'm thinking about you know doing an interview or hiring them um I don't usually get stuck on like the final product like I want to see the process so even if the end product doesn't look that good if I can go back and see the the process of you know them actually kind of improving things and if I could see like their later projects are actually getting better then that at least shows me that uh they're teaching themselves and picking up new things uh and that's really important to me I would rather hire somebody who shows the ability to teach themselves new things you know quickly and improve upon their work than somebody who's like already knows everything right cuz uh it even if you know everything now a year from now you know there's going to be new stuff and it's not going to be you know you're not going to be at the top of the game anymore but somebody who has that ability to rapidly teach themselves new things and improve they're always going to be on top of things so uh so I would say I mean you know even if you're not entirely satisfied with the projects it still gives people an idea of your your thought process you know to read your commit messages you know and see what's what's going on you know and how you work that's that's important uh Blake says what is Jesse's Channel um the uh link to my channel uh my YouTube channel channel is in the description to this video is it Jesse it might be Jessie wio is it Jesse wle 29 maybe I don't remember what the what the thing is but uh it's in the um the description this sayel says I'm applying to colleges to get a CS degree in the next four to 6 years wish me luck yeah good luck um oh Blake asked what is Local Host 3000 server yeah so uh I guess you're talking about like this up up here the Local Host when I run the server locally to uh work on my site that's what it is it's it's just a local server Port 3000 uh Martin's uh asking about GitHub and like how to do things uh free code Camp actually has a video series on GitHub and then Udacity has a free course on git in GitHub I definitely recommend those those will be a great introduction uh to to using git and contributing on GitHub uh cuz that's that's really important uh a lot of places want people who who know how to use uh git and um so that'd be a really kind of a plus uh to be able to put on your resume okay it looks like left so probably Martin didn't hear some of those later suggestions that I gave which that's kind of stinks but maybe he'll watch the uh the recording all right let me scroll down I got a this video is already G on way longer than I had expected so um I'm going to kind of skip a lot of the comments and just try to go to the questions now Dominic ask what's the value of using react versus just HTML CSS in JavaScript um I don't I don't know let me see if somebody else answered okay it looks like Bill answered I remember this time to check um component based reloading is a major value not having to refresh the entire Dom when data updates yes yes um Dominic asked is there any value in learning react Over The NET Framework uh it just depends on I guess what you want to work on um I I don't really enjoy working with a Net Framework when I have had to work on it now usually I've had to work on like really old things that use. net so maybe that's why I didn't enjoy it as much um so it just depends on what you want to do you know if you want to stick with all JavaScript stuff then learn react if you want to be you know learn other stuff then you know learn.net um you know if you if you really want to work at a place that uses. net then learn.net okay uh Scotty says are tutorial projects good for GitHub um if you don't have anything then yeah for sure just it's better it's better to have something than than nothing I think a tutorial project at the very least shows that you are learning on your own and uh and that's that's important that's better than than not having anything or just not having a lot um let's see John B ask Jesse do you think it's important to study up on data structures for interviews um I don't really know it I guess it kind of depends on where you're interviewing at what the position is and um you know try to figure out as much as you can about the interviews I think if you go on glassdoor.com people will post interview questions that they've gotten there so if you can research and see like you'll probably get a good idea about what questions people have been asked and what's most important uh to study up on Scotty says should the new guys fear the Whiteboard questions I don't know don't be afraid of the Whiteboard question I mean if you uh if you do your your you know do your work do the studying get ready then you know don't be afraid of any of that um you know the worst that can happen if you go an interview and you don't do get is you don't get the job you know you go to another interview just uh you know all you can do is just try to prepare as best you can uh John B says what do you look for specifically on a potential candidate's GitHub profile um yeah I I personally I want to see well I want to see like what have they worked on um it it does that relate to the job that I'm actually hiring them for and um then I want to look at like how many like how many commits are they how consistent are the commits um like have they contribut if they've contributed to other projects and open source projects that's a big plus uh if they've got because that tells me that the people that are um uh in charge of these open source projects that are maintaining them have thought that their code was good enough to actually pull in so that that's a big plus that's like a vote of confidence from from people who are established uh in the industry so that's a big thing if you can get that that would be impressive at least to me uh and then other than that though um just seeing like you know what are you working on are the projects good are you showing Improvement uh in what you're working on things like that uh ysep says hi Jesse is it necessary to know something about backend or server while you learn to be front end by the way I'm overwhelmed I'm sorry you're overwhelmed uh don't get too discouraged about that just keep at it uh you'll get less and less overwhelmed as you as you go on and get more confid um the uh if you're learning front end you you don't have to know a lot about backend uh it just kind of depends on what you're working on uh and so I would I would say like if it interests you go ahead and learn backend but if you feel like you have to learn backend stuff to be good with front end stuff I don't think you necessarily do and then if like if you get a job where there's back back end people and front-end people and stuff and you probably will never have to do very much at all with backend but like me with my job we don't have backend people here so I do have to do some stuff with backend so I can't say for sure that you'll never need backend because you certainly might uh but it's not absolutely required uh one ask um or one one says uh in terms of like the pro I think we're talking about free code Camp projects and different projects is you can try to build something HTML and JS first then try to do the same with react that's actually a really good uh I've done that um I did that with the weather app uh for free code camp and it was really cool to see the difference in terms of time for development and then the final product um so that's really good advice thanks thanks one okay so I am finally at the end of this live chat this was like an epic uh chat so uh we had significantly more viewers today than we have and they were really active in the chat so um uh thank you so much I'm like really pumped that so many people were interested in this and and stuck around and contributed in the chat I really appreciate that uh thanks everyone for watching I'll be back tomorrow like I said tomorrow will probably be an early stream because I have a meeting at my normal stream time so I will I will put it on Twitter uh at the latest tomorrow morning when I'm going to stream and I will also schedule a stream so you'll get it'll be on the YouTube channel for free code Camp um so anyway uh thanks everyone thanks for watching watching contributing and uh have a great day I'll see you all tomorrow

Original Description

I am starting a new project today. First steps are: setting up our development environment, reviewing the project requirements, and planning out all the tasks needed to complete the project. See a professional front-end developer at work. Unscripted. Mistakes included. Git Repo: https://github.com/fus-marcom/resource-center React: https://facebook.github.io/react/ Twitter: https://twitter.com/JesseRWeigel Youtube: https://www.youtube.com/c/JesseWeigel29 Instagram: https://www.instagram.com/jesse.weigel/ Code Editor: https://atom.io/ Atom Theme: Seti Terminal: https://www.iterm2.com/ Project Management: https://trello.com - Learn to code for free and get a developer job: https://www.freecodecamp.com Read hundreds of articles on programming: https://medium.freecodecamp.com
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from freeCodeCamp.org · freeCodeCamp.org · 50 of 60

1 React: Production Server Setup Part 2 - Live Coding with Jesse
React: Production Server Setup Part 2 - Live Coding with Jesse
freeCodeCamp.org
2 cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
freeCodeCamp.org
3 Browser history tutorial - Beau teaches JavaScript
Browser history tutorial - Beau teaches JavaScript
freeCodeCamp.org
4 Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
freeCodeCamp.org
5 React: Parameterized Routing with Next.js - Live Coding with Jesse
React: Parameterized Routing with Next.js - Live Coding with Jesse
freeCodeCamp.org
6 React: Dealing with jQuery Issues - Live Coding with Jesse
React: Dealing with jQuery Issues - Live Coding with Jesse
freeCodeCamp.org
7 setInterval and setTimeout: timing events - Beau teaches JavaScript
setInterval and setTimeout: timing events - Beau teaches JavaScript
freeCodeCamp.org
8 Browser and Device Testing - Live Coding with Jesse
Browser and Device Testing - Live Coding with Jesse
freeCodeCamp.org
9 Last Minute Updates - Live Coding with Jesse
Last Minute Updates - Live Coding with Jesse
freeCodeCamp.org
10 Post Launch Updates - Live Coding with Jesse
Post Launch Updates - Live Coding with Jesse
freeCodeCamp.org
11 React: Setting Up Google Analytics - Live Coding with Jesse
React: Setting Up Google Analytics - Live Coding with Jesse
freeCodeCamp.org
12 React: Masonry Layout - Live Coding with Jesse
React: Masonry Layout - Live Coding with Jesse
freeCodeCamp.org
13 Load Balancing Digital Ocean Droplets - Live Coding with Jesse
Load Balancing Digital Ocean Droplets - Live Coding with Jesse
freeCodeCamp.org
14 try, catch, finally, throw - error handling in JavaScript
try, catch, finally, throw - error handling in JavaScript
freeCodeCamp.org
15 Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
freeCodeCamp.org
16 Graphs: breadth-first search - Beau teaches JavaScript
Graphs: breadth-first search - Beau teaches JavaScript
freeCodeCamp.org
17 React: Masonry Layout Part 2 - Live Coding with Jesse
React: Masonry Layout Part 2 - Live Coding with Jesse
freeCodeCamp.org
18 React: WordPress API Live Search - Live Coding with Jesse
React: WordPress API Live Search - Live Coding with Jesse
freeCodeCamp.org
19 Creating WordPress Custom Post Types - Live Coding With Jesse
Creating WordPress Custom Post Types - Live Coding With Jesse
freeCodeCamp.org
20 Dates - Beau teaches JavaScript
Dates - Beau teaches JavaScript
freeCodeCamp.org
21 Miscellaneous Front End Updates - Live Coding with Jesse
Miscellaneous Front End Updates - Live Coding with Jesse
freeCodeCamp.org
22 Merging a Pull Request from GitHub - Live Coding with Jesse
Merging a Pull Request from GitHub - Live Coding with Jesse
freeCodeCamp.org
23 React + Prettier + Standard JS - Live Coding with Jesse
React + Prettier + Standard JS - Live Coding with Jesse
freeCodeCamp.org
24 React: Sortable Responsive Table - Live Coding with Jesse
React: Sortable Responsive Table - Live Coding with Jesse
freeCodeCamp.org
25 Geolocation Sorting by Distance - Live Coding with Jesse
Geolocation Sorting by Distance - Live Coding with Jesse
freeCodeCamp.org
26 Tradeoff Matrix - Agile Software Development
Tradeoff Matrix - Agile Software Development
freeCodeCamp.org
27 The Definition of Ready - Agile Software Development
The Definition of Ready - Agile Software Development
freeCodeCamp.org
28 Getting first React job without experience - Ask Preethi
Getting first React job without experience - Ask Preethi
freeCodeCamp.org
29 React: Google Analytics Click Tracking - Live Coding with Jesse
React: Google Analytics Click Tracking - Live Coding with Jesse
freeCodeCamp.org
30 Submitting a PR to an Open Source Project - Live Coding with Jesse
Submitting a PR to an Open Source Project - Live Coding with Jesse
freeCodeCamp.org
31 Should I go back to school to get CS degree? - Ask Preethi
Should I go back to school to get CS degree? - Ask Preethi
freeCodeCamp.org
32 Hero Section CSS Changes - Live Coding with Jesse
Hero Section CSS Changes - Live Coding with Jesse
freeCodeCamp.org
33 Working Agreement - Agile Software Development
Working Agreement - Agile Software Development
freeCodeCamp.org
34 A day at Pennybox with Co-Founder Reji Eapen
A day at Pennybox with Co-Founder Reji Eapen
freeCodeCamp.org
35 React: Sorting and Filtering Data - Live Coding with Jesse
React: Sorting and Filtering Data - Live Coding with Jesse
freeCodeCamp.org
36 React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
freeCodeCamp.org
37 React: Building a New UI - Live Coding with Jesse
React: Building a New UI - Live Coding with Jesse
freeCodeCamp.org
38 Definition of Done - Agile Software Development
Definition of Done - Agile Software Development
freeCodeCamp.org
39 Getting started with jQuery (tutorial) - Beau teaches JavaScript
Getting started with jQuery (tutorial) - Beau teaches JavaScript
freeCodeCamp.org
40 Making a React Blog with WordPress Content - Live Coding with Jesse
Making a React Blog with WordPress Content - Live Coding with Jesse
freeCodeCamp.org
41 React, NextJS, CSS - Live Coding with Jesse
React, NextJS, CSS - Live Coding with Jesse
freeCodeCamp.org
42 jQuery events - Beau teaches JavaScript
jQuery events - Beau teaches JavaScript
freeCodeCamp.org
43 React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
freeCodeCamp.org
44 React: Working with API Data - Live Coding with Jesse
React: Working with API Data - Live Coding with Jesse
freeCodeCamp.org
45 React: Refactoring Components - Live Streaming with Jesse
React: Refactoring Components - Live Streaming with Jesse
freeCodeCamp.org
46 jQuery effects - Beau teaches JavaScript
jQuery effects - Beau teaches JavaScript
freeCodeCamp.org
47 More React Refactoring - Live Coding with Jesse
More React Refactoring - Live Coding with Jesse
freeCodeCamp.org
48 animate in jQuery - Beau teaches JavaScript
animate in jQuery - Beau teaches JavaScript
freeCodeCamp.org
49 "Finishing" My React Site - Live Coding with Jesse
"Finishing" My React Site - Live Coding with Jesse
freeCodeCamp.org
Starting a New React Project (P2D1) - Live Coding with Jesse
Starting a New React Project (P2D1) - Live Coding with Jesse
freeCodeCamp.org
51 React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
freeCodeCamp.org
52 The Agile Manifesto - Agile Software Development
The Agile Manifesto - Agile Software Development
freeCodeCamp.org
53 jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
freeCodeCamp.org
54 React Project 2 Day 3 - Live Coding with Jesse
React Project 2 Day 3 - Live Coding with Jesse
freeCodeCamp.org
55 The INVEST approach to product backlog items
The INVEST approach to product backlog items
freeCodeCamp.org
56 React Project 2 Day 4 - Live Coding with Jesse
React Project 2 Day 4 - Live Coding with Jesse
freeCodeCamp.org
57 Chickens and Pigs - Agile Software Development
Chickens and Pigs - Agile Software Development
freeCodeCamp.org
58 React Project 2 Day 5 - Live Coding with Jesse
React Project 2 Day 5 - Live Coding with Jesse
freeCodeCamp.org
59 jQuery: add and remove DOM elements - Beau teaches JavaScript
jQuery: add and remove DOM elements - Beau teaches JavaScript
freeCodeCamp.org
60 React Project 2 Day 6 - Live Coding with Jesse
React Project 2 Day 6 - Live Coding with Jesse
freeCodeCamp.org

Related Reads

📰
How Dev Agencies Can Handle Client Revisions Without Burning Out (or Losing Money)
Learn how dev agencies can efficiently handle client revisions without burning out or losing money, by implementing effective communication and project management strategies
Dev.to · SarasG
📰
Give a Dead Side Project an Exit Report, Not an AI Eulogy
Learn to shut down side projects effectively with a compact exit report, preserving valuable assets and lessons
Dev.to · Sam Rivera
📰
How I’d Scope a Project Before Writing a Single Line of Code
Learn how to scope a project before writing code to ensure clarity and success
Medium · Startup
📰
Where to Start with my Project Idea
Learn how to break down your project idea into manageable parts and identify the necessary skills to get started
Reddit r/learnprogramming
Up next
How to Schedule a Message in Slack | Flowium
Flowium - eCommerce Email Marketing
Watch →