React와 Express에서 시맨틱 UI를 어떻게 사용합니까?

Question

시맨틱/리 액트/익스프레스를 처음 사용했습니다. 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 파일을 가져옵니다. React는 코드를 HTML로만 렌더링합니다. .css 파일이 가져 오기에 정상적으로 존재하면 클래스가 적용됩니다.

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

:

는 CSS 그냥 html 파일에 추가 가져 오려면

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 속성 이름을 각각 예상합니다.