7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 10Length: 1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Starting From Scratch

I think it's best we start from scratch so that you can get a feeling for how to add things to your project. So in this lesson, we'll create a new project and add the Bootstrap CSS framework.

2.1 Starting From Scratch

In the previous lesson, we set up our environment we installed the Gatsby CLI and then we created our first project. And we created that project using the Gatsby command, followed by new and then we gave it A project name. And that was it, we pressed Enter, and it started to create that project. And if you remember, it was downloading files from a repository on GitHub. It was using the default project template. Now the default template is great, it gives us a lot of things that we would want to use out of the box. However, I want to start completely over and I want to create a new project using a much more bare template, because this is going to give us the opportunity to learn how to add plugins to our project. And the overall architecture of how Gatsby works. So, let's once again use the Gatsby command followed by new and let's give this a different name. The name doesn't matter, you can give it whatever you want. I'm going to be not very original, and just call it Gatsby-project. But don't hit Enter yet. We want to specify the template and that is going to be a GitHub repository. So this is HTTPS, we want to specify github.com/gatsbyjs/gatsby-starter-hello-- world. And if you type this correctly then everything should work fine and it looks like that it is. Now there are many templates that we can use to create a project and at the end of this course, we will very briefly just look at the, well, they call it a template library. There's many to choose from. However the bear as I mentioned is going to give us a better understanding of Gatsby overall. And once our project is ready to go, we of course want to cd into that new directory, which for me is Gatsby-project. And then let's fire up our code editor and then let's call gatsby develop that is going to get our application up and running so that we can view it in the browser. In fact, we can go ahead and hop on over there and it's going to be the same URL so localhost port 8000 and we just have to wait for it to load. Now, you are going to see something very different from what we saw in the previous lesson. Remember we are using a different templates to create this project and that is very reflective here. All we have is just some text whereas in the previous lesson we ended with a project that had text but images and other stuff. I mean it looked a little bit more complete. Whereas here, this is all we have, but that's fine. This gives us a perfect place to get started learning Gatsby. So let's go to the Source folder, there's going to be a Pages folder and then inside of that, just a lonely little Index.js. And you can see that there's not really a whole lot of code here but you can see that we are importing React and then we are exporting a React component. Now, if you aren't familiar with React, I'm not going to say that you need to stop watching and then go learn React. Because the basics of it is very easy to pick up. Basically what we have are components and we build our user interface using these components. And in this particular case, this component is made up of a function that is returning what looks like HTML, but this is not HTML, this is actually XML. We are using XML inside of JavaScript. And so because this is XML, we do have to live in the world of XML and its rules. And that means that we can only have a single root elements. But other than that, we can add whatever markup that we want. So we're going to leave this div element here. But let's change this so that we have something like a span element. And then we could make this text bold if we wanted to do that. So first of all let's go back to the browser. Now notice that the text that I had highlighted is no longer highlighted. And that's because whenever we make a change within our source code, it is going to automatically make those changes in the browser. So most of the time, we don't have to actually manually refresh. There may be sometimes that we do however, it's just a matter of, do we see what we want on screen? Now, if we look at the source code we're going to see a whole lot more than just a div element with a span element. In fact, we don't even see that div element with a span element and that is because what we have inside of our React component is actually being loaded dynamically. So the actual source that's in the browser isn't going to help us much but if we inspect here, then we will see the markup that we expect. We have this div with an ID of __ might be three there, but Gatsby, this is the container for our application. And if we just keep drilling down, we're going to find our happy little div element that contains a span element that has some text there. So let's make this bolded and we could do that using style. And let's use some just normal CSS syntax. So we'll use the font-weight property, we will set that to bold. Let's save it and we get an error. So here's one of the things about and it's not necessarily Gatsby but when it comes to inline styles we really can't use just normal CSS syntax. Instead, what we want to do is use a JavaScript object that contains all of the CSS properties that we want to set. But since it is a JavaScript object, that means we have to use the camel cased versions of our CSS names. So instead of font-weight, we have to use the camel case fontWeight, and then the value of that is going to be bold. Now of course, if you are familiar with React, this is going to look very normal to you. If you aren't, however, this might be a little foreign. And that's because we have the ability to create these components that are a mixture of XML and JavaScript. Now we can look at the browser we have bolded text. And if we look at the markup, let's drop that down we can see that we have a style attribute, and the font-weight is set to bold. However, I want to use something a little bit more Ideal. And by ideal, I mean using some kind of CSS framework. So if we wanted to use bootstrap or tailwind or any of the other CSS frameworks, we can do that. Bootstrap is kind of the de facto standard so let's go ahead and use that. We will stop the process by just pressing Ctrl+C on our keyboard and let's install bootstrap, and let's save this. Now, we could also install JavaScript, and Popper, and all of that other stuff. But we're not going to really be using the JavaScript aspect of bootstrap. What I want to do is just pull in the CSS and we can use the classes available in our components. So while this is being done, let's go back to our code and let's import. We want bootstrap and then dist then css and then bootstrap, I think we can do .min.css. We'll see if that actually works or not. We will get an error if it doesn't work. And we'll go back to the command line and we will run Gatsby develop. And of course as with everything else in the world these days, behind the scenes, there is webpack being used that's going to handle all of this extra stuff. So it's going to pull in Bootstrap and make it available, so that we can use those classes instead of our components. So we can change this from an inline style to a CSS class and of course, since we are using React, we have to use the class name attribute instead of class. And then let's set this to text-danger. So instead of bolded text, we're going to have red text or at least we should. Now in this particular case, well it automatically updated for us anyway. So there we can see that our style completely changed. We aren't using the default browser style, instead the font is the bootstrap font. The text is now red, and we can better style our pages. So in the next lesson, we are going to start building a layout.

Back to the top