How do I use Semantic UI with ReactJS?

Question

I am building a web application, and I love the Semantic UI project, so I want to use it for my UI. The issue is that I am somewhat new to react.

The project is based off the react-starter-kit application template, and I have previously learning the basics of React. I have researched integrating Semantic UI, and the official website states that no special bindings are required. At the moment, I am including the semantic files like traditional websites on every page, but I feel this is not the correct approach. I have researched react-semantic projects, but there seems to be no current stable version.

Is anyone using Semantic with React? What's the best practice?

Jack · Accepted Answer · 2016-03-08 21:26:00Z

1

You can definitely use it, if you just want the CSS/markup portion of it just include the CSS in your page and start using the classes. Remember to use className instead of class.

If you want to take advantage of the javascript (tabs, etc..) that's a bit trickier. It comes down to you wiring up your UI the react way, but also firing the appropriate Semantic functions.

Here's a react + jquery-bootstrap example. The implementation would be similar when using Semantic.

https://github.com/facebook/react/tree/master/examples/jquery-bootstrap

edited Mar 8, 2016 at 21:26

answered Mar 8, 2016 at 20:37

Jack

8,9413 gold badges23 silver badges27 bronze badges

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

Comments

kenneth_mervin01 · Accepted Answer · 2017-07-10 05:55:33Z

1

Hello @Rothschild Yes you can now integrate semantic ui easily. Check this respository https://github.com/kennethmervin01/react-with-semantic

It's a react boilerplate with semantic ui. You can integrate semantic with this simple script

import React from 'react'
import { render } from 'react-dom'
import { Segment, Button } from 'semantic-ui-react'
import '../semantic/dist/semantic.min.css'

const HelloWorld = () => (
    <Segment>
        <Button primary>Hello</Button>
        <Button secondary>World</Button>
    </Segment>
)

render(<HelloWorld />, document.getElementById('app'))

answered Jul 10, 2017 at 5:55

kenneth_mervin01

662 bronze badges

1 Comment

user533507 Over a year ago

Thanks for the update ;) I'm happy to say I'm not so new to React any more

Collectives™ on Stack Overflow

How do I use Semantic UI with ReactJS?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related