Added Semantic-UI, code refactoring

Author: hipertracker

README.md

@@ -6,18 +6,19 @@ npm install
 
 Usage:
 
-```bash
-npm run-script serve
+```
+$ broccoli serve
 ```
 
 Open `http://localhost:4200`
 
-or
+If you like to use the build
 
 ```
-$ npm run-script bundle
+$ broccoli build dist
 $ http-server dist/
 ```
+
 and open `http://localhost:8080`
 
 Test:
@@ -26,14 +27,18 @@ Test:
 $ npm test
 ```
 
-* All JavaScript files are transpiled with 6to5 library with enabled experimental ES7 syntax (see: https://6to5.org/features.html).
-* For using experimental ES7 code in `Jest` tests, the project is using my fork of `6to5-jest`package (https://github.com/hipertracker/6to5-jest)
-* The workflow and communication between components is built using `Reflux` (https://github.com/spoike/refluxjs), a slighty modified (improved) Flux paradigm. See: http://blog.krawaller.se/posts/reflux-refinement/
+Currently just a simple example of using unit tests in React for files using ES6/ES7 syntax.
+
+Details
+
+* All JavaScript files are transpiled with [6to5](https://6to5.org/) library with enabled [experimental ES7 syntax](https://6to5.org/features.html).
+* For using experimental ES7 code in [Jest](http://facebook.github.io/jest/docs/tutorial-react.html) tests, the project is using [my fork](https://github.com/hipertracker/6to5-jest) of `6to5-jest` package.
+* The workflow and communication between components is built using [Reflux](https://github.com/spoike/refluxjs), a slighty [improved](http://blog.krawaller.se/posts/reflux-refinement/) Flux paradigm.
 * Unit testing is provided by `Jest` (https://facebook.github.io/jest/)
-* The example is using Bootstrap 3 React components thanks to `react-bootstrap` (http://react-bootstrap.github.io/).
+* Using [Semantic-UI](http://semantic-ui.com/) framework with React components ([react-semantify](http://react-components.com/component/react-semantify))
 
 Todo:
 
-* Add  more unit tests showing `Jest` testing ES5/ES7 code.
-* Add `Yeoman` project with options to choose SASS/Less/Stylus and Bootstrap/Semantic-UI
+* Add  more unit tests showing [Jest](http://facebook.github.io/jest/) testing ES5/ES7 code.
+* Add [Yeoman](http://yeoman.io/) project with options to choose SASS/Less/Stylus and Bootstrap/Semantic-UI
 

package.json

@@ -46,6 +46,8 @@
     "lodash": "^2.4.1",
     "react": "*",
     "react-router": "^0.11.6",
+    "react-semantify": "^0.2.2",
+    "reactify": "^0.17.1",
     "reflux": "*",
     "rimraf": "^2.2.8"
   }

src/app/components/About.js

@@ -1,11 +1,12 @@
 const React = require('react');
+const {Segment} = require('react-semantify');
 
 const About = React.createClass({
     render() {
         return (
-            <section>
+            <Segment>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula eros, sollicitudin nec libero non, cursus fringilla lectus. Aliquam volutpat velit feugiat pellentesque lobortis. Pellentesque pulvinar ornare ligula, sit amet imperdiet nibh tincidunt et. Suspendisse suscipit dolor vel turpis viverra ullamcorper. Fusce in enim elementum, hendrerit enim ut, pretium ipsum. Sed malesuada justo nec augue sodales, eu luctus dolor vulputate. Nunc ut consequat ipsum. Nam tempor fermentum risus at dictum. Sed et diam metus. Donec ac nisi suscipit, tristique enim sit amet, hendrerit ante. Pellentesque nec augue malesuada, ultrices dolor a, placerat ex. Pellentesque imperdiet feugiat nunc.
-            </section>
+            </Segment>
         )
     }
 });

src/app/components/App.js

@@ -1,6 +1,9 @@
 const React = require('react');
-const RouteHandler = require('react-router').RouteHandler;
-import Menu from './Menu';
+const ReactRouter = require('react-router')
+const {Menu, Segment} = require('react-semantify');
+
+let RouteHandler = ReactRouter.RouteHandler;
+let Link = ReactRouter.Link;
 
 const App = React.createClass({
     render() {
@@ -9,8 +12,20 @@ const App = React.createClass({
         };
         return (
             <section style={styles}>
-                <Menu/>
+                <Menu>
+                    <Link to="home" className="item">
+                        <i className="home icon"></i>
+                        Home
+                    </Link>
+                    <Link to="about" className="item">
+                        <i className="bomb icon"></i>
+                        About
+                    </Link>
+                </Menu>
                 <RouteHandler/>
+                <Segment>
+                    Git: <a href="https://github.com/hipertracker/react-es7">https://github.com/hipertracker/react-es7</a>
+                </Segment>
             </section>
         )
     }

src/app/components/Home.js

@@ -1,12 +1,13 @@
 const React = require('react');
 import UsefulLinks from './UsefulLinks';
+const {Segment} = require('react-semantify');
 
 const Home = React.createClass({
     render() {
         return (
-            <section>
-                <UsefulLinks title="Useful Links"/>
-            </section>
+            <Segment>
+                <UsefulLinks title="React useful links"/>
+            </Segment>
         )
     }
 });

src/app/components/Menu.js

@@ -34,11 +34,11 @@ const UsefulLinks = React.createClass({
         let style = m(styles.item, this.props.style);
         let items = this.state.links.map((item, key) =>
             <li key={key}>
-                <a href={item.url} target="_blank">{item.title}</a>
+            {item.title} (<a href={item.url} target="_blank">{item.url}</a>)
             </li>);
         return (
             <div>
-                <h4>{this.props.title}</h4>
+                <b>{this.props.title}</b>
                 <ul style={style}>{items}</ul>
             </div>
         );