Analytics Vidhya
Published in

Analytics Vidhya

How to Implement Semantic UI Item View in React

To better understand how the React-integrated user interface (UI) frameworks can be implemented within React applications, we focused on building some Semantic UI React components into our group project this week at boot camp.

The quickest way to get started with Semantic UI in your React app is to run the command below:

$ npm install --save semantic-ui-react

Next, install the Semantic UI CSS package to be able to style:

$ npm install semantic-ui-css --save

After you finish installing, import the minified CSS file in your React entry point file:

import ‘semantic-ui-css/semantic.min.css’

Finally, you can easily access the library by adding a CDN link to your index.html file:

<link rel=”stylesheet” href=”//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css” />
You can see that the new dependency is listed in your package.json file after the installation is completed.

Now, Semantic UI is ready to be used in our React app. In the next section, I will try to summarize how we imported and used components from Semantic UI React.

In our app, we built a page where users can click and see the details of the listed recipes. The Details component contains several different imported elements such as item, rating, and button from Semantic UI React:

An item view provides a way for grouping together the different types of contents such as image, header, description, rating, and inside content. It was great to use Item for our project to display the title, picture, ingredients, and description of selected recipes. We used a group of three items in our app and you can see below how the Details page looks like:

The first item contains the header (the title of the recipe) and the second item contains an image, inside content (the ingredients of the recipe) and buttons to edit and delete the recipe:

As you can see, some inline styling is applied here to adjust the image size and to format the items with padding. The third and last item of the page contains a description (preparation steps of the recipe), metadata (area, category, and rating of the recipe), the icon for rating action, and a button to add the recipe to favorites :

I hope that you find some useful tips here and this blog post will be helpful for those new to Semantic UI React. Please feel free to go to Semantic UI React documentation to learn more about this topic. Thank you for reading!

--

--

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