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
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"/>
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
Then let's import it to one of our components.
import faker from 'faker';
In your component you can call the faker gem like so;
<img src={faker.image.imageUrl()} alt="avatar"/>
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
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"/>
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.
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.
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.
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
Top comments (0)