How do I use Semantic UI with React and Express?

Question

I'm new to Semantic/React/Express. How do I include the stylesheet for Semantic in React? Do I need an html file that directly links to the Semantic css/JavaScript files? Right now, I'm not using any html files.

My main page, dashboard.jsx :

var React = require('react');
var Layout = require('./layout');

class Dashboard extends React.Component {
  render() {
    return (
      <Layout title={this.props.title}>
        <h1>{this.props.title}</h1>
        <div class="ui three item menu">
          <a class="active item">Editorials</a>
          <a class="item">Reviews</a>
          <a class="item">Upcoming Events</a>
        </div>
      </Layout>
    );
  }
}

Dashboard.propTypes = {
  title: React.PropTypes.string
};

module.exports = Dashboard;

Answer 1

Install the package with npm and build with gulp:

npm install semantic-ui --save

cd semantic/

gulp build

You can then import the min.css file into your dashboard.js :

import '../semantic/dist/semantic.min.css'

Remember to use the className identifier rather than class in your JSX. From the React docs:

Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.

Answer 2

Use className instead of class in your React components.

And to use the classes just import the css file normally in your html file. React only renders your code as HTML in the end, if your .css file exists in the imports normally the classes will be applied.

To import CSS just add to your html file:

<link rel="stylesheet" href="your_css_here.css">