How To Install Semantic UI In React Application

Introduction

 
In this article we will learn about how to install and use a semantic UI framework in a React application. Semantic UI is a UI component framework for building resposive user interfaces. Semantic UI helps developers to create resposive websites with fast and compact HTML.
 
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. 
 
Install Semantic UI
 
Install Semantic UI by 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 'DemoUI.js' and in this component we will add a semantic UI button.
  1. import { Button } from 'semantic-ui-react'  
  Add the following code in this component
  1. import React, { Component } from 'react'  
  2. import { Button } from 'semantic-ui-react'  
  3. export class DemoUI 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>Click Here</Button>  
  11.                 <div>  
  12.                     <br />  
  13.                     <Button primary>Primary</Button>  
  14.                     <Button secondary>Secondary</Button>  
  15.                 </div>  
  16.             </div>  
  17.         )  
  18.     }  
  19. }  
  20.   
  21. export default DemoUI  
Open the App.js file and add the folllowing code.
  1. import React from 'react';  
  2. import { DemoUI } from "./DemoUI";  
  3. function App() {  
  4.   return (  
  5.     <div className="App">  
  6.      <DemoUI></DemoUI>  
  7.     </div>  
  8.   );  
  9. }  
  10.   
  11. export default App;  
Now, run the project by using 'npm start' command and check the result.
 
How To Install Semantic UI In React Application
Now go to src folder and create another component 'Register.js' and in this component we will create a simple Registration form. Add the following code in this component.
  1. import React, { Component } from 'react'  
  2. import { Button,Form,Grid,Message,Segment} from 'semantic-ui-react';  
  3. export class Register extends Component {  
  4.     render() {  
  5.         return (  
  6.             <div>  
  7.                 <div class="ui blue inverted three item menu">  
  8.                     <a class="item">Registration  Form</a>  
  9.                 </div>  
  10.                 <Grid centered columns={2}>  
  11.     <Grid.Column>  
  12.       <Segment>  
  13.         <Form size="large">  
  14.           <Form.Input  
  15.             fluid  
  16.             icon="user"  
  17.             iconPosition="left"  
  18.             placeholder="User Name"  
  19.           />  
  20.           <Form.Input  
  21.             fluid  
  22.             icon="user"  
  23.             iconPosition="left"  
  24.             placeholder="Email address"  
  25.           />  
  26.           <Form.Input  
  27.             fluid  
  28.             icon="lock"  
  29.             iconPosition="left"  
  30.             placeholder="Password"  
  31.             type="password"  
  32.           />  
  33.           <Form.Input  
  34.             fluid  
  35.             icon="home"  
  36.             iconPosition="left"  
  37.             placeholder="Address"  
  38.           />  
  39.           <Button color="blue" fluid size="large">  
  40.             Register  
  41.           </Button>  
  42.         </Form>  
  43.       </Segment>  
  44.       <Message>  
  45.       <a href="#">Login</a>  
  46.       </Message>  
  47.     </Grid.Column>  
  48.   </Grid>  
  49.             </div>  
  50.         )  
  51.     }  
  52. }  
  53.   
  54. export default Register  
Open the App.js file and add the folllowing code.
  1. import React from 'react';  
  2. import { Register } from "./Register";  
  3. function App() {  
  4.   return (  
  5.     <div className="App">  
  6.      <Register></Register>  
  7.     </div>  
  8.   );  
  9. }  
  10.   
  11. export default App;  
Now, run the project by using 'npm start' command and check the result.
 
How To Install Semantic UI In React Application
Now go to src folder and create another component, 'Navmenu.js', and in this component we will create create a navigation menu. Add the following code in this component.
  1. import React, { Component } from 'react'  
  2. import { Menu } from 'semantic-ui-react'  
  3. import { Button,Form,Grid,Message,Segment} from 'semantic-ui-react';  
  4. export class Navmenu extends Component {  
  5.     render() {  
  6.         return (  
  7.             <div>  
  8.                 <Grid centered columns={2}>  
  9.                  <Grid.Column>  
  10.                  <Menu pointing secondary>  
  11.                  <Menu.Item icon="home" name='home' href="/home"/>  
  12.                  <Menu.Item  icon="find" name='About' href="/about"/>  
  13.                  <Menu.Item  icon="address book" name='contact' href="/contact"/>  
  14.                  </Menu>  
  15.                  </Grid.Column>  
  16.                  </Grid>  
  17.             </div>  
  18.         )  
  19.     }  
  20. }  
  21.   
  22. export default Navmenu  
Open the App.js file and add the folllowing code.
  1. import React from 'react';  
  2. import { Navmenu } from "./Navmenu";  
  3. function App() {  
  4.   return (  
  5.     <div className="App">  
  6.      <Navmenu></Navmenu>  
  7.     </div>  
  8.   );  
  9. }  
  10.   
  11. export default App;  
Now, run the project by using 'npm start' command and check the result.
 
How To Install Semantic UI In React Application

Summary


In this article, we learned the baisics of semantic UI and how to install semantic UI in a React.js application.


Similar Articles