https://github.com/wyc/semantic-ui-react-todos
The ReactJS/Redux Todo List Example with Semantic UI Components
https://github.com/wyc/semantic-ui-react-todos
react-redux reactjs semantic-ui semantic-ui-react
Last synced: 3 months ago
JSON representation
The ReactJS/Redux Todo List Example with Semantic UI Components
- Host: GitHub
- URL: https://github.com/wyc/semantic-ui-react-todos
- Owner: wyc
- License: mit
- Created: 2017-03-08T22:24:48.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T10:14:54.000Z (over 2 years ago)
- Last Synced: 2024-07-31T19:38:38.089Z (11 months ago)
- Topics: react-redux, reactjs, semantic-ui, semantic-ui-react
- Language: JavaScript
- Homepage:
- Size: 6.11 MB
- Stars: 95
- Watchers: 5
- Forks: 32
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# semantic-ui-react-todos
This project is the [react-redux Todo List example](https://github.com/reactjs/redux/tree/master/examples/todos) modified to use [semantic-ui](http://semantic-ui.com) components via the [semantic-ui-react](http://react.semantic-ui.com) 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](https://github.com/facebookincubator/create-react-app).
## Running
```bash
$ npm install
$ npm start
```
The server should be live at .
## 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`](https://github.com/Semantic-Org/Semantic-UI/issues/6705) and [`>node@8` with `gulp@3`](https://github.com/nodejs/node/issues/19786).
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`
```bash
$ 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](http://react.semantic-ui.com/usage) 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](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md). The following build steps must be done after every change to themes or other modifications to `semantic` itself.
```bash
$ (cd src/semantic && gulp build)
```
We must now link the newly generated CSS file as a dependency into `src/index.js` so that [Webpack](https://webpack.github.io/) knows to bundle it:
In `src/index.js`, add:
```js
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`](http://react.semantic-ui.com/modules/checkbox).
- `src/components/Footer.js`, `src/components/Link.js`: The filter links have been changed to [`Button`](http://react.semantic-ui.com/elements/button) and its subclasses.
- `src/containers/AddTodo.js`: The input box has been changed to [`Input`](http://react.semantic-ui.com/elements/input), and the submit button has been changed to [`Button`](http://react.semantic-ui.com/elements/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 `` components are nested in the Semantic UI provided `
`s, [`ref=` properties](https://facebook.github.io/react/docs/refs-and-the-dom.html) on Semantic UI input elements will not work as intended. See discussions and workarounds in this thread: .
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.