リアクションとES6のインポートを持つセマンティックUI

Question

リアクションコンポーネント内にセマンティックUIとES6のインポートを組み込もうとしています。

私はGrun with Babel + Browserifyを使用しています。

私はすでにセマンティックUIをNPM経由でインストールしています。私はこのコードをコンパイルしようとすると、私が得る、しかし

import React from 'react' 
import $ from 'jquery' 
import dropdown from 'semantic-ui' 

class Container extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     value: null 
    } 
    } 

    componentDidMount() { 
    $('.ui.selection.dropdown').dropdown({ 
     dataType: 'jsonp', 
     apiSettings : { 
     onResponse: function(githubResponse) { 
      var 
      response = { 
       results : [] 
      } 
      ; 
      // translate github api response to work with dropdown 
      $.each(githubResponse.items, function(index, item) { 
      response.results.push({ 
       name: item.name, 
       value: item.id 
      }); 
      }); 
      return response; 
     }, 
     url: '//api.github.com/search/repositories?q={query}' 
     }, 
     onChange: (value) => { 
     this.setState({ 
      value 
     }); 
     } 
    }); 
    } 

    componentDidUpdate() { 
     $('.ui.dropdown').dropdown('refresh'); 
    } 

    render() { 
     return (
      <div> 
       <div> 
        <h2>Dropdown</h2> 
        <div className="ui fluid multiple search selection dropdown"> 
         <input type="hidden" name="repo-ids" /> 
         <div className="default text">Select Repos</div> 
         <i className="dropdown icon"></i> 
         <div className="menu"> 
         </div> 
        </div> 
       </div> 
       <div> 
        <div className="ui divider"></div> 
        <b>Selected value</b> {this.state.value} 
       </div> 
      </div> 
    ); 
    } 
}; 

export default Container 

：

Error: Cannot find module 'semantic-ui' 

grunt.initConfig({ 
    browserify: { 
     dist: { 
     options: { 
      transform: [ 
      ['babelify', { 
       presets: ['es2015', 'react'] 
      }] 
      ], 
      watch: true 
     }, 
     files: { 
      './dist/app.js': ['./src/js/app.js'] 
     } 
     } 
    }, 

私はこのようなコンポーネントを作成している：ここで

はGruntfile browserify configです

助けてください？セマンティックUIをコンパイルするために、何とかブラウザをセットアップする必要がありますか？

Answer 1

実際、Reactj用のセマンティックUIのライブラリが別にあります。 Reactjsアプリケーションにインストールして使用する必要があります。インストールするにはnpm install semantic-ui-react --saveを実行し、すべてを見つけることができます。以下はその公式サイトへのリンクです：semantic-ui-react