UI

The boilerplate comes with Semantic UI pre-packaged mainly because we think it's got a nice look and good React library, that said you're not forced to use it or even keep it, in this entry we'll go over how to install a couple of alternatives in hopes that you can get to work faster.

Before moving on we'll assume this is a fresh installation and that you are sitting in the project's base directory.

Removing Semantic UI

Unless you want to keep both Semantic UI and a different UI library alongside one another, you'll want to first completely remove Semantic UI and the components and styles we've written for it.

First we uninstall and remove

npm uninstall semantic-ui-react semantic-ui-css # uninstall packages
rm -fr src/{main,pages}/components/* # remove the now incompatible components
rm -fr test/{main,pages}/components # remove the now incompatible tests
rm src/main/css/messages.css # remove css fix for floating alerts
cat /dev/null > src/css/global.css # remove the inclusion of Semantic UI

Then we write a new landing component and update routes:

// src/pages/components/Home.jsx
import React from 'react';

export default () => (
  <h1>Hello World</h1>
);

// src/pages/index.js
import Home from 'pages/components/Home';

export default { Home }

// src/main/index.js
import constants from './constants';
import reducer from './flux/reducer';

export { constants, reducer };

// src/routes.jsx
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Pages from 'pages';

import './css/global.css';

export default () => (
  <div className="wrapper">
    <Switch>
      <Route exact path="/" component={Pages.Home} />
    </Switch>
  </div>
);

That's it! you're now running a Semantic UI free boilerplate, the conflicting components and tests have been removed and we've kept the user alert reducer and actions.

Bootstrap

Assuming you've followed the steps in Removing Semantic UI, you only need to do this:

npm install react-bootstrap bootstrap-css-only react-router-bootstrap

Then load bootstrap css:

/* src/css/global.css */
@import "~bootstrap-css-only/css/bootstrap.min.css";

That's it, you know have bootstrap, to learn more about using the bootstrap JavaScript modules, check react-bootstrap and react-router-bootstrap

Material-UI

Assuming you've followed the steps in Removing Semantic UI, you only need to do this:

npm install @material-ui/core

That's it!, Material-UI injects any CSS needed.

Font Awesome

You don't need to uninstall Semantic UI for this, as this do not creates conflicts with the other UI libraries, to install Font Awesome do this:

npm install @fortawesome/fontawesome-free

Add the following to src/css/global.css

@import "~@fortawesome/fontawesome-free/css/all.min.css";

That's it! you are now able to use font awesome in react, just create an element like this:

<i className="fa fa-grin-tears" />