Using Semantic-UI-React in your React.js App

Alberto Carreras
4 min readJul 24, 2018

--

Note: Basic React.js knowledge is needed.

If you have ever CSS-styled a website, you might have used some front-end or user interface (UI) frameworks such as Bootstraps or Semantic UI. For very basic applications, you can just access the library adding a CDN link on your index.html file and you are good to go to start using some of the framework code.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>

If you are building a React application, this previous method still works. However, several user interface frameworks have been integrated to React’s component-based architecture.

You can find a description of some of the hottest frameworks in this article.

  • Material-UI
  • React Desktop
  • Ant-design
  • Blueprint
  • React-Bootstrap
  • React-Toolbox
  • Grommet
  • Fabric
  • React-md
  • Semantic-UI-React

To illustrate the use of React-integrated UI frameworks, we will install and use some Semantic-UI-React components in a new app.

Semantic UI React. The official Semantic-UI-React integration

Create-React-App and Installation

  1. Make sure you have your node version manager installed. Node is a package manager for JavaScript.
  2. Install create-react-app in your global environment.
$ npm install -g create-react-app

Visit Facebook’s documentation if you have any problem in the process.

3. In your development folder, create a new React app entering the following commands on your terminal:

$ create-react-app my-semantic-ui-app
$ cd my-semantic-ui-app
$ npm start

In you development folder, you have a new `my-semantic-ui-app` folder with your app files. npm start will start the server on your localhost:3000. It will automatically open it on your browser.

4. Install Semantic UI React in your React app from npm or follow the documentation. Semantic UI React provides the JavaScript for your components.

$ npm i semantic-ui-react --save

Now, on your package.json file there is a semantic-ui dependency. However, it does not provide CSS-style. Install Semantic UI CSS via:

  • adding the Semantic UI CDN link in your index.html file
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css"></link>

or

  • installing Semantic UI package in your React app from npm or follow the documentation.
$ npm i semantic-ui --save

The installation will ask you some installation questions!

After install, you’ll still need to include the minified CSS file in your index.js file. This file is inside your node-modules.

import 'semantic-ui/dist/semantic.min.css';
Now, your package.json has 2 new dependencies and your node_module two new modules.

Adding a Semantic-UI-React component

The Semantic-UI-React documentation presents both rendered HTML and JSX code. Compared to the same element from Semantic-UI, we can observe the similar code in both rendered HTML from Semantic-UI-React and Semantic-UI.

Semantic-UI-React (LEFT), Semantic-UI (RIGHT)

On our React App, we can still use rendered HTML or use more declarative code using Semantic-UI-React components. Let’s add a simple element to our app in both ways.

On the App.js file, add the following code:

//right on top
import ButtonExampleButton from './Btn.js'
// inside the class app<ButtonExampleButton /><button class="ui button" role="button">Btn with Semantic-UI</button>

Create a new file Btn.js and copy paste the component code from Semantic-UI-React.

import React from ‘react’
import { Button } from ‘semantic-ui-react’
const ButtonExampleButton = () => <Button>Click Here</Button>export default ButtonExampleButton

On your browser, now you can see both buttons.

If you only install the components, they will display without CSS. Here you can see the difference without the min.css import on index.js.

--

--