What is create-react-app and How to use it for Better React Apps Development

Key Takeaways

party on Garth all were doing and welcome to a brand new video from I penis hopefully now the sounds actually is pretty good since I you know a gotten your microphone for your shitty guys for the brand new video tutorials for the upcoming cool things that's gonna happen in the channel when you do mean on all the social platforms so hopefully you enjoy actually the the voice and you can actually hear me very decently so without any problems or anything else because they've got you know before that before I got the new microphone I've got a serious sound problems and voice problems some of people I couldn't hear my voice and couldn't actually you know hear my spelling and try to hear out what I'm saying so now it should actually sounds way well much better than than it was and hopefully you can actually understand now jumping back into our topic for today and I'm gonna talk about react create up so if you have been like a Reata developer or you actually newbie to the field of react and trying to figure out your hand about react how to work with you yes where is all the different things about reacts and white super super complicated to work with reacts and all those different things hopefully we can clear things out in this particular veto video tutorial and we can actually jump or talk more about the topic of reacts create up it's actually a toolset so basically react screen up is actually a tool set or command-line interface that allows you to create or configured reacts projects since creating or configuring reacts project is super super hard and really tricky and you know you need to have some skills and although things like what pack and all the configuration stuff in order to be able to configure the projects successfully just with your custom skills without any other help of Josette's like reactor it up this can be very very hard and tricky sometimes so using a toolset like reacts create up can help you a lot so what it does for example you want to like start a new react application you just use this tool set it creates a projects for you this projects is gonna you know ready-made for you like you created for example with Java projects using eclipse or IntelliJ or something like this over for another hand for example you gonna create an android project you're gonna have butthole complications set it up for you all you're gonna need to do just edit your code your application logic to it and you don't really need to worry about the other configuration because they are gonna be you know taking care of from from your IDE or from the command-line interface you're actually using in this case we're gonna use react create up so it has like the official documentation in here it's actually a part of the react framework so as you've seen just to make sure that you actually understand in both of these there's two there's actually the reacts framework if you're new to this the rest framework is the main core framework which is luckily reacts framing that allows you to create user interfaces but this one we're gonna cover it in here is just like a toolset that allows you to create and configure the project for reacts and being able to you know fastly and quickly configure this project so you will be able to pretty much very easily start of creating your projects and have any logic to the application without any problems so this is basically what it is now jumping back in here this is the main official website if you really need any documentation or something now actually we need to install the the react screen application allowed to be able to create an to figure out project so make sure to go ahead and open up a terminal and hit clear you see I'm Windows I'm using cylinder you can use Linux terminal or Mac OSX or whatever or you can even use CMD without any problems afterwards you need to go ahead and install this using NPM so you just run npm install or the better way is to use MVX so using MPX so here we see in here the documentation what it says MPX create react up so I'm just gonna copy this really quickly go back in here and you can paste it so just type in MPX where II's create react up and you put it your the name of the application my application in here and you actually just gonna go ahead and install everything and then we'll be able to pretty much figure this out for you so without any problems and issues just gonna go ahead and install this and furiously it starts like you've resolved it in everything and try to install in dependencies and stuff like this so you've got to go in and wait for this because it's gonna take some time so we don't really want to instant and after a couple of minutes there we go we've got it's done actually installing everything installed append dependencies you need with react scripts and the whole environment actually ready made for you without any headache or something so this is how basically you configure and create a react project without any headache or without much of configuration so very easily very straightforward without any problems now we've gotta go ahead and just go inside this project so whatever you name did for example it did name in my application so my - up make sure to CD there and afterwards you've got to go ahead and use the the co-teacher you want to use for example I'm gonna use video coding here just gonna give it code to the command-line interface that allows us to interact with Visual Studio code I'm probably just gonna give it a dot to open up the current one in a new instance of Visual Studio code and there we go it does this it's gonna open up the projects on a Visual Studio code instance and the editor and everything gonna be ready for there and we've got a couple of files actually to explain now it's gonna jump and to see the as the structure that creates or reacts create react up the command-line interface actually what it then and what is the whole final scene here it exists and why they actually use this so starting off with the main file which is the packet or JSON is actually having all the dependencies that your projects probably need your reacts application need if you install another third-party application and stuff like this gonna be in here and it has a couple of scripts in here that allows you to sort and build and test the out the reacts application so they already pre-configured for you so you don't really have to do any configuration or something for it you just like me to run it and enjoy with that there's also the eject script in here we're gonna talk about this in a couple of seconds just just standby in here and we've got lucky no dependencies ie users which trionic version he uses and it has like a custom version not the latest of course but it has the version that it does support without any problems with all the features so you don't really have to worry about that there's also reacts creates react script in here what it does this has the whole configuration of like for example since we have to use his web back to actually create the projects and minify the whole files and and actually be able to recognize the react syntax as a normal JavaScript syntax like Transpower all the different things that you're gonna use and probably react he uses es6 and es7 so here it's gonna just go ahead and do you know the comic creation for you so you don't really have to worry about that's in the other case if you try to use a normal reacts and configure this yourself like you know creating a project adding the webpack configuration to it for example gonna use time security a lock configuration you installed the old Mino command-line interfaces and you can install Bob over for example to transport liquor because it's the best transpiler thing and you're gonna do all that you're gonna face errors you're gonna face a lot of things and you're gonna take quite sometimes you don't know to be able actually to get into code and start creating your application so the configuration time or the configuration feel is gonna take quite some time so this is the main reason people prefer to use create react up the command-line interface that also to drain these projects and actually keep everything tight it up and and then everything in place so you can easily reach here it's actually way much better than they're probably just going and creating your own configuration and doing that because it's like help it's you know they call it actually in the reacts field people call it reacts configuration help because it really helped so yeah this is basically why they choose that just like the development time and get more now about headache and now we're just gonna see what is the project structure so starting off in here if you can zoom this a little bit let me just gonna zoom this for you guys to actually see properly I'm gonna use zoom in so you can clearly see what's going on in here so there's actually the SRC in here the essentially has all the code probably already being put it in here so it's normal you know you're gonna find if you try to run this application gonna find a very simple application running Reax application for your March and it has like the index don't genius the index Doge is gonna be the main entry point of your application what it does in here just going it uses the API of react and it renders that into actually the Dom the application components you rendered it to the Dom also you have like another external file in here which is called up the up components that it renders a couple of logos and images and paragraphs and stuff like this so yeah this is basically you can replace this with your own components and solve this all log with SVG a service work who don't really have to worry about us because this is actually gonna be running in you know behind the scenes of the browser and gonna help you or help your script you help your application gets loaded faster on the client browsers and you'll get less errors of stuff like this so it take care of the exceptions and error handling a lay-oh time and Leon balancing and stuff like that so you don't really have to worry about this don't change this anyway even though it says it's optional so I'm just gonna leave it there don't really have to care about this and you've got some test is being done behind the scenes so using just it does the testing as well for our application if you know all this testing and stuff like this you're gonna probably know what is what is this file is doing in here and finally there's the index dot CSS which has some CSS code you can add of course pre-compiled or pre-processed other languages like sass or less for using in a has like support out of the box so you don't really have to do anything rather than just going in and stalling this for example we can I don't know I'm just gonna get rid of that and use the integrated terminal because it's way much better and for example you wanna use like for sass we can go and do it like npm install node - sass so simply just go in and install this and make sure to install as diploma dependencies because you're gonna need it only and with development phase and so it's gonna be like you know supported by the application and you can have everything inside of that so this is simply you've gotta need to do if you need less you need to install the last library or the actual layer difference and then there we go this is basically where it is and in the thing I don't see a folder whatever kill you want you're gonna need to put it in there so for example you're gonna have your main logic application code you're gonna create more components for example you're gonna go in and do in here new folder this is actually what people use us as a reacts application so it's basically the best approach to create the structure of your project as you want to create a react application so this is basically the best approach you can find so here you we will name this like us components we're gonna hold the whole components your application components you're probably gonna move in here and create like for example our bossing components which is gonna be having some components gets rendered in opponent has a custom style and stuff like this for this one in particular for example you're gonna probably have well let me just go and see you I'm just gonna get rid of this both them sort of this so as I'm speaking you can have a body in here you can have all the components that gets rendered but you don't really want to put anything inside or really just your code like components and stuff free that your logic for your application outside of the SRC so everything should be contained inside of the SRC this is like actually to let reacts or create react apps to know that's you know everything all of your code has to be inside of the associate to make sure that everything's working so we'll do that any problems moving on into the public folder what it does it there is actually everything static like indexed or HTML or any HTML pages for example you're gonna have in there I don't know you can you can actually have like I can seriously Nevada Comic Con in here you're gonna display for your websites up there in the header I can have a manifest file we can have a meta file and here you can have images static files like audio files or music or something like this so everything's gonna be in there inside of the public folder so we only serves as a public folder for a normal web sites like public HTML what all the static files are gonna be living in there and obviously the node model is it has all the modules of course the configuration actually it's already become figured like webpack configuration if you're looking for web pack configuration you're not gonna find it in here you won't be able to find it in here if you want to use the full potential of create Reax app you don't want to see actually the the web pack configuration because the main reason one creates reacts up actually exists is actually to reduce the problem of using webpack configuration and giving into like a full whole of problems and errors and those dealing of the configuration in charge of configuring something and stuff like that so we hides that and it has like an optimal configuration for all the or me know scenarios case scenarios of an application or Reax application so if you want to see this you've got to go ahead and HX dance into your project gonna talk about this in a couple of minutes as i've said yeah so just basically it no further is saying that's gonna stall the application in here we're gonna probably do is just go ahead and use em PM 1 start as we have speaking about the to script that does exist so this NPM rhinestone and stuff like this it probably just gonna give you this ear most of the times most of the times not so if it gives you this error it's just you know very straightforward all you're gonna need to go ahead and do it just install the react a script because it's not properly installed and configured so make sure to go ahead and install this ask a development dependency only so make sure to do that so NPM install react script this is gonna take quite some time so you've got to go ahead and wait for this for a couple of seconds now after has been installed successfully just clear that out and run the script again so just NPM one start as we did before and now it should actually everything work pretty much fine if this errand doesn't pop up for you probably you are he very lucky and you can just go ahead and do that I did that's actually intentionally so a lot of people faces this area so we just wanted to you know guide them throughout this one and I hope how much of the if they face any kind of this error it'll be very easy for them to fix it and just you know don't panic or something it's because every area face probably just like miss configuration or you're not installing something or a model is missing or something like this so just you know work your head around and try to figure out what is going on because it's not actually at the end of the world or something like this like most of the people think and it just gonna automatically open up a server for you which is on the localhost 3000 port by default if it doesn't find that port available you're just gonna ask you to change the port which is actually just gonna give you like you want do you really want to change the port you say yes and it changes the port for you so everything is being Hamlet for you behind the scenes without any problems and there we go we've got the application running I've got the main components in here if you want to change anything in here for example we can go to the application and say lock up in here instead of like we've got it up here and we can put in age three for example kind of put in age three and they're gonna put hello from the other side or something like this we can save that if you see oh I just save it it has like auto reload and hot reload so we save it if we compose for us automatically you can take a look in here also it does the reloading automatically frozen so you don't really have to worry just like you know takes the headache for you and it gives you the hot reload the server the live server the web pack live server made ready for you out of the box so for configuring a project like this like create react application on a normal custom web pack operation ababil comma creation all those stuff is gonna take quite some time for you and it's gonna take a lot of stuff a lot of work you know a lot of errors gonna pop up for you in front of you and you cannot probably not understand that and try to figure out that stock overflow github issues and stuff like this so probably this is the best way to get started from reacts if you are a beginner I just go ahead take my opinion on going try to use creator axe up if you're later on experienced enough with reacts rate up and reacts in general you can just go ahead and move on and create your own web configuration and try to figure out this sounds so yeah this is this is basically at about the structure and the projects now we can jump into a little bit more advanced things so you don't really want to get the video too long but one what cover is the build configuration so let's say here your figure is actually out of your application you create application also normal we ask for application probably you put the components you can install third-party things from NPM from from your own or something you can get CSS stuff you can include them in JavaScript and stuff like this as you will deal with a normal reaction now afterwards you finish the application you won't actually build it and deploy it into your server like you're running github pages or any other static side thing or even a normal website you how you can actually build now the build script comes in handy in this particular case so we can go ahead and use this to NPM one build just like run that scripts in here just put that command in there and everything is set up for you behind the scenes so we don't really have to worry about a couple of things a lot of things actually now it goes and creates that in install into the production mode so it's gonna reduce the bundle size running it by the bundle size is actually the final bundle so all of the JavaScript coding here you put all of you components like inside of the apt or just inside of the CSS files the bottom JS for example the index dot J's all of those gonna be can copy it and actually transfer down into a much variable es version like a como script version like yes three or four or something that's that the browser can understand fully and it just like puts that all the vets inside one single file probably just you know multiple chunks and it does that for you so clearly in here it tell what it sells for you in the output it sells like you know minimize this he uses gzip as well to minimize everything into the actual optimal thing and we can here's actually there we go you will notice a new folder gets created inside of the the actual projects it's the build folder and sort of the billfold you've got everything you need to actually deploy your site or your application even though we don't actually understand what is going on in here behind the scenes where is all of these files and stuff like this inside of a static folder you've got your CSS files being you know minimize the inside of chunks and put it there you've got also like the GS files in here everything is in there without any problems and obviously you've got the media files for example you've got an SVG images audio also JSON files all of them gonna be inside of the medium pretty cool huh so yeah we're seeing here all of the JavaScript you don't really have to worry about anything in here we just go ahead and copy the build folder that we've created the build directory take it to your sides and just you know deploy their this all cards shows you how you can deploy this on a linux server or something this because it's a little bit more advanced than that but this is basically all you're gonna need to do know how you can use that to serve from this particular directory you can go in and install a package called serve so just use NPM install serve you can just go in and save this as a global so just - gee just save it as a globally afterwards already installing everything you can use that like serve you give it an S to give it which is static folder you want to start from and we're gonna tell it to start from the build folder in this case it's gonna governor run the build configuration as we've created it creates a server for us instead of like for example default for five thousand ctrl-click you're just gonna go and open and that's inside of Chrome and there we go we've got another application but in this case this is running a production build you know I have an extension in here that reiax is actually inside of production so curiously this page is using the production build of reacts on the other hand this one is actually using the development field of react so here we are actually running it from the build folder and stuff like this so how basically you can go ahead and you know build your application and deploy it into a normal server the last thing to cover is the Ajax commend what does the eject command does is basically as I've told it before that the web pack configuration of all the configuration that you know being hidden from you behind the scenes and you don't really have to take in care of off so you can actually inject them running it by eject you can just go ahead and expose them in here and you can edit them so which is not actually what reacts or query acts up is meant for which is not what you want to do if you don't really know what is actually doing because it's really bad and you can't go back if you reject your application you can't go back you can't actually get it back into how it was and stuff like this so make sure to now what are they doing before each I've seen that so rejects it's actually only for normal more advanced users not normal user beginners so make sure to know what it's actually doing I'm just gonna show you what it does so just NPM Ajax in here I think put that just put this command upon accuracy you will actually notice a you know are you sure you want to eat checks this action is permanent as I've told you before which you can probably not you know go back inside of it get a positive charge files or committed changes it gives you like this and interaction files what I mean by this like you need to use gates and stuff like this that's why I told you this is really really part and how I think I can get a go ahead and just you know staged changes or you know discard all the changes are stuff like this and they can give this back so mbm eject again they asked me again for for really want to do this I'm just gonna put that's you're gonna tries to eject and stuff like this you can take a look on the configuration in here you're gonna see noticeable you know configuration folders getting created and in your script files that you can use and stuff like this which is not actually what you want to do so just want to show you what it does just like you know gets everything all the configuration out for you so you can edit them in this case if you don't do the ejects if you use the create DX up the default configuration and stuff like this you won't be able actually to edit the web configuration or any other configuration that is running behind the scenes for configuring and reading acts and stuff like this so if you want to do this you need to eject your application as I've told you before ejecting is not the best choice to go for but only for professional users who knows what they're actually doing they can actually eject the application so this is basically it I just want to want it to point into rejection and stuff like this and how you can use create react up and stuff like this it's probably a little bit longer video but hopefully you've got the some tips and tricks to use we acts hurry up and what it basically is if you're a beginner if you don't know what is reacts right up it's basically a command-line interface that allows you to create projects very easily and configure them for react developments smooth environments so yeah that was actually guys think us watching a we'd we do hope you guys have enjoyed this one hopefully you enjoy actually the new voice tell me that in your comments if you really like the voice or something like this thank us for watching us that again I'll catch you hopefully in the next one