Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.6 hours
Building a react website with a pre built template 400x277
  • Overview
  • Transcript

3.1 Starting to Work With Our Template

In this lesson, I'll show you how to get started working with your template. You will clean out a lot of the boilerplate code and start to bring over the template's dependent files—such as images, CSS, and JavaScript files—into your project.

3.1 Starting to Work With Our Template

So now let's take a couple of minutes to actually clean up all the boiler plate code and everything that comes along with the default template. So we can kinda get ready for it to ingest our template into our React application. So it's actually pretty simple, we're gonna start by cleaning everything out here. So I like to start in my public directory, and I'm not gonna be using the fav icon and I'm not gonna be using these logos. I'm not gonna be using the manifest file or the robots file. So, all of these things, you can technically leave them in there but we're really not gonna be using them or really even talking about them very much. So I'm simply gonna delete all of them, so now we can go into our source file or our source directory. And we're not gonna be using any of the styles that are in here in the app.css file, so I'm gonna delete them. Now I'm gonna leave the file there because you can technically use this to tweak things and to add your own styles in above and beyond the Bootstrap template kind of CSS that's gonna come along with our template. But for our purposes here, I'm gonna get rid of it cuz I'm not gonna use it. In app.js, I'm really gonna get rid of everything inside of this return statement, as well as a reference to this logo, I'm not gonna be using that logo, so I don't wanna keep it. We're gonna get some squigglies here because there needs to be something inside of our return statement here some JSX. So I'm simply gonna put in here a paragraph and just say something like Hello World or whatever you want to put in there will be fine. Just as a bit of a placeholder, we're not gonna be doing any testing here. We're going to save that for another course, so let's go ahead and delete that, index.css, we can leave that, that will be fine, index.js, we'll leave this in here, that will be fine as well. This is what's going to inject our actual React application, our main component app into our document by using an element by the name of id. So that's important to leave in there, once again, this logo I'm not gonna be using that. So go ahead and delete that as well, get ignore we'll leave that, package.json we'll leave that, index.README, not gonna need that so let's delete that as well. You can obviously add in your own for documentation purposes, before what we're trying to do here, that shouldn't be a big deal. So now that we've removed all of that there's really not a whole lot running here anymore. So if I come back over to my application, you're gonna see I'm just seeing Hello World, which is good. So we're kind of down to the absolute bare bones, we can start to bring our templates into our application. So the basic starting point is to bring over all of the static files, all of your JavaScript and CSS and images and all that sorta good stuff, and bring all of that into our application. Which you can see right here, this is where we're going to have all of our files that we need to bring over. And here is the directory that's gonna have our project in it, which is going to be the destination of a lot of these files. So, what I wanna do is I wanna copy over those static files, those static files are gonna live in our public directory of our application. And which ones do we wanna bring over? Well, what we wanna do is we wanna bring over everything in the vendor directory. So that's gonna be our jQuery Font Awesome and bootstrap. So that's gonna be important, as well as everything in the JavaScript directory, the image directory, and the CSS directory. So let's go ahead and drag those over here into our public directory of our project, and that will kinda get us started here. So now what I wanna do is I want to start to modify the Index.html file that's in here to bring in all of those things. So, just as a reference, a lot of times what I like to do is, I like to go into the main template, and I like to start with index.html, so let's go ahead and open this up as well in Visual Studio Code. So, even though this isn't technically part of my workspace, part of my project, I can still open it up in here alongside and I can kinda see what's going on. So really, what I wanna do now is I want to bring in a lot of these references as this is gonna be very important for our project. So I'm gonna start with all of these CSS references that are at the top of the file in the head section of the HTML. So let's go ahead and copy those, and we'll come over here. Now, I'm not gonna need a lot of the things that are already in here. So I'm simply going to remove some of this I'm not gonna have the manifest I don't have this logo anymore, but everything else probably can stay for now you can really start to change things if you want, that will be fine. And I accidentally deleted the closing tag here, so we're gonna maybe change our title here. So let me just call this converting HTML template, something like that, and we'll come in here and we'll drop these CSS references into the bottom of our head. So now I have references to Bootstrap, as well as any sort of custom fonts that were used through Font Awesome and the custom styles that were in here in that minified CSS, so that's good. So we have that, that's good, that's a good start anyway, but we cannot also forget all the JavaScript references that typically go down at the bottom of this template. So let's get rid of this comment in here so I need to bring that in as well. So let's go back over to the template that we're converting, and we'll go to the bottom of the body and here we go. We have bootstrap JavaScript references as well as any sort of custom scripts for this template, so let's copy those. And then we'll come back over here and we'll stick them at the bottom of our body just like that, and we can go ahead and save those changes. And now that we've saved it and made all of our changes, if we come back over here you're gonna see nothing's really changed. But if you do pay close attention you'll see that the font here is slightly different than it used to be. And that's simply because we brought in these CSS and JavaScript files from Bootstrap, and it's gonna make a couple little changes. So, at this point we've done pretty good, we've kind of started the process but we really don't have any of the main information. And so that's kinda the next part that I wanna bring in, and I wanna bring in kinda the meat of the template. And I'm just gonna dump it all into our main component, which is our app.cs. So instead of this Hello World, I wanna actually show something. So the final thing that I wanna do here is I basically want to come over, and I want to grab all of this main content in here. Now, I know it's a lot and there's a lot of different sections in here, we have navigation. We have footers, we have headers and all that kinda stuff, and it's kinda a mess. But I'm simply gonna copy that and I'm gonna bring it over into our app.js, and I wanna replace what's in here this paragraph that says Hello World and I'd want to drop this in here. Now if you have Linters for your JavaScript installed, there's a good chance that it's not gonna like some In this and that's okay. As well as in JSX, it typically does not like comments, so I'm gonna have to get rid of those. Now you're also gonna see some other stuff in here that it's gonna get confused in places. One of the other problems when you start converting things this way is that, well, there's multiple things. The first thing is that in JSX, you have to have one root element, and we're gonna get to that in just a second. The other thing that JSX doesn't like is if you have elements that are not closed. So by default, HTML is kind of lenient when it comes to some of the non closed elements, and here's one actually right here, it's gonna complain about that, because it doesn't have a closing tag. So we're gonna have to go through and clean some of that stuff up by just making some of these things self closing. But that's not really a big deal, we'll fix all of that, so let's kinda scroll back up here. Let's get rid of all of these comments, As they are today and here's another HR. Let's go ahead and self close that one, and let's keep looking here, I think that's okay for now. There might be one that I've missed, we'll come back through. But the other issue that we're having right now is that we don't have a single closing or we don't have a single element in here, and that's what a lot of these complaints are. So you're gonna see here that elements must be wrapped in an enclosing tag. So I can't just throw them all out there and actually when you get these errors, it's actually pretty useful, it's saying did you want to use a JSX fragment? And actually, that's exactly what I wanna do in the fragments. And the newer versions of React, are simply these kind of empty element, open and close tags, which is actually kind of cool. So, I'm gonna come up here to the first line in my return, and I'm gonna do this kinda open closed thing here, like that. That's gonna be my first tag, that's gonna be my root. And then I'm gonna come down here to the bottom, just past footer and I'm gonna put a closing fragment tag just like that. So, this is saying that it's not corresponding to something which means that something else in here. There's an HR another horizontal line here that doesn't have a closing tag, come back through here and here's another one. A lot of times when you're doing these conversions like this, it's gonna get a little dicey at times to find all of these. But a lot of times, like I said, when you first dump that main block of code into your main component, those two issues are gonna well three issues are gonna be the big ones. And you can only have a single root element, so that's why we stuck in the fragment just like this. JSX does not like unclosed tags, so if you put in any sort of element that does not have either a closing tag or kind of like the self closing slash, at the end of it, it's not gonna like that. And I think for our purposes here, we pretty much have it. So let's go ahead and save this and hopefully once we come back over here, yes. So, we also have in here you can see the style prop expects a mapping from style properties to values, not a string. So, at this point we've basically brought everything in where it needs to be, but the problem here is this guy right here. So you can use inline styles in React JSX, but it does take a little bit of massaging. So we're gonna come back to that in the next lesson, but for the most part, I think we're in good shape right now. We have all of our tags closing, we have our fragment setup so that we have a single element that's being returned. So I think for the most part here, we're pretty good other than this is a big mess. We're gonna need to clean this up and kind of create components out of all of this, but I think we're in pretty good shape for now. So in the next lesson, we're gonna come back and address and talk a little bit about this style tag and how we can get around this problem here.

Back to the top