0

I've been learning ReactJS for the past couple of days and have been trying to build a website using semantic-ui-react in ReactJS. I understand there are components that one can use now but I am stuck on what to do in a scenario such as the creation of a footer... typically, in my raw HTML, I would have the semantic.min.css file included and at the bottom:

    <div class="ui inverted pink vertical footer segment">
        <div class="ui center aligned container">
            <h4 class="ui inverted header">&copy; Copyright 2017 | All rights reserved | Blahhh</h4>
            <a href="https://www.facebook.com/"><i class="facebook square icon big"></i></a>
            <a href="https://twitter.com/"><i class="twitter square icon big"></i></a>
            <a href="https://www.linkedin.com/company/c"><i class="linkedin square icon big"></i></a>
        </div>
    </div>

Now I want to translate this into semantic-ui-react. Footer is a class not a component in react by default so there's no component for it... Which I assume means I have to make my own component and basically write the code above. My problem now is that I don't know how to make it render as if I was using regular old semantic.min.css. I read somewhere to download the css file and include it, but one, I don't know where to (MyCustomFooterComponent or index.html), and in doing that, am I not increasing by load times on my website. Would this mean that everywhere there's a footer, just for one small section of custom code, the entire CSS file is going to be loaded?

Also, after building, would there be a double-import scenario from my addition of the Semantic CSS and semantic-ui-react's CSS?

Sorry for the long question but I'm new to this and I like to find out what I can before making a terrible mistake.

niiapa
  • 78
  • 1
  • 8

1 Answers1

1

If you are using react-semantic-ui then you already include 'the old semantic-ui.min.css' already. See here.

Hence, create a component and put those code in render(), change 'class' to 'className' and then use it.

Daniel Tran
  • 5,531
  • 9
  • 22
  • Thank you for the quick reply. But what do I import in my `MyCustomFooterComponent.js` file then? How does it know to reference that? Because for all other semantic components, the syntax goes `import { Button } from 'semantic-ui-react'` to use the button etc... – niiapa Jul 06 '17 at 02:04
  • If you are using `create-react-app` then in your `MyCustomFooterComponent` you export that Component `export default MyCustomFooterComponent;` Then you can import from somewhere else `import MyCustomFooterComponent from './MyCustomFooterComponent.js'` – Daniel Tran Jul 06 '17 at 02:09
  • I think I've misunderstood what to do. Including `semantic--ui-react` does not automatically include the CSS. I have to manually include it and then the classNames would work? That's not a double inclusion? First from `semantic-ui-react` and then from `semantic-ui-css`? – niiapa Jul 06 '17 at 02:15
  • > That's not a double inclusion? Nope, Semantic UI React doesn't include any CSS now, it only generates valid markup. – Oleksandr Fediashov Jul 09 '17 at 11:16
  • @AlexanderFedyashov I meant if he followed the guide line in the link provided, then he had already include 'the old semantic-ui.min.css'. – Daniel Tran Jul 10 '17 at 02:51