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;

Erick · Accepted Answer · 2016-09-15 17:05:29Z

1

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

answered Sep 15, 2016 at 17:05

Erick

2,6186 gold badges31 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lewis · Accepted Answer · 2016-09-15 17:01:03Z

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.

answered Sep 15, 2016 at 17:01

Lewis

1531 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

How do I use Semantic UI with React and Express?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related