How to install and use semantic-ui-react

Question

I want to build a web client using react.js and semantic ui. There is a node package to use semantic-ui with react.js; semantic ui react. I have already installed this package on my computer following the instructions on react.semantic-ui.com/usage, but upon testing the with a simple webpage.

I think I have this issue because I failed to use this last instruction: import '.../semantic/dist/semantic.min.css';. The semantic folder has been generated in my project main folder, but the dist folder and the semantic.min.css have not been generated yet. Where and how should I use this?

NB: I also tried adding this <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link> to my index.html page and the page was style as expected. I don't want to use this option as I cannot change the them with it.

Solution 1

First - install css npm install semantic-ui-css --save
Then - import in at the index.js page (the very top level)
import 'semantic-ui-css/semantic.min.css';

Solution 2

First, use one of below package managers to install semantic UI react package.

For npm users:

npm install semantic-ui-react

For yarn users:

yarn add semantic-ui-react

Then add this import line to your index.js

import 'semantic-ui-css/semantic.min.css'

That's all.

Solution 3

For npm user:

npm i semantic-ui-react semantic-ui-css

Comments

[cdaiga]

I have succeeded to generate the semantic/dist/* files. I don't know yet how to import '.../semantic/dist/semantic.min.css' and where to import it.

[Flint]

semantic-ui-css is a package dependency of SUIR

[cdaiga]

How is your answer any way different from @DonskikhAndrei's?

[Rumit Patel]

Same as Donskikh Andrej's answer.

[challet]

From where does come "semantic-ui-css" ? There might be missing a npm install semantic-ui-css

[challet]

Though if you want a custom build (say a theme), you'd need to npm install semantic-ui and run the gulp build task (or add it to the CI) : semantic-ui.com/introduction/build-tools.html

[justin]

thanks. why does it have to import in the index.js page?

[Arif Dewi]

just to be included in the final bundle, and be available everywhere.

[Flint]

@challet from the dependency of SUIR. No need to install it twice.