React 2021 Up and Running - Episode 1

okay so this is a brand new series on react in 2021 now i did a series a couple of years ago about react that series i is still completely valid there's nothing wrong with that series it's just over the last couple of years since i made that there's been a move away from using class-based components in react to using simpler function-based stateless components so i'm going to rewrite this series recreate this series talking about using stateless functional components using the new hooks and the components api using more es6 style syntax so that's what this series is about i'm going to be a whole bunch of videos talking about the latest way the latest best practices in building react apps so let's get started react itself as it says on the home page here a javascript library for building user interfaces so we've got two main scripts that you're going to get with react there's the react script which builds a virtual dom basically an object that describes all the user interface components that you're going to have in your app there's a second script called react dom which will take that virtual dom that object in javascript and convert it into actual html components on your page so we're working with these two parts and they go hand in hand when people talk about react they're generally talking about these two scripts these two main parts of the library now react native is using this core react library the core react script but instead of react dom it's got another react native script which will take the virtual dom and turn it into native components for ios and for android so that's a whole other topic we're talking about in the browser rendering so with react now you can take react and we can build a project i can have a web page and just add the scripts link to the scripts and use some of the react commands but that's a bit of a waste if you're going to learn react it's better to build a react project and approach your whole project in the way that react intended so that's what we're going to do here now i'm going to use a tool in here so i'm in my folder it's an empty project i'm going to use a tool called create react app and this is pretty standard for any react project create react app it's a node module and i'm going to use npx to run it without installing this globally without installing this on my computer npx will download and run this package and it will create my react application for me and call it this so this is the folder that's going to get created and inside that's going to be everything that i need so that's going to take a little bit of time while it does that i'm going to jump back over here to the browser and we can see there's a website that talks about create react app if all you want to know about it is i use npm create react app and then the name of my project that's okay you can get quite far in react and building your react projects if that's the only thing that you know about it that's fine what create react app does is it gives us the react scripts it gives us the that is the react and react dom those scripts it also gives us another package called react scripts which will help us running a development version of our project running the production build creating the production build of our project it gives us webpack it gives us battle it gives us yarn a whole bunch of tools and jest for testing all these tools come with create react app so in here it's installing all of this stuff if i open up this folder we can see that it's building a whole bunch of things there's a ton of stuff going into node modules the source this is the folder where we're going to find our scripts and i open up package.json you can see this is my app dependencies here we go so react react dom those are those two core scripts react scripts the ones for building our project and the jest stuff here as well now for those react scripts we've got right here react scripts the four things that it's going to give us start this is our development server so if i want to run my project in the browser which we're going to do in just a second this is the command to use build is going to create the production version we're then going to have to use another server to launch it test to use jess to run tests on your script so you can build those and i'll talk about those in a future video i'll give you one little demo of that but we'll talk about it more in the future and eject this is a command that if you're just starting with react just avoid it don't bother using it what it does is it removes all of this extra tooling so you're losing all the default things that webpack and battle are going to give you so that you can create your own build process for your project but chances are you're not going to need to do that you're not going to come up with a project that is so unique that has such unique requirements that you need to get rid of all of the work that's gone into building the default webpack build so we have these and in my source folder this is where you're going to find all the scripts and there's one in here that they give by default called app.test.js so anything with a dot test.js this is going to be one of those tests and if i open it up to take a look we can see inside of here what it's doing is it's bringing in our app component so this one right here and it's going to run a test it's going to try to render that app component it's going to search for this text learn react somewhere on the page and then it does a test expecting that thing that link element with this text to be somewhere in the document so if i run that right now go back to package.json we can see if i do run this script it's going to search for and be ready to run my tests by default yarn is used for building the create react app inside of here this create react app package this is using yarn by default if you don't want to use yarn i mean it's very very similar to npm i have a video on yarn if you want to get started learning that it still uses the npm packages it still uses your node modules folder it still has the commands for installing things just like npm does it's just a slightly different approach and it does a few things that make it a little bit more efficient so if you want to use that you get yarn by default and it means when you run create react app like we did here all of these helpful instructions that you will see like yarn test yarn eject yarn start it says yarn if you were going to build a project and you didn't want to use yarn you absolutely wanted to stick with the npm commands for whatever reason just personal preference whatever you can do this npx create react app so what same as we did before and you know my other project my other app whatever it is you can add the flag here at the end use npm if you do that the only real visual difference is you're not going to have this yarn.lock file you'll have a package.json.log file and all of these instructions are going to give you the npm versions of these commands that's really the only difference so i'm going to stick with yarn for these this series of videos and so we're going to jump into our folder here my app and i'm going to show you those tests so app.test.js is inside of here so i'm going to run yarn test see what i get okay so it's running that script now it's ready and waiting and we're just going to do this one right here press a to run all tests by doing that it's going to search for anything that has this naming convention so a and it's running app.test.js and it passed it did render the learn react link okay so it ran that one test and passed it in a future video i'll talk a little bit more about testing and i'll show you how to write your own tests and put that all together so you can run these ctrl c exits out of the testing and we're going to do this one next so the start command yarn start or if you've got npm npm run start does the same thing this is building the development version of our react project so this is again i haven't touched any of the code this is just what we're getting right out of the box with create react app port 3000 this is the development version and so this is what we get this actually is if we look in the source folder this is where our main project sits public has sort of static files there is an index.html file inside of here let me shrink this down a little bit inside the index.html file there's a bunch of stuff in the head a bunch of comments talking about the fact that this is just a template right here actually it's the template this is used as sort of the container where everything is going to be dumped inside by webpack it's going to put in the links to the scripts it's going to put in the links to the css and all that kind of stuff right here we have an element a div with the id root this is where everything is going to be placed so outside of the public into the source folder index.js this is our starting script if we open that up here we have react react dom those two scripts are being imported into our main javascript file our index.css file this is bringing in some css and app is app.js it's our component right here downside down inside the main part of the script right here reactdom.render so we're using the react-dom script to build the html so building the dom based on whatever the virtual dom is whatever the javascript object that defines my page whatever that is so right here the react strict mode just tells it that all the scripts that i'm going to be writing inside of here have to adhere to the javascript strict mode it's like if you wrote the use script up at the top of your javascript files app is the only part the only component that we're actually doing anything with so here's that getelementbyid root that is the second parameter for render this is where it's going to place our app component if i jump over to app inside of here you can see it's importing an svg file and a css file this again is being used by webpack this variable logo right here is going to be the url for that image and the reason we do the import like this is so that webpack knows after it's done the production build or after does the development build it needs to know where these files are located and that's what this is this is the path to that image after it's been compiled by webpack so on our page we've got a div there's a header element there's an image with a css class name app logo there's a paragraph an anchor tag with some text learn react and this was the text that our test found it said yeah yeah okay there was a case insensitive version of learned react somewhere on the page great it passed that test back to the browser so here's that text text here's the anchor and the css is making our svg image rotate okay so we've got all that now one other thing that i want to show you that is going to be very useful to you if i look inside of here if i inspect this normally we have elements there's also a couple of things down here at the bottom components and profiler components i want to show you that one inside of here this is the react dev tools there's a plugin for chrome and right here this is what it is i've got this link down in the description for you so you can get this and install it in your browser what it lets you do is when you're looking at the development version of your site you can actually see all the components that you've built and you look at their properties and you can see all the different bits and pieces that make up your page it tells you where this is located so index.js on line 9 that is where app is being rendered jump back in here index.js line 9. sure enough there's the app component so we have this being created or being read by the react dev tools that we've installed as that plug-in okay so we have app which is loading this and we've got our version right here being rendered if i go back to the elements this is the development version now one of the differences between the development version and the production version if i look inside the head i've got all the stuff that was in that original file like there's a lot of comments inside of here i've got two style tags this is one of the differences between production and development versions the development versions don't do anything to try and compress or minimize anything they're just okay you have all this content i'm just going to dump it onto the page the reason i have two style tags is index.js is bringing in one css file app.js is bringing in another css file so those two css files are actually being dumped as the contents for these style tags so this one has the app.css or sorry the index.css and this has got the app.css they're just being dumped into the page the production build let's take a look at that one so inside of here let's go back to our package.json file to see the command right here this command build this is the one that's going to create the production version of our site and it's actually going to create a brand new folder up here called build and inside of that is going to be the compressed optimized version of our site so i need to control c to stop this running i'm back out of the production build and we will just say yarn build this is the production and right here in the instructions it tells you you can run yarn build i'll do that now it's going to create the build folder and our build version of our site now i don't have this one rendering automatically in the browser for me and if i open this up a little bit more okay so the build folder is ready to be deployed they recommend serv so you can do an npm global install of serv to have that on your computer you can install it as a dev dependency here if you want but we can do the same thing we did with create react app which is use the npx command we can say npx serve this is the thing that i want to download and run and the source is going to be that build folder so this is what we're going to run this but with npx in front of it now you might be thinking i'm using vs tool vs code why don't i use the built-in live server from the extension that i've got very popular extension for vs code is the live server and we could do that we can come over to build and find our index.html file you can see everything from the public folder got copied into here and we have the static folder here's the javascript files here's the css files all these things compressed and minimized for us so i could go to the index.html we can see here it's compressed there's no extra white space in here if i open this with live server so let's do that all right it doesn't seem to be loading properly everything's white i've got a whole bunch of errors take a look at these errors a lot of 404 errors hey i don't know where to find those javascript files i don't know where to find the manifest i don't know where to find a css so it doesn't understand where everything is and that's only because live server uses my project folder as the starting point so it's using that slash my app slash build as the root if we look here that's what is in the path i can if i want i could reopen the build folder itself as the project folder inside of vs code and then everything would be fine it would run but i don't want to bother doing that so i'm just going to shut down that server this command it's just quick and easy it's one line to run and it does use build as the root of that web server so there we go i ran it localhost 5000 and the route will be that build folder so i can do command click or it does copy to the clipboard so you can do copy and paste or just paste it it's copied for you and here we have localhost 5000 and if i inspect this we open up the elements inside the head we can see here we go so here's the link to my css file as opposed to the multiple style tags with the css being injected in there so we get a lot of compression things are optimized to run fast now those dev tools that we were using before the components we're not going to get the react components here what we're getting is sort of the finished html we no longer have the tie in with that we did here with the development version so components work great if you're doing the build that we had here where's my package.json so if i'm doing the start command the dev tools work great here the plugin in chrome the build that's kind of like your finished deployed version that's the one that you're going to actually put up on the web somewhere github pages or wherever it is that you're hosting it that's where you're going to place that one okay so we've got create react app is the tool by default it uses yarn which very minor difference for you it just means you're typing yarn and these commands and i can shut that one down as well um use npm if you really want to stick with npm just add that dash dash use dash npm to the end of your create react app command when you've got your production build you're no longer using the dev tools but you're using serv to actually push it up into the browser okay so that's your general introduction to react in the next video we're going to get into actually looking at these components and figuring out how to write stuff like this and getting into app.js and how all these bits and pieces fit together and how we can update it all right so hope that helps you get started and the new video will be coming out shortly and as always thanks for watching

Channel: Steve Griffith - Prof3ssorSt3v3

Views: 9,532

Keywords: MAD9022, web development, JavaScript, JS, CSS, HTML, steve flix, steveflix, web dev, professor Steve, prof3ssorSt3v3, 100daysofcode, MAD9135, React, React JS, yarn, npm, npm serve, React 2021, react tutorial, how to use React, react production build, react development build, react dev tools, get started with react, intro to react, introduction to react, react version 17, react hooks, react and jest, jest, using jest with react, context api, react best practices

Id: IkkzjbdIOBM

Length: 21min 32sec (1292 seconds)

Published: Tue Sep 28 2021