Добавил bootstrap и reactstrap в проект. Добавил в dev зависимости загрузчики…

cp/javascript/src/components/SiteList.jsx

-import React, {Component} from 'react'
+import React from 'react'
+import {Nav, NavItem, NavLink, TabContent, TabPane} from "reactstrap";
 import Site from "./Site";
 
-export default class SiteList extends Component {
+export default class SiteList extends React.Component {
 
+    sites = this.props.sites;
+
+    state = {
+        activeTab: this.sites[0].id
+    };
+
+    toggle = (tab) => {
+        console.log("Toggle to ", tab);
+        if (this.state.activeTab !== tab) {
+            this.setState({
+                activeTab: tab
+            })
+        }
+    };
 
     render() {
-        const {sites} = this.props;
+        const tabItems = this.sites.map(site =>
+            <NavItem key={site.id}>
+                <NavLink className={this.state.activeTab === site.id ? "active" : ""}
+                         onClick={() => { this.toggle(site.id) }}>
+                    {site.name}
+                </NavLink>
+            </NavItem>
+        );
 
-        const siteElements = sites.map(site =>
-          <li key={site.id}><Site site={site}/></li>
+        const tabContents = this.sites.map(site =>
+            <TabPane tabId={site.id}>
+                <Site site={site} />
+            </TabPane>
         );
 
         return (
-            <div className="site-list">
-                <h1>Список сайтов, за которые вы отвечаете:</h1>
-                <ul>
-                    {siteElements}
-                </ul>
+            <div>
+                <Nav tabs>
+                    {tabItems}
+                </Nav>
+                <TabContent activeTab={this.state.activeTab}>
+                    {tabContents}
+                </TabContent>
             </div>
         )
     }

cp/javascript/src/typos.jsx

 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import 'bootstrap'
+import 'bootstrap/dist/css/bootstrap.min.css';
+
 import SiteList from "./components/SiteList";
 
 // Get json array of typos and render component application

cp/package.json

@@ -5,11 +5,14 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
+    "bootstrap": "^4.0.0",
     "free-jqgrid": "^4.15.3",
     "jquery": "^3.3.1",
     "jquery-ui": "^1.12.1",
+    "popper.js": "^1.14.2",
     "react": "^16.3.0",
-    "react-dom": "^16.3.0"
+    "react-dom": "^16.3.0",
+    "reactstrap": "^5.0.0-beta.3"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
@@ -17,7 +20,8 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
-
+    "css-loader": "^0.28.11",
+    "style-loader": "^0.20.3",
     "webpack": "^4.4.1",
     "webpack-cli": "^2.0.13"
   },

cp/webpack.config.js

@@ -31,6 +31,14 @@ module.exports = {
                 exclude: /node_modules/,
 
                 test: /\.js[x]?$/,
+            },
+
+            {
+                test: /\.css$/,
+                use: [
+                    { loader: "style-loader" },
+                    { loader: "css-loader" }
+                ]
             }
         ]
     }