Since starting my coding journey, styling has been one of the pitfalls of my experience thus far. When I first began coding, I used a free coding platform called the Odin Project to teach myself how to code in HTML and CSS. One of the first coding projects I can remember was to recreate the Google Homepage, which doesn’t seem that difficult right? Well let’s just say that this project didn’t end very well and I gave up learning CSS before I even began.
After being a student of the Flatiron bootcamp for almost 13 weeks, I have now been introduced to a couple of front-end / user interface (UI) frameworks such as Bootstrap and Semantic UI. These have made styling my web applications a breeze , while also helping me understand some tricks to using CSS. As I’m starting to learn React.js, I’ve recently been exposed to the Semantic UI React framework. For the purpose of this blog post, I will go over some helpful tips and tricks that will surely get you started when implementing this framework in your code.
Getting Started With Semantic-UI-React
Setting Up Environment
To start, you will first have to install the latest Node Version Manager on your computer, which, according to the official React docs, is Node version 8.10 or npm version 5.6. To install the latest Node Package you can type npm install in your terminal
Next, you will want to create/run your React application by running the below code into your terminal:
npx create-react-app my-app
cd my-app
npm startNow that you have created your React Application we can now get into the nitty gritty of enhancing our app with Semantic-UI-React!
Installing Semantic UI React Package
Once you have your React application up and running, you can go ahead and type in the following bit of code into your terminal:
$ yarn add semantic-ui-reactWhat this line of code will do is download the semantic-ui-react dependency to your package.json file and also give you access to the Semantic-UI-React Components that will be used throughout your app.
On the official React UI Semantic website you will then also be able to download a theme that will give you access to the CSS library. For the purpose of this post I will be downloading the Default NPM Theme which can be typed in your console:
$ yarn add semantic-ui-cssThe final piece of installing the Semantic UI React Package is to import the CSS file from the dependency and place in your applications entry file, or index.js file:
import 'semantic-ui-css/semantic.min.css'Semantic-UI-React In Action
If I haven’t already stated this — the amount of designs that can be used to style elements in your projects using semantic-ui-react can seem endless at times. Recently, I had created a dog adoption application that had some added CRUD functionalities. I’ll talk about a couple of the semantic features I used in my app.
Cards:
This is one of my favorite styles as it creates a self contained block that contains all of the specific information that I want rendered, such as dog name, dog image, dog age , etc. This is very useful when designing an app and gives off a great User Experience (UX).
Forms:
-Using the Semantic-UI-React allows for users to build dynamically styled forms in their application. I was able to create a ready to use form that allowed me to enhance my application to help users better fill out the putting up a dog for adoption section.
Other Frameworks To Check Out:
If you’ve tried out the Semantic-UI-React Framework and want to try another framework, you can check out this article or any of the frameworks below:
- Material-UI
- React Desktop
- Ant-design
- Blueprint
- React-Bootstrap
- React-Toolbox
- Grommet
- Fabric
- React-md
