How to install and use semantic-ui-react

node.js reactjs semantic-ui
cdaiga picture cdaiga · Nov 25, 2016 · Viewed 14.7k times · Source

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.

Answer

Donskikh Andrei picture Donskikh Andrei · Oct 17, 2017

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';

Related questions

Reactjs - Form input validation

My Contact page form is as follows, <form name="contactform" onSubmit={this.contactSubmit.bind(this)}> <div className="col-md-6"> <fieldset> <input ref="name" type="text" size="30" placeholder="Name"/> <br/> <input …

Read More
Error message "error:0308010C:digital envelope routines::unsupported"

I created the default IntelliJ IDEA React project and got this: Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:130:10) at module.exports (/Users/user/Programming Documents/WebServer/untitled/node_…

Read More
How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?

I am new to the whole nodejs/reactjs world so apologies if my question sounds silly. So I am playing around with reactabular.js. Whenever I do a npm start it always runs on localhost:8080. How do I change it …

Read More