The ReactJS/Redux Todo List Example with Semantic UI Components
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.
$ npm install
$ npm start
The server should be live at http://localhost:3000.
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.
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.
dist/
filesSemantic 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';
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
.<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: https://github.com/Semantic-Org/Semantic-UI-React/issues/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.