semantic-ui-react-todos

This project is the react-redux Todo List example modified to use semantic-ui components via the semantic-ui-react integration. It is meant as a variation on a well-known example project to familiarize ReactJS developers with the installation and use of Semantic UI.

This project was bootstrapped with Create React App.

Running

$ npm install
$ npm start

The server should be live at http://localhost:3000.

How to get from react-redux todos example to this project

Requirements

When trying to build Semantic-UI, I've only had success with npm@6, node@8, and gulp@3 due to version incompatibilities of Semantic-UI with gulp@4 and >node@8 with gulp@3. Hopefully these will get fixed upstream, but until then you may have to revert versions to work with Semantic-UI at all. Here's my working setup:

$ node --version
v8.16.0
$ npm --version
6.4.1
$ gulp --version
[12:29:54] CLI version 3.9.1
[12:29:54] Local version 3.9.1

The gulp version is specified in the package.json, but you may need to setup npm and node for your system.

Install semantic-ui and semantic-ui-react

$ npm install --save semantic-ui-react 
$ npm install --save-dev semantic-ui

Follow the prompts for the semantic-ui package, choosing the most customizable option, which saves to the project directory. There's also the option to leave the semantic/ directory in node_modules/, which would result in no additional project directory files at the expense of not being able to specify a different Semantic UI theme. With these files in the project directory, theme customization can be done in semantic/src/theme.config and semantic/src/themes/. See the Semantic UI usage docs for more information.

Build and link the Semantic UI dist/ files

Semantic UI uses the tool gulp to build. If you do not have it, you may want to install it globally. The following build steps must be done after every change to themes or other modifications to semantic itself.

$ (cd src/semantic && gulp build)

We must now link the newly generated CSS file as a dependency into src/index.js so that Webpack knows to bundle it:

In src/index.js, add:

import '../semantic/dist/semantic.min.css';

Replace desired components

The best way to understand this is to peek at the source files.

• src/components/Todo.js: The individual Todo items have been changed to Checkbox.
• src/components/Footer.js, src/components/Link.js: The filter links have been changed to Button and its subclasses.
• src/containers/AddTodo.js: The input box has been changed to Input, and the submit button has been changed to Button.

Notes

• The swap-out process was very painless. ReactJS itself has great separation of concerns, and this framework respects that a lot. Aside from installing the libraries, there wasn't anything that had to be done outside of the component-specific file.
• Caveat: Now we have more configuration files/folders to manage, but as discussed above, this isn't necessary and is simply a decision in the trade-off between customizability and configuration simplicity.
• Caveat: Because <input /> components are nested in the Semantic UI provided <div></div>s, ref= properties on Semantic UI input elements will not work as intended. See discussions and workarounds in this thread: Semantic-Org/Semantic-UI-React#405.

Overall, I'm very happy with this framework, and I think it will play nicely with other ReactJS components without any hitches. It will definitely save me development time.