React Skeleton Screen Tutorial #1 - Intro & Setup

Key Takeaways

all right then gang so in this tutorial series i'm going to show you how to create skeleton screens with react [Music] now just really quickly before we start the tutorial for those of you who want to support the channel and join the gang officially you can do by clicking that join button right here it's just 99 cents or pence per month and you get these cool little ninja loyalty badges next to your name in the comments down below when you leave a comment you can also join by clicking the button right beneath the video if you're watching one now which i'm guessing you are it does exactly the same thing all right so now that's at the way let's get on with the tutorial so a lot of modern websites handle data fetching in the browser instead of on the server now this is good because it means that a user doesn't have to sit around twiddling their thumbs for ages waiting for a web page to arrive back from the server but they then do have to wait for any data to be fetched from the browser once it does arrive now that data could be blog posts or comments or videos or something else entirely and typically while this data fetching goes on would show the user a loader or a spinner or use some other intuitive way to tell the user that data is hopefully on the way now one such way that a lot of popular websites like facebook and linkedin use is to create what's known as a skeleton loading screen that looks something like this so we basically show a dummy skeleton layout of the website to represent content which will be here soon which we're trying to load so on the left if i just refresh again we have skeleton articles and on the right a skeleton profile so these kind of let the user know what kind of content is being loaded and they're a little bit more fun and interesting than three dots going around and round and round in an endless loop so in this series i'm going to show you how to implement these kinds of skeleton screens in a react application and then we'll make them in such a way that's going to be really easy to reuse so you can build on it yourself to create more complex skeleton layouts as well now it probably goes without saying but this is not a beginner's react course i would expect you already to know the foundations of react and how to create components and all that kind of jazz if you need to learn react from the start i've got a full react tutorial here on youtube so the link to that is going to be down below and we will also be using react hooks and if you want to learn about those you can check out my react context and hooked playlist as well the link to this is also going to be down below okay then so the first thing i want to do is create this new react app so to do that i'm going to say npx create hyphen react hyphen app and i'm going to call this react hyphen skeleton hyphen screens and press enter to create the app [Music] and then once that's created i'm going to cd into the new project directory react hyphen skeleton hyphen screens then i'm going to type code space full stop or period if you're american press enter and that's going to open up this project in vs code which is right here okay so let me just zoom in a little bit so we can see these files and i'm just going to basically make a very simple react application to begin with and take out some of the boilerplate code that we don't really need so first of all let me open up the source folder and i'm going to get rid of app.css we don't want that we're going to keep the root component app.js we don't need the test file and i'm going to keep this for most of my css or some of the base styles at least the logo we don't need and the service worker and setup tests we don't need any of that and then if we go into index.js we want to get rid of this because we just deleted that and this stuff at the bottom we don't need that anymore so save that file and then if we go into app.js the root component we deleted the logo and the app.css so let's delete those imports as well and then also i'm just gonna redo this whole component i think so let me get rid of most of the stuff in here i'm gonna keep the surrounding div with the class name of app but inside that i'm going to create first of all a header and inside that header i'm just going to do an h1 which will say react skeletons and then underneath the header i'm going to do a div and this is going to have a class name equal to content just so we can style this and put it in some kind of central column on the page now right here i'm going to put in in a second a couple of different components one for the articles on the left and one for the profile on the right now before i do that let me just apply some styles to the header so let's go into index.css to do that so right here let me come down and say header and i'm going to give this a background color and that background is going to be hash 1e 6 5 double f and that's kind of like a blue color and then i'm going to give this some padding as well of 10 pixels also i'll style the h1 inside the header so header h1 and then i'm going to say the color of this is going to be white and then the max width is going to be 1200 pixels and then the margin is gonna be zero top and bottom auto left and right to put it in a central column okay so now we have those styles sorted and i want to go back to the app.js and save this i'm gonna open up a terminal and i'm gonna try running this by saying npm start and that's opened up in a browser over here so that's what it looks like so far we still need to add some content to this and to do that i'm going to create a new folder over here called components and inside that create two components the first one is going to be for the articles so we'll call that articles.js and the second one is going to be for the user profile so we'll call that user.js all right then so let's do the articles one first of all i'm basically just going to import react from react and then i'm going to create a new functional component so const articles is equal to a function and then inside that i'm just going to return a simple template and that template is just going to be a div with a class name and that is going to be equal to articles and then inside that i'm gonna do an h2 which just says articles then we need to export that so export default articles at the bottom okay so let me now copy all of this and paste it into user because that's going to be very similar but where we have articles i'm going to replace that with user and the class is also going to be use as well and in fact we'll say user profile right here or user details at least okay so now we want to nest both of those components inside the root component of here inside the contents so let me say right here articles first of all that's going to be on the left and then on the right is going to be the user component and that should have auto imported both of those at the top cool okay so if we take a look at this in the browser so far let me just move this over here and we can see articles and user details now i want these to be displayed left to right so articles are on the left and the user details are on the right so we're just going to use a little bit of css grid to do that so let's go back over here and open up the css file which is index.css and then down here i'm going to first of all style the h2s which are both of these titles right here so h2 and then we're going to give each one a padding hyphen bottom of around 10 pixels and also a border bottom of one pixel solid and very light gray ee and then after that i want to style up this content thing right here so we display as a grid and this is on the left and this is on the right so let's do that dot contents and we're going to say the width is 100 but also apply a max width as well of 1200 pixels and then a margin of zero top and bottom auto left and right that puts it into a central column on the page then padding will give it a bit of padding 20 pixels in all directions we want to display this as grid by the way if you want to learn about css grid i've got a whole tutorial playlist on that on this very channel i'll leave the link down below and then we need to define the template columns of the grid so grid hyphen template hyphen columns that's going to be two fractions on the left and then one fraction on the right that basically means that the content on the left is going to be twice as big as the content on the right you can think of this as three columns in equal width this takes up two of them on the left this takes up one of them and that means that automatically the first element the articles will take up those two fractions and this will take up the one fraction on the right i also want to apply a grid gap between those so i'm going to say the gap is 100 pixels all right so if we save this now hopefully we should see yep the user details on the right and the articles are over here on the left so that is the base project setup and in the next video we can fetch the data which we're ultimately going to be showing over here and over here