ReactとExpressでセマンティックUIを使用するにはどうすればよいですか？

Question

私はSemantic/React/Expressを初めて利用しています。 Semantic in Reactにスタイルシートを含めるにはどうすればよいですか？セマンティックCSS/JavaScriptファイルに直接リンクするHTMLファイルが必要ですか？今、私はhtmlファイルを使用していません。

私のメインページ、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

あなたの反応コンポーネントにclassの代わりにclassNameを使用してください。

そして、クラスを使用するには、通常、あなたのhtmlファイル内のcssファイルをインポートします。あなたの.cssファイルがインポートに存在する場合、Reactは最終的にあなたのコードをHTMLとしてレンダリングするだけで、通常はクラスが適用されます。 HTMLファイルに追加するだけでCSSをインポートするには

：

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

Answer 2

NPMでパッケージをインストールして、グッと構築：

npm install semantic-ui --save

cd semantic/

gulp build

次に、あなたのdashboard.jsにmin.cssファイルをインポートすることができます

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

はあなたのJSXにclassName識別子ではなくclassを使用することを忘れないでください。 React docs：

JSXはJavaScriptであるため、classやforなどの識別子はXML属性名として使用しないでください。代わりに、React DOMコンポーネントはclassNameとhtmlForのようなDOMプロパティ名をそれぞれ必要とします。