TheLazy.Dev
Portfolio GitHub

Blog

sematicui |react |codenewbie

Semantic UI on React

tolentinoel

Ellaine Tolentino

Posted on June 6, 2021

Semantic UI on React

As we go towards the goal of coding daily, I have tried to learn applying Semantic UI on a React App!

There are so many things to learn to reach my goal of being a pro in frontend development, and I learn best on application!

Installation 

npm install semantic-ui-react semantic-ui-css
Enter fullscreen mode Exit fullscreen mode

OR

Add this script inside the <head> tag of your index.html.

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
Enter fullscreen mode Exit fullscreen mode

I wanted some mock user data but since this is just a frontend development exercise, I just went with a faker gem!

Instructions and specifications are here on it's repo - Faker Github repo.

Let's install it!

npm install --save faker
Enter fullscreen mode Exit fullscreen mode

Then let's import it to one of our components.

import faker from 'faker';
Enter fullscreen mode Exit fullscreen mode

In your component you can call the faker gem like so;

<img src={faker.image.imageUrl()} alt="avatar"/>
Enter fullscreen mode Exit fullscreen mode

You can utilize the faker gem in so many ways! For mock email address, photos, names, words etc. Example:

let randomName = faker.name.findName(); // Rowan Nikolaus
let randomEmail = faker.internet.email() //Kassandra.Haley@erich.biz
Enter fullscreen mode Exit fullscreen mode

I wanted to add a big avatar photo like a profile page, so I looked up and found this repo for image variations for the Image component from Semantic UI.
Avatar variations
Once you choose one, I applied it to my code like so;

<img src="https://semantic-ui.com/images/avatar2/large/elyse.png" className="ui medium circular image" alt="avatar"/>
Enter fullscreen mode Exit fullscreen mode

Don't forget to specify the size on the url. In my case, I chose large. I also used the className, ui medium circular image, for is to be cropped circularly without the need for border-radius.

screenshot
The container at the bottom I used is one of Semantic UI's component called Card.

At the very bottom of the page you'll see a list of people who have interacted with our mock user.
mock user feed
It is amazingly just a component by Semantic UI which is called Feed. In combination of the faker gem we installed, I also utilized it on the "photos" 'Justin Kitsune' added.

In code, here's how I utilized the faker gem.

<img src={faker.image.image()} alt="avatar" /> //generates any random image they have on the database.
Enter fullscreen mode Exit fullscreen mode

And that is it! There are so much things to apply and definitely this can be improved. This blog is in purpose of just showing what I learned in applying a frontend library I've never get a chance to use before.

Here's the deployed version of my app if you want to see it live! Semantic UI App

What's your favorite Semantic UI component and have you made an app with it? Let me know in the comments below!

💖 💪 🙅 🚩
tolentinoel
Ellaine Tolentino

Posted on June 6, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Semantic UI on React
sematicui Semantic UI on React

June 6, 2021