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. }
  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. }
  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. }
  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. }
  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. }
  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. }
  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.