Build React Apps | Introduction And Getting Started #01

Key Takeaways

every one guys who ordered welcome to a new video tutorial from I Pyramus they're gonna have a course use a new coach series which is about react so we're just gonna get started with reacts create a couple of applications crazy one and little more about reacts how it works and use the power of react create a very nice and elegant user interfaces and yeah it's gonna be very very funny series over here so we're gonna do a lot of things gonna just offer a lot of examples and also we're gonna do a lot of practical things along the way on this series so in this particular story we're just gonna get started saying up a lot of things using it reacts with webpack and like set up the stuff we're gonna work on and the development environments we're gonna work on actually say and we're gonna explain a couple of things so what should the reacts you can go to the website we have chance to learn more or to see some kind of like examples on demos yeah it's very nice thank if you don't know is react reacts is just a framework that will allow you to create user interfaces using JavaScript are real time so you can include HTML elements on the JavaScript and just render that out into the actual HTML so you can manipulate the elements more efficiently and also react is very performance friendly so if you need a quietly a big application or big scale project and it needs a lot of elements to be rendered to keep to keep updating like on on loop cycle so react is probably the most convenient thing for you and like it's probably the best choice for you since reacts is from Facebook for those of you who don't know about that and yeah this is it so reacts just build user interfaces in a very efficient way so if you still don't convinced about using reacts you will see that is like alongside this the the series the power of reacts I wasn't convinced like back then when I started learning about reacts and using it in my projects but now I'm very convinced I would be used to react to any project or my next projects on on the web so any approach deval probably I won't use you yes enough talking I mean Chevy Shannon thanks so let's just dive into this we're gonna use reacts with webpack and using react with a pack it's just a little bit tricky so for that we're gonna like me some couple of things to use also we're gonna use little bro mix if you for those of you who don't know this little mix it just kind of a wrapper around web pack so web pack is just kind of a big giant complicated library that bundles your images and JavaScript files and CSS things and little mix makes it even more simpler so it takes web pack can just add a wrapper around it and make it very very simple for you to use it right out of the box I'm also gonna use bubble or babel I don't know how to spell this especially but I'm gonna use that for compiling JavaScript code and that why we need it because we're going to use GSX and that is using HTML elements on the JavaScript code so we can render elements from the react so we're gonna talk about it in its big bubble is very important as well so we're gonna need it so those are the basic things gonna need I'll just dive into that code I have just set up a couple of things as you can see here as you can tell I've just gonna go on and start up or create a couple of things so the first thing is distribution folder I have an index.html on it just the basic HTML so you can just delete that if you if you don't like it so we'll talk about it later on and also we have a PS so this is like a bundled up jeaious from web pack and also let me just remove that from you so I'm gonna remove it and we re bundle it to recompile using webpack and if we go I have no DiMaggio's because I have already installed a couple of modules for just making this story a little bit more quicker and save a little bit of time and also here I have a render ajs and this one dr. J's file is gonna take him on handling all the rendering process of our reacts and obviously we have the GS and this is the entry point of our application so whenever webpack is going to start compiling our assets is gonna just start looking under the up dog s and then require a couple of things in here if we do have that I'm just gonna dive dive right into this until find something or like just import all of our JavaScript files a lot are actually included into the up GIM spine so yeah this is like the entry point and here we have the package of JSON since we're gonna use node.js of course this is very obvious over now and yeah what that don't next is we're gonna talk about it a little bit later on so first things first you need to install a couple of modules especially the modules that we have just talks about first just go ahead and make sure to set up this like out of your package of JSON just NPM and nets and initialize your projects using no chance if you don't not if you don't know that so go to my channel you're gonna find a full course series about node.js so just watch this gonna show you a lot of things of know TS and you will just set up to go with this project no npm we need to install a couple of things as I've said and beyond install we need to install rheometer so make sure to install react and react Dom so react dog gonna help us manipulate our dumb HTML done so make sure don't stop both of these react react on save them as an actual dependencies and yeah I'm also gonna need the web pack cuz I've said what pack and liberal mix that's all gonna work together so what pack and also make sure to install the ball - max and save them as development dependencies or dependencies but development events is more suitable for these packages of your own modules and the last things we're gonna need is the bubbly outer so we have your bubble if you don't start bubble and bubble the other bubble environments and across environments in question vine is just gonna allow you to use all of the commands yeah like in a very specific way on a cross platform so just make your justices are gonna use it on like watching or compiler files using webpack in the romex now after installing all of that you are ready to go and everything stopped correctly and now we need to like tell it or tell what back how to bundles or packages that's why I'm going to use little Mac's which make bundling package especially with relaxed and webpack use gonna make it a little bit more easier for us so have just included just a very simple little hook next-gen script file that we'll do is just gonna go ahead and test for the GS X which is probably going to be a file or the react file since you're gonna use GS x on it so we're just gonna use the bubble the older and exclu the node modulus then just gonna let us use the es6 2015 syntax and react usually the bubble is it as i've told you before that bubble is a compiler so he's gonna compile our code into a real or native javascript code so this like what it does it just gonna take that keywords that javascript doesn't exactly know about and make its JavaScript from friendly code so javascript can just interpret that and run it i rot all right out of the box actually with with no problems so yeah so make sure to include that just go ahead next what that configuration model export and you just use the target node watch true external x' and you can delete that if you like but yeah just keep it up for making no errors for you and here we have more dealers so just gonna have Liotta and using the bubble you're also gonna find this on github so just make sure to go up it's a very simple co shell you can just pause the video and we write it out on your own make sure to place under the webpack don't make stock just into the root of your application and on the top in here what we're doing is just chilling next projects after of course requiring make nervo milks and just makes tortillas we're telling it to bundle our up top Jia's so go ahead and look into the app up roots on the root folder for outdoor changes and put it into the distribution folder so the compiler file is gonna exist in the distribution folder over here and here this this line of code is gonna save us like if you have a mirror of a stack when when you try to run the watch web pack watch if you if your compiler stock at 95% and it doesn't Slyke compiled successfully just make sure to other background in don't mix or what that don't mix tortillas file and everything's gonna work fine for you so yeah this is like a little work around the era yeah just using your path and web packed for this sake of that so yeah this is very simple this one I'm doing it over here this our weapon don't make stop Jess and yeah everything is going to work fine now this all of this this is long project now is set up and where did you go now another end on tortillas all of our rendering reacts is going to go into the renderer yes I really recommend going ahead with this project start structure on any web development projects you're going from from now on just put it into the SRC and up Dorian's and setup like pretty much like this because it's a little bit more user friendly and if you just deployed your code into anybody else is gonna understand it right out of the box because it's very easy and very straight forward to understand with this basic price enough talking now we for the Rio JavaScript if we try to type reacts or gsx code over you just gonna give you an error and it doesn't it won't come apart correctly so make sure to if you are a video studio code I don't know about the other killed editors so if you wanna just it occurred go into end of the the bottom bar over here this blue bar I'm gonna find the JavaScript the language we are using just go over there you or search for reacts and gonna find react javascript select test and yeah gonna turn into the react on in here and yeah that indicates that we are on the right path so now we can use react are right out of the box so free user reacts is actually very very simple and very basic so let me just show you a very simple example also another thing in the information into the outdoor days make sure to require the SRC renderer which is our file in here to make sure that it's going to be included into the up top yes and under the index dot HTML so this is going to be our our HTML file we can just make a very simple HTML I'm gonna use an HTML file board or palette but let me just take a title or free hats application and down here for using reacts I'm gonna you or the like a main element for holding all our react based elements so here I'm gonna just create a Deb and I give it some ID of the roots which represent our roots no yeah this is it it's very simple now is gonna work pretty much fine and then here also you can render or include script and make sure to require our a bajillion so here we are in the distribution make sure to get ahead in the distribution forward slash and go ahead and or since you our updates is going to be compiling there so I'm gonna just put up Jas and since that will ensure that we're gonna like you include our require the objects we're just gonna compile right now so now we need to compile a couple of things using let me just clear that using my pack so we're compiling you can use the if the normal what that commands but I don't really recommend that also under the package.json you can go ahead into the script and under this new your scripts so it's cool watch we're gonna run a watch for us so whenever we do a changes to our rendered odious or up top J's file and we we save that just gonna recompile everything from scratch for us automatically so we don't need to do anything manually anymore just run the scripts or run yeah around the scripts and everything's gonna be fine back to events so this coach what it tells just copy it just cross the environment note environment monitors were back J's watch and a lot of things but just try to copy that I don't know if you can see that but yeah you can find it on github as I've said or you can find it into my tutorials website I closed comms I'm gonna find a link description below that's gonna take him to the website or this particular tutorial pose you can just read through the written tutorial and you cannot find this for sure so just search there you're gonna find this command just copy and put into your script tag and yeah you are ready to go now we can run this OPM watch so too like compile or files compiled the rendered audience to by the audience and make sure that everything is going to work fine let me just say that because yeah I've done some changes over here no I'm good in the index.html all we need is just to use the roof file over here and everything is going to look fine or because you're gonna just require that a little window doc genius and then from from now on we're gonna work on it from that yes now it's composed successfully as you can see build successful compiled successfully in whatever milliseconds it says and you can see up the genius has been created successfully us under the distribution folder now if we're going to Taj is you can render anything so first things first let me import the react so it won't react from what users can see here yes or es6 syntax or es2015 syntax from react and also i'm going to import react dom so react down from reacts here i'm pouring everything and this all you needs to import for react to work now we need to let react to like tell us to render somewhere on our vacation so for that we need to get power like roots elements over here under the index dot HTML so we can use native javascript students so let's go ahead and say word equals document dot get element by ID i'm gonna pass in lose my deep since we have just assigned the route ID for our elements over there now we've got the alert element we can render that using the react Dom don't render it is like render method it you give it the elements you want to render we're gonna talk about a little bit and where you want to render it so we're gonna relate them to the roots and here you give it the elements you want to render which is like a react component so the react components just gonna give this class I'm gonna talk about this a little bit more more like advanced thing more in deep or in depth for the class in the components and everything about relaxed just for now you're just gonna do tense so just bear with me even though you don't understand that we're gonna talk about it more in advanced way in the next video tutorials from this series so just bear that in your mind so let's react up components construct your props super and props again and the render method which actually going to reach your very simple HTML elements I'm just gonna give it a div and into that there is hello word so just like that everything is going to work fine let me just semicolon at the end and yeah let's go see you got an error so we'll just to close that test yep so you need to make this an upper case copy this I'm putting in there anyway all ready to go so just compile you know everything gonna work fine so you can see compiled successfully now we can just go ahead and save this as well and try to open that on a browser so open in default browser so we're just gonna take us into the debug browser and yep you've got a reacts application over here so if you can't just take a walk into the console dot log with gods require isms and then defined into the index dot HTML so as you can see we've got an arrow that's the require isn't defined so since we are using acquiring here what we need now is to change so if you want to get required you need to use some kind of like an extension to make required to find into the index.html another workaround in this code you can use the native JavaScript code just calling the SRC under here and just make sure to include the up top J yes and everything gonna work fine so just ctrl R yeah as you can see roots is not defined so let's see and also got another one because we haven't defined it so let me just say let's and equality roots I didn't do clients at all and also the other problem that we have got over here is that we need to render everything up to the Dom layout if you know what is the Dom so the Dom need to be really Oded and create in their own browser so then we keep depend here we are with what actually doing is rendering to the Dom which means appending a new elements into the Dom which means that the Dom needs to be loaded in order to append into it so we just added and like add an event listener for that when the Dom is content is Lee odden so we're just gonna render into the dump a simple stuff so always make sure to check for the Dom constantly noted then window into it so let's just impose that enough good control save and like open in default browser again we should like also only HTML so make sure to use if you're not wondering opening the browser here I'm using unlike Visual Studio code extension boom yeah awesome so we've got here hello world and it's working as you can see we are rendering it from the hello world from from actual JavaScript and we are so this is symbols that we are rendered our text when the next video we are not just gonna render the text okay I'm gonna go in more advanced topics and more drags examples of states and properties and all those kind of things so yeah just stay tuned I will catch you guys in the next video tutorial