Semantic-UI-React: Overhauling the front-end

Since starting my journey as a Software Developer I’ve gained a vast insight on the importance of providing a coerce user experience. The look and feel of a product may as well dictate its success or lifespan. As most people would agree, it can be quite daunting to build a product while anticipating the proper practices needed for a user experience. This is where frontend frameworks come into play.

As its name suggests, Semantic-UI-React is a modern front-end development framework primarily used for React applications. It provides users with elegant and simplistic interfaces all the while abstracting complex HTML and CSS code. Semantic provides stylish components such as buttons, forms and cards by bundling complex HTML code into simple to use JSX elements. If you’ve ever used other frontend frameworks such as Bootstrap or Material-UI, you most likely have some experience on how these components are augmented. Just like Material-UI, components are customizable through the use of tag elements or better known as “props”. Each element has a set of pre-defined properties along with options or values which can be assigned to said props to further customize the component.

For all intents and purposes, I will walk you through a small demonstration which will go over some helpful tips and tricks that I’ve picked up while working with semantic for React.

Getting Started

For a more thorough introduction to Semantic-UI-React I’d recommend visiting their official documentation. found here.

1. first we will install the Semantic UI React package alongside some themed minified CSS.

$  yarn add semantic-ui-react semantic-ui-css
## Or NPM
$  npm install semantic-ui-react semantic-ui-css

2. Lastly we will inject the minified CSS package into the main entry point of our application (index.js).

import 'semantic-ui-css/semantic.min.css'

Now that we’re all set, you can start importing JSX elements from Semantic into your React project.

A trick I found very useful in most of my projects was creating a wireframe. The general idea is to come up with a mockup or rough draft on the look and feel of the project. Once this process is finalized, we start by building out the general components that have the same look throughout our entire app. I will use a button as an example.

In the screenshot above I‘ve created a button component and exported it. A variable is also initialized within the button component file which stores an object. This object holds any default values for the button while any props passed into the component are spread onto the button element as custom configurations that will override the default configs.

Now, all that’s left to do is to include this component onto the root of our HTML page. I will be adding three buttons. The first button will maintain our default style while the other two will cascade some custom settings in the form of props.

Upon refreshing the browser these inclusions should be rendered onto the browser.

This same method can be applied to nearly all of Semantic-UI’ elements, pretty cool right!! Now next time you work on a project you’ll be one step closer to an awesome UI experience.