Semantic-UI with React

…not too shabby!

https://semantic-ui.com/

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 index.html file:

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/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<img/>.

Make sure to account for the fact that you’re writing JSX- not HTML!

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!

Example usage of a Button Component

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 😁.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store