These tutorials will give you a deeper understanding of React.js. Learn with examples from the Javascript UI library, covering the basics and the advanced.
Adding Semantic UI to a React project
StylingSemantic UI is an open source styling or CSSA framework. Navigate to semantic-ui.com and if we click on the menu button, we can see a bunch of different default elements, collections, views, etc. that are free to use.
If we make use of semantic UI we can essentially get all the styling that we need for most components without having to waste a lot of time on it.
There's an incredibly easy way to install the framework. We can search google for semantic ui cdn and find a link to cdnjs.com.
This is the link we'll want to copy - CTRL-F for semantic.min.css: https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
We'll paste that link in the index.html file within our project's /public directory. It will go into our <head> tag, after the metadata like so:
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
...
Next, we'll save this file. If we go back to localhost:3000 we should see the page refreshed with a slightly different font.
Now we know that semantic-ui is installed correctly.