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">© 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.