User experience and user interface are closely related. We must consider the design of a website whenever we build it. A website's UI should be simple and easy to use. If it is cluttered or confusing, it will be hard for users to locate the information they are looking for. A bad UX often leaves users feeling frustrated and may cause them to leave your website.
That is why the web design is important for a variety of reasons including:
- It has a major impact on how your audience perceives your brand
- Websites that have good UX and UI are easy to navigate and enjoyable to visit.
Considering the competitive nature of digital businesses, UI design must catch consumers' attention and generate revenue for the company. This is where Semantic User Interface (SUI) comes in handy and enables us to customize the appearance and behavior of our apps built with React. Most of the time you might need to enroll yourself to the best React course on the internet to get learn essential SUI skills and create sunning websites.
What is Semantic UI?
The Semantic UI is an open-source framework for building intuitive user interfaces with CSS, jQuery, and HTML. The Semantic UI functions as an overlay on top of the React components and provides Semantic themes as CSS stylesheet.
This front-end development framework helps developers create websites with fast and concise HTML coupled with a complete mobile-responsive experience. Semantic UI offers numerous components for interface design and is a jQuery-free, React-compatible framework like Bootstrap-React.
Why Semantic UI?
There are several reasons why semantic user interfaces are becoming increasingly popular:
- Great community support.
- Components are easily accessible and can be used easily.
- User-friendly and easy to learn.
- You can install a variety of themes as well as CSS, JavaScript, and font files. With minimal effort, it provides an elegant look and a more interactive UI.
- It provides a lightweight user interface.
- By using Semantic UI, we can build web applications without having to create each component from scratch every time. We can create our UI just by using react components from the Semantic UI framework and customizing them to our liking.
Installing Semantic UI in React
Semantic UI can be installed in two ways.
1. Package Manager
Yarn or NPM can be used to install React components. Run the following command in terminal.
yarn add semantic-ui-react semantic-ui-css
//Or NPM
npm install semantic-ui-react semantic-ui-css
Once the app is installed, import the minified CSS file into the entry file:
import 'semantic-ui-css/semantic.min.css';
Semantic UI's CSS package is automatically synchronized with the main repository to provide a lightweight CSS version of Semantic UI.
2. CDN (no bundler)
Despite CDN being the simplest method to get started, I still recommend using package manager.
Follow React's guide to prepare your environment. After React is initialized add this script tag in the body tag inside index.html.
Index.html
<body>
<link async rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui-react/dist/umd/semantic-ui-react.min.js"></script>
</body>
In case you are interested in learning deeper concepts of web development and semantic UI in React, get enrolled in web development certification online.
Overview of Semantic UI React Components
The Semantic UI React library has more than 50 components. It is a layer on top of React JS components that offers semantic themes such as Cascading Style Sheets.
Components are grouped in the following categories:
- Elements: It includes basic components like buttons, containers, divider, lists, images, icons, loaders, inputs, headers, etc.
- Collections: forms, menus, Breadcrumbs, grids, and tables are all included in the Collection category.
- Views: comments, Cards, feeds, advertisements, statistics, etc., are included in the Views category. Note: Semantic UI offers many components that are unique to it (such as advertisements).
- Modules: The modules category consists of modular components such as popup, search, sidebars, accordion, dropdown, modals, progress bars, ratings, etc.
- Behaviours — contains only one component i.e. visibility, which provides a set of react callbacks when the content appears.
- Add-ons — some extra components like select, textarea, toggles, radio buttons, and, pagination is included in this category.
How to Use Semantic UI React Components?
Import and Declare Semantic UI React Components
The Semantic UI React package offers out-of-the-box components that we can import and use in our React application. These components are highly customizable using props and composition.
For instance, to add a button to a React application, you can simply import it from Semantic UI React and define it using JSX:
Code Snippet
import React from 'react';
import { Button, Icon } from 'semantic-ui-react';
const Login = () => (
<div>
<Button color='teal' >Login</Button>
<Button color='red'>
<Icon name="cart"/>
</Button>
<Button as='a' color='blue'> Click me </Button>
</div>
)
export default Login;Output
A major advantage of the Semantic UI React Button component is that it has a handful of props and sub-components you can use to configure it and style it as you like. It saves you hours of development as other frameworks require you to build a button and its style from scratch.
Shorthand Props
Shorthand is available for some Semantic UI React components, like the Button. Shorthand allows a component's content to be configured with predefined props. To put it another way, you can declare and customize the children of a component exclusively through props. It saves us from writing extra JSX code.
For instance, button has a special content shorthand for its main data. Even though their HTML is different, the buttons are identical in the output screen.
<Button content="Save"/>
// is equivalent to
<Button>Save</Button>
Output
Also, Button has an icon shorthand which can be used to add a Semantic UI React Icon to its children.
<Button icon="save" content="Save" />
// is equivalent to
<Button>
<Icon name="save" />Save
</Button>
We can use the Header component in Semantic UI React to display an HTML heading tag, such as h1 through h6. With the as props, we can specify which header tags to use.
Semantic UI React Header also has several shorthands, that we can use to declare the content of the heading tag. Now, let's do the same thing for the logo and text.
<Header
as="h1"
textAlign="center"
image={logo}
content="Sign in"
style={{ marginBottom: "20px" }}
/>
// is Eqivalent to
<h1 class="ui center aligned header" style="margin-bottom: 20px;">
<img src="/static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg" class="ui image">
<div class="content">Sign in</div>
</h1>There is a default element type associated with each component's shorthand. As an example, the <Icon /> element is automatically rendered for the button's icon shorthand. By providing the props object as a shorthand value, you can customize the props of this default element.
Another way to define the properties of a default element is to use primitive values. In such a case, provided shorthand value is considered a value for the "default prop" of this element.
In the example below, Shorthand’s <Icon /> element uses the name as a default prop.
<Button content='Favourite' icon={{ color: 'red', name: 'like' }} />
<Button content='Favourite' icon='like' />
{/* both are identical */}
<Button content='Favourite' icon={{ name: 'like' }} />Composition
With Semantic UI React, each component, such as the Button, has a set of predefined react props that you can set to configure it and style it. Semantic UI React provides a prop for composing React components. You can compose component features and props without having to add nested components.
<Button as='a' color='blue'> Click me </Button>
// is equivalent to
<a class="ui blue button" role="button"> Click me </a>
In the above example, we are using a Button component and its pre-defined features but rendering an <a > instead of a<Button />.
Utilizing 3rd Party Libraries to Compose Semantic UI Components
Other advantage of Semantic UI React includes the ability to pass DOM attributes and props down to component parts. This feature, when combined with the as prop, allows composition with third-party libraries like the popular react-router. Using the Semantic UI React Button component, we can render it as a Link component from react-router, and pass the to property required by Link.
import React from 'react';
import { Link } from 'react-router-dom'
import { Button } from 'semantic-ui-react'
const Login = () => (
<Button as="Link" to="/home">Home</Button>
)
export default Login;Semantic UI React Themes and Theming
With semantic UI React, you can use grids, responsive design, sticky navigation, and webpage construction to build your website. Using these layouts is a better alternative to starting from scratch. There is no styling system for Semantic UI React; it is wholly dependent on the theme options available in Semantic UI. This does not require you to know CSS or LESS and you can update variables while using the styles from predefined themes.
Here is a simple login form component made with React UI Semantic. Five to six components are used from the framework.
- Forms: is an organized display of a group of connected user input fields.
- Button: represents a potential user action.
- Header: provides a brief description of content.
- Segment: used to put together relevant pieces of content.
- Grid: used to harmonize negative space in a layout.
- Message: provides information about nearby content.
- Image: graphic representation of something.
App.js
import Login from "./Login";
function App() {
return (
<div className="App">
<Login />
</div>
);
}
export default App;Login.js
import React from 'react'
import { Form, Button, Header, Grid, Message, Image, Segment } from 'semantic-ui-react';
import logo from './logo.svg';
const Login = () => (
<Grid textAlign='center' style={{ height: '100vh' }} verticalAlign='middle'>
<Grid.Column style={{ maxWidth: 400 }}>
<Header as='h2' color='teal' textAlign='center'>
<Image src={logo} /> Log In
</Header>
<Form size='large'>
<Segment stacked>
<Form.Input fluid icon='user' iconPosition='left' placeholder='E-mail' />
<Form.Input fluid icon='lock' iconPosition='left' placeholder='Password' type='password'/>
<Button color='teal' fluid size='large'>
Login
</Button>
</Segment>
</Form>
<Message>
New User? <a href='#'>Sign Up</a>
</Message>
</Grid.Column>
</Grid>
)
export default Login;Looking to kickstart your coding journey? Discover the best course for Python beginners! Unleash your potential with Python's versatility and power. Start coding today!
Conclusion
The article introduces you to the Semantic UI framework and shows how you can easily develop web apps that are styled with it. By using Semantic UI React, we have access to many predefined React components that we can use out of the box. We also composed a simple login page using React Semantic UI. Interested in learning React JS? Check out KnowledgeHut’s React full course.
Question / Comments? Feel free to leave them in the comments below. Thanks for reading!
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
