If I had over to the app here and I go to the design you can see that we have a logo here and a couple pages in we also have a logo on this screen.

So we're going to make a component that we can reuse throughout our app in different places where we need it.

So let's get started with that, let's go in to our text editor and let's create a component in our components directory and call it logo.js. Once you have that set up let's go ahead and write out our default code for the react component. You can do this as a functional component or a class component whatever you would like to do. I'll just use a class Component.

And I'm going to just call it class logo extends Component. Now we don't even need the component lifecycle methods in here but I'm still going to set it up this way. And then I'll say export default Logo. Now in this class I want to have a render function and I want to simply return a div and let's give this div a class name of logo-main.

logo.js

import React, { Component } from 'react';

class Logo extends Component {
  render() {
    return (
      <div className="logo-main">

      </div>
    )
  }
}

export default Logo;

Now I'm going to head over to my main.scss and put in that tag so logo main and just leave it like that, we'll come back to it when we need it.

main.scss

.logo-main {

}

So in logo.js let's put an image and for the source I want to put /assets/ds_circle_logo.png. Now let's close it off and OK.

logo.js

<div className="logo-main">
  <img src="/assets/ds_circle_logo.png"/>
</div>

So I did that pretty quick, but again we have built plenty of components. You should be able to do this with little or no hope at this point. But of course you're going to have to follow along to build exactly what we're building but that's why I'm going fast. So we can quickly get the material out so you can learn as quick as possible.

So what we're doing here, what I just did is I made a default component and our default React code our boilerplate and I threw in a div with a class logo-main and an image with the source of assets ds circle logo.png. Now I also put in this logo-main tag in our SCSS which we will come back to.

But if we try to run our app this isn't going to render because we haven't imported it into our app.js so let's go ahead and do that now. Let's import logo from './logo'; and lets replace it with our text let's just put a logo in here and let's save it.

app.js

import React, { Component } from 'react';
import Logo from './logo';

export default class App extends Component {
  render () {
    return {
      <div>
        <div>
          <Logo/>
        </div>
      </div>
    };
  }
}

Now if we go to the browser we're going to get an error or it's just not going to work. OK, so no error because all that happening is we're not able to receive the image. You'll see in the top left here we have this little tag here

and we can display something in there when there's no image by just saying alt is equal to let's put daily smarty ui image logo big.

logo.js

<div className="logo-main">
  <img alt="daily smarty ui image logo big" src="/assets/ds_circle_logo.png"/>
</div>

So basically what happens is it will display that text in here.

Now that's just a little bit of how image tags work in html, obviously this is JSX but it's html. So let's go ahead and actually get that image in. The reason we don't have it is because in our static assets we don't have any image and if a click on this read me in static assets README.md you'll notice it says put your assets here images and other standalone libraries that don't require npm, no npm support.

So we want to put our logo in here and that will be in the guidance below you'll see I have our logo here I dragged it from my desktop. I'm going to throw it in the assets folder and we have it here now so ds_circle_logo.png. Let's go ahead and close the read me as well.

So basically this will be referenced and it will load up when we reload our browser. So we have this big owl image.

And if you're not seeing this then it's likely that you named something wrong or the image might for some reason have a different name. Just make sure these assets and the circle logos match up. So just think of the root as static, you don't even have to mention that. Okay so thats loading in, we need to make it smaller. It's a good thing we typed out this class name tag because we can just go to our CSS here and do that really quickly.

So all we have to do is reference the image tag, so we can do that by doing this. We could just say image because it's within it this is really nice with Sass I really love this SCSS. So we can say image and we can put it width 170 pixels and a height of 170 pixels and that will give us what we want.

main.scss

.logo-main {
  img {
    width: 170px;
    height: 170px;
  }
}

So if you go back to the application you'll see that it's kind of too big. Let's see what the size is for that, so I think the size we need is 105 and I just got that from the design. I have access to inspect mode and I believe in the first screen here it will tell me the size, okay its 100 pixels by 100 pixels. Let's just put 105 I think there's a reason I was thinking 105.

I think because it would look a little smaller in our actual application than it does in the design and we wanted to be close to the design. You'll notice that it still looks smaller. I put 105 when I built this app.

So the next thing we need to do is get it centered using CSS grid. So let's go ahead and hop into that in the next guide and I'll catch you then.

So let's commit our code. Let's say

terminal

git add .
git commit -m "setup logo component and corresponding styles"

I'll catch you in the next guy, where we will talk about how we can center this on the screen.

Resource

Source code