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

• How To Install Semantic UI In React Application

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,

npx create-react-app semanticuidemo

Open this project in Visual Studio Code and install semantic UI using the following command.  

npm install semantic-ui-react

Now open index.js file and import semantic UI css.

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.

import React, { Component } from 'react'
import { Button } from 'semantic-ui-react'
export class Buttons extends Component {
    render() {
        return (
            <div>
                <div class="ui blue inverted three item menu">
                    <a class="item">Semantic UI Button</a>
                </div>
                <button class="ui primary button">
                    Save
               </button>
                <button class="ui secondary button">
                    Send
                 </button>
                <button class="ui button">
                    Cancel
                </button>
                <div class="ui blue inverted three item menu">
                    <a class="item">Semantic UI Animated Button</a>
                </div>
                <div class="ui animated button" tabindex="0">
                    <div class="visible content">Next</div>
                    <div class="hidden content">
                        <i class="right arrow icon"></i>
                    </div>
                </div>
                <div class="ui vertical animated button" tabindex="0">
                    <div class="hidden content">Shop</div>
                    <div class="visible content">
                        <i class="shop icon"></i>
                    </div>
                </div>
                <div class="ui animated fade button" tabindex="0">
                    <div class="visible content">Sign</div>
                    <div class="hidden content">
                        $10 a month
                </div>
                </div>
                <div class="ui blue inverted three item menu">
                    <a class="item">Semantic UI Social Media Button</a>
                </div>
                <button class="ui facebook button">
                    <i class="facebook icon"></i>
                Facebook
                </button>
                <button class="ui twitter button">
                    <i class="twitter icon"></i>
                Twitter
               </button>
                <button class="ui linkedin button">
                    <i class="linkedin icon"></i>
                 LinkedIn
               </button>

                <button class="ui youtube button">
                    <i class="youtube icon"></i>
                  YouTube
                </button>
                <div class="ui blue inverted three item menu">
                    <a class="item">Semantic UI Colored  Button</a>
                </div>
                <button class="ui red button">Red</button>
                <button class="ui orange button">Orange</button>
                <button class="ui yellow button">Yellow</button>
                <button class="ui green button">Green</button>
                <button class="ui blue button">Blue</button>
                <button class="ui violet button">Violet</button>
                <button class="ui purple button">Purple</button>
                <button class="ui pink button">Pink</button>
                <button class="ui brown button">Brown</button>

            </div>
        )
    }
}

export default Buttons

Open the App.js file and add the folllowing code.

import React from 'react';
import { Buttons } from "./Buttons";
import { Containers } from "./Containers";
import { Lists } from "./Lists";
function App() {
  return (
    <div className="App">
      <Buttons></Buttons>
    </div>
  );
}

export default App;

Now, run the project by using 'npm start' command and check the result.

 

 

Now go to src folder and create a new component 'Containers.js' and add the following code in this component.

import React, { Component } from 'react'

export class Containers extends Component {
    render() {
        return (
            <>
                <div class="ui raised very padded text container segment">
                    <h2 class="ui header">Containers Semantic UI</h2>
                    <p></p>
                    <p></p>
                </div>
                <div class="ui left aligned container">
                    <p>Left</p>
                </div>
                <div class="ui center aligned container">
                    <p>Center</p>
                </div>
                <div class="ui right aligned container">
                    <p>Right</p>
                </div>
                <div class="ui justified container">
                    <p>Justified</p>
                </div>
            </>
        )
    }
}

export default Containers

Open the App.js file and add the folllowing code.

import React from 'react';
import { Buttons } from "./Buttons";
import { Containers } from "./Containers";
import { Lists } from "./Lists";
function App() {
  return (
    <div className="App">
       <Containers></Containers> *
    </div>
  );
}

export default App;

Now, run the project by using 'npm start' command and check the result.

 

 

Now go to src folder and create a new component 'lists.js' and add the following code in this component.

import React, { Component } from 'react'
export class Lists extends Component {
    render() {
        return (
            <>
                <div class="ui list">
                    <div class="item">Jaipur</div>
                    <div class="item">Delhi</div>
                    <div class="item">Bangalore</div>
                </div>
                <div class="ui bulleted list">
                    <div class="item">Rajasthan</div>
                    <div class="item">Mumbai</div>
                    <div class="item">Noida</div>
                </div>
            </>
        )
    }
}

export default Lists

Open the App.js file and add the folllowing code.

import React from 'react';
import { Buttons } from "./Buttons";
import { Containers } from "./Containers";
import { Lists } from "./Lists";
function App() {
  return (
    <div className="App">
      <Lists></Lists>
    </div>
  );
}

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.