How to Integrate Semantic in React

Jeffrey Martinez
2 min readMay 16, 2021

One of the things I figured out, was Semantic UI. What is this exactly? This is what we are going to figure out and I will walk you step-by-step in order for you to integrate it within your React Projects.

What is Semantic UI?

As stated within their website, Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. This is almost similar to Bootstrap! Check out their website to learn more about it!

Add Semantic to Your Projects

There are many ways we can integrate semantic-ui.

Option 1: Package Manager. React Components can be installed via yarn or npm , as seen below:

We also want to make sure that we import the semantic-ui-css to our components:

Option 2: CDN. The quickest way to get started with semantic-ui is by copying the CDN link and the javascript link as well, and add it to the <head> tag of your index.html , as seen below:

To check the current version of the semantic-ui framework, click here to view the links.

--

--

Jeffrey Martinez

I am a graduate from Flatiron School for Software Engineer. Studied HTML, CSS, Ruby, Ruby on Rails, JavaScript, React, Redux, Sinatra, and Sqlite3