Semantic-UI with React
…not too shabby!
When I started my Flatiron Mod 4 React/Rails project, my project partner Fnu Tsering Norbu suggested we use the Semantic UI framework for design.
Having never used it before, I was a bit hesitant…but Tsering had played around a bit with Semantic and felt like it would be a good choice. It was, and I’m glad I now have another CSS/UI framework under my belt.
Getting started with Semantic UI in a React app is super simple:
To jump right in, you just need to add the following link to the
<head> of your
<link rel="stylesheet" href="//email@example.com/dist/semantic.min.css" />
This is already enough to get started with using the many Semantic UI templates and elements at semantic-ui.com, as long as you take into account small changes for incorporating them right into JSX…like changing the ‘class’ attributes to ‘className’, and making sure to close tags like
You may find this is more than enough for you to get started. However, if you want to get real React-specific, use components!
In your React front-end directory, run a simple:
npm i semantic-ui-react
Now you can use Semantic UI React components 🙌 !
✵ Make sure you import components you’re using from ‘semantic-ui-react’ on the top of your file!
This is a super simple intro to using Semantic UI in React apps, but I hope this article showed you how simple it can be to incorporate it for effortless user-friendly design 😁.