Semantic UI Components In React Applications

Introduction

 
In this article we will learn about the basic components of a semantic UI framework in a React application. We will learn about the semantic UI button, container, and list. Semantic UI is a UI component framework for building resposive user interfaces. In a previous article we learned how to install semantic UI in React applications.
 
You can check my previous article in which we discussed how to install semantic UI in React applications from the below link
Prerequisites
  • We should have a basic knowledge of HTML and ReactJS.
  • Visual Studio Code installed
  • Node and NPM installed
Step 1
 
Let's create a new React project by using the following command,
  1. npx create-react-app semanticuidemo    
Open this project in Visual Studio Code and install semantic UI using the following command.  
  1. npm install semantic-ui-react    
Now open index.js file and import semantic UI css.
  1. import 'semantic-ui-css/semantic.min.css'   
Now go to src folder and create a new component 'Buttons.js' and in this component we will create differents buttons of Semantic UI.
  1. import React, { Component } from 'react'  
  2. import { Button } from 'semantic-ui-react'  
  3. export class Buttons extends Component {  
  4.     render() {  
  5.         return (  
  6.             <div>  
  7.                 <div class="ui blue inverted three item menu">  
  8.                     <a class="item">Semantic UI Button</a>  
  9.                 </div>  
  10.                 <button class="ui primary button">  
  11.                     Save  
  12.                </button>  
  13.                 <button class="ui secondary button">  
  14.                     Send  
  15.                  </button>  
  16.                 <button class="ui button">  
  17.                     Cancel  
  18.                 </button>  
  19.                 <div class="ui blue inverted three item menu">  
  20.                     <a class="item">Semantic UI Animated Button</a>  
  21.                 </div>  
  22.                 <div class="ui animated button" tabindex="0">  
  23.                     <div class="visible content">Next</div>  
  24.                     <div class="hidden content">  
  25.                         <i class="right arrow icon"></i>  
  26.                     </div>  
  27.                 </div>  
  28.                 <div class="ui vertical animated button" tabindex="0">  
  29.                     <div class="hidden content">Shop</div>  
  30.                     <div class="visible content">  
  31.                         <i class="shop icon"></i>  
  32.                     </div>  
  33.                 </div>  
  34.                 <div class="ui animated fade button" tabindex="0">  
  35.                     <div class="visible content">Sign</div>  
  36.                     <div class="hidden content">  
  37.                         $10 a month  
  38.                 </div>  
  39.                 </div>  
  40.                 <div class="ui blue inverted three item menu">  
  41.                     <a class="item">Semantic UI Social Media Button</a>  
  42.                 </div>  
  43.                 <button class="ui facebook button">  
  44.                     <i class="facebook icon"></i>  
  45.                 Facebook  
  46.                 </button>  
  47.                 <button class="ui twitter button">  
  48.                     <i class="twitter icon"></i>  
  49.                 Twitter  
  50.                </button>  
  51.                 <button class="ui linkedin button">  
  52.                     <i class="linkedin icon"></i>  
  53.                  LinkedIn  
  54.                </button>  
  55.   
  56.                 <button class="ui youtube button">  
  57.                     <i class="youtube icon"></i>  
  58.                   YouTube  
  59.                 </button>  
  60.                 <div class="ui blue inverted three item menu">  
  61.                     <a class="item">Semantic UI Colored  Button</a>  
  62.                 </div>  
  63.                 <button class="ui red button">Red</button>  
  64.                 <button class="ui orange button">Orange</button>  
  65.                 <button class="ui yellow button">Yellow</button>  
  66.                 <button class="ui green button">Green</button>  
  67.                 <button class="ui blue button">Blue</button>  
  68.                 <button class="ui violet button">Violet</button>  
  69.                 <button class="ui purple button">Purple</button>  
  70.                 <button class="ui pink button">Pink</button>  
  71.                 <button class="ui brown button">Brown</button>  
  72.                 
  73.             </div>  
  74.         )  
  75.     }  
  76. }  
  77.   
  78. export default Buttons  
Open the App.js file and add the folllowing code.
  1. import React from 'react';  
  2. import { Buttons } from "./Buttons";  
  3. import { Containers } from "./Containers";  
  4. import { Lists } from "./Lists";  
  5. function App() {  
  6.   return (  
  7.     <div className="App">  
  8.       <Buttons></Buttons>   
  9.     </div>  
  10.   );  
  11. }  
  12.   
  13. export default App;  
Now, run the project by using 'npm start' command and check the result.
 
Semantic UI Components In React Application
 
Now go to src folder and create a new component 'Containers.js' and add the following code in this component.
  1. import React, { Component } from 'react'  
  2.   
  3. export class Containers extends Component {  
  4.     render() {  
  5.         return (  
  6.             <>  
  7.                 <div class="ui raised very padded text container segment">  
  8.                     <h2 class="ui header">Containers Semantic UI</h2>  
  9.                     <p></p>  
  10.                     <p></p>  
  11.                 </div>  
  12.                 <div class="ui left aligned container">  
  13.                     <p>Left</p>  
  14.                 </div>  
  15.                 <div class="ui center aligned container">  
  16.                     <p>Center</p>  
  17.                 </div>  
  18.                 <div class="ui right aligned container">  
  19.                     <p>Right</p>  
  20.                 </div>  
  21.                 <div class="ui justified container">  
  22.                     <p>Justified</p>  
  23.                 </div>  
  24.             </>  
  25.         )  
  26.     }  
  27. }  
  28.   
  29. export default Containers  
Open the App.js file and add the folllowing code.
  1. import React from 'react';  
  2. import { Buttons } from "./Buttons";  
  3. import { Containers } from "./Containers";  
  4. import { Lists } from "./Lists";  
  5. function App() {  
  6.   return (  
  7.     <div className="App">  
  8.        <Containers></Containers> *  
  9.     </div>  
  10.   );  
  11. }  
  12.   
  13. export default App;  
Now, run the project by using 'npm start' command and check the result.
 
Semantic UI Components In React Application
 
Now go to src folder and create a new component 'lists.js' and add the following code in this component.
  1. import React, { Component } from 'react'  
  2. export class Lists extends Component {  
  3.     render() {  
  4.         return (  
  5.             <>  
  6.                 <div class="ui list">  
  7.                     <div class="item">Jaipur</div>  
  8.                     <div class="item">Delhi</div>  
  9.                     <div class="item">Bangalore</div>  
  10.                 </div>  
  11.                 <div class="ui bulleted list">  
  12.                     <div class="item">Rajasthan</div>  
  13.                     <div class="item">Mumbai</div>  
  14.                     <div class="item">Noida</div>  
  15.                 </div>  
  16.             </>  
  17.         )  
  18.     }  
  19. }  
  20.   
  21. export default Lists  
Open the App.js file and add the folllowing code.
  1. import React from 'react';  
  2. import { Buttons } from "./Buttons";  
  3. import { Containers } from "./Containers";  
  4. import { Lists } from "./Lists";  
  5. function App() {  
  6.   return (  
  7.     <div className="App">  
  8.       <Lists></Lists>  
  9.     </div>  
  10.   );  
  11. }  
  12.   
  13. export default App;  
Now, run the project by using 'npm start' command and check the result.
 

Summary

 
In this article, we learned about button, container and list components of semantic UI in a React.js application.