Skip to content

Commit d58351b

Browse files
hipertrackerhipertracker
committed
added implementation
1 parent c283e0e commit d58351b

File tree

18 files changed

+417
-4
lines changed

18 files changed

+417
-4
lines changed

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.idea
2+
node_modules
3+
.DS_Store
4+
tmp
5+
bower_components
6+
/dist/

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2015 Jaroslaw Zabiello
3+
Copyright (c) 2014 Jaroslaw Zabiello
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,29 @@
1-
react-es7-amd
2-
=============
1+
# react-es7-amd
2+
3+
This is an example of rebulding [hipertracker/react-es7](https://github.com/hipertracker/react-es7) project rebuild with pure AMD modules.
4+
5+
## Details
6+
7+
* All JavaScript files are transpiled with [6to5](https://6to5.org/) library with enabled [experimental ES7 syntax](https://6to5.org/features.html).
8+
* 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.
9+
* Using [Semantic-UI](http://semantic-ui.com/) framework with React components ([react-semantify](http://react-components.com/component/react-semantify)).
10+
11+
## Install
12+
13+
```
14+
bower install
15+
```
16+
17+
Usage:
18+
19+
```
20+
$ http-server
21+
```
22+
23+
Open `http://localhost:8080`
24+
25+
## Todo
26+
27+
* Add [RequireJS optimizer](http://requirejs.org/docs/optimization.html) to produce single, mangled, compressed file.
28+
* Add unit tests examples
329

4-
Example of AMD based project using React + Reflux + router + ES6 with experimental ES7 syntax + Semantic-UI

‎bower.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "react-es7-amd",
3+
"version": "0.0.1",
4+
"homepage": "https://github.com/hipertracker/react-es7-amd",
5+
"authors": [
6+
"Jaroslaw Zabiello <hipertracker@gmail.com>"
7+
],
8+
"description": "Example of AMD based project using React + Reflux + router + ES6 with experimental ES7 syntax + Semantic-UI",
9+
"main": "src/index.js",
10+
"license": "MIT",
11+
"private": true,
12+
"ignore": [
13+
"**/.*",
14+
"node_modules",
15+
"bower_components",
16+
"test",
17+
"tests"
18+
],
19+
"dependencies": {
20+
"jsx-requirejs-plugin": "*",
21+
"requirejs-text": "~2.0.12",
22+
"reflux": "*",
23+
"react-router": "*",
24+
"lodash": "~2.4.1",
25+
"semantic-ui": "~1.6.0",
26+
"font-awesome": "~4.2.0",
27+
"requirejs": "~2.1.15"
28+
}
29+
}

‎flux/Routes.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
define(function (require, exports, module) {
2+
var ReactRouter = require('react-router');
3+
var App = require('jsx!flux/components/App');
4+
var Home = require('jsx!flux/components/Home');
5+
var About = require('jsx!flux/components/About');
6+
7+
var Route = ReactRouter.Route
8+
var DefaultRoute = ReactRouter.DefaultRoute;
9+
10+
var routes = (
11+
<Route name="app" path="/" handler={App}>
12+
<Route name="home" handler={Home}/>
13+
<Route name="about" handler={About}/>
14+
<DefaultRoute handler={Home}/>
15+
</Route>
16+
);
17+
18+
ReactRouter.run(routes, function (Handler) {
19+
React.render(<Handler/>, document.getElementById('app'));
20+
});
21+
22+
});

‎flux/actions/LinksActions.jsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
define(function (require, exports, module) {
2+
var Reflux = require('reflux');
3+
4+
var LinksActions = Reflux.createActions([
5+
'loadData',
6+
'loadDataSuccess'
7+
]);
8+
9+
var data = [
10+
{
11+
url: 'http://facebook.github.io/react/',
12+
title: 'React home page'
13+
},
14+
{
15+
"url": "https://github.com/enaqx/awesome-react",
16+
"title": "A collection of awesome React libraries, resources and shiny things."
17+
},
18+
{
19+
"url": "https://reactjsnews.com/",
20+
"title": "ReactJS News and tutorials from the community"
21+
},
22+
{
23+
"url": "http://spoike.ghost.io/deconstructing-reactjss-flux/",
24+
"title": "Reflux - deconstructing ReactJS's Flux"
25+
},
26+
{
27+
"url": "https://github.com/echenley/react-news",
28+
"title": "Hacker News clone written in React + Reflux + Firebase"
29+
},
30+
{
31+
"url": "https://github.com/WRidder/react-spa",
32+
"title": "Community site SPA based on ReactJS + Reflux"
33+
},
34+
{
35+
"url": "http://react-components.com",
36+
"title": "Searchable database of React components"
37+
},
38+
{
39+
"url": "http://www.reactjsx.com/",
40+
"title": "Search reusable React components"
41+
},
42+
{
43+
"url": "http://formatjs.io/react/",
44+
"title": "React mixin for internationalization"
45+
},
46+
{
47+
"url": "http://isomorphic.net/",
48+
"title": "Isomorphic JavaScript - The future of web app development"
49+
},
50+
{
51+
"url": "https://code.tutsplus.com/courses/getting-started-with-reactjs",
52+
"title": "Getting Started With React.js [screencasts]"
53+
},
54+
{
55+
"url": "https://egghead.io/series/react-flux-architecture",
56+
"title": "React: Flux Architecture [screencasts]"
57+
},
58+
{
59+
"url": "https://www.facebook.com/groups/228321510706889/",
60+
"title": "ReactJS (Facebook group)"
61+
},
62+
{
63+
"url": "http://react-bootstrap.github.io/",
64+
"title": "Bootstrap 3 in React"
65+
},
66+
{
67+
"url": "http://react-components.com/component/react-semantify",
68+
"title": "Semantic-UI in React"
69+
},
70+
{
71+
"url": "https://github.com/sterpe/quantum-flux",
72+
"title": "https://github.com/sterpe/quantum-flux"
73+
},
74+
{
75+
"url": "http://react.rocks/",
76+
"title": "Collection of examples and tutorials"
77+
}
78+
];
79+
80+
81+
LinksActions.loadData.listen(function () {
82+
// here is the place for external communication with servers...
83+
LinksActions.loadDataSuccess.triggerAsync(data);
84+
});
85+
86+
module.exports = LinksActions;
87+
});
88+
89+

‎flux/components/About.jsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
define(function (require, exports, module) {
2+
var React = require('react');
3+
4+
var About = React.createClass({
5+
render() {
6+
return (
7+
<section>
8+
About
9+
</section>
10+
)
11+
}
12+
});
13+
14+
module.exports = About;
15+
});

‎flux/components/App.jsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
define(function (require, exports, module) {
2+
var React = require('react'),
3+
ReactRouter = require('react-router'),
4+
Menu = require('jsx!flux/components/Menu');
5+
6+
var RouteHandler = ReactRouter.RouteHandler;
7+
var App = React.createClass({
8+
render() {
9+
var styles = {
10+
margin: 10
11+
};
12+
return (
13+
<section style={styles}>
14+
<Menu/>
15+
<RouteHandler/>
16+
</section>
17+
)
18+
}
19+
});
20+
21+
module.exports = App;
22+
23+
});

‎flux/components/Home.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
define(function (require, exports, module) {
2+
var React = require('react'),
3+
UsefulLinks = require('jsx!flux/components/UsefulLinks');
4+
5+
var Home = React.createClass({
6+
render() {
7+
return (
8+
<section>
9+
<UsefulLinks title="Useful Links"/>
10+
</section>
11+
)
12+
}
13+
});
14+
15+
module.exports = Home;
16+
});

‎flux/components/Menu.jsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
define(function (require, exports, module) {
2+
var React = require('react'),
3+
ReactRouter = require('react-router');
4+
5+
var Link = ReactRouter.Link;
6+
7+
var Menu = React.createClass({
8+
render() {
9+
return (
10+
<div className="ui menu">
11+
<Link to="home" className="orange item">
12+
<i className="home icon"></i>
13+
Home
14+
</Link>
15+
<Link to="about" className="orange item">
16+
<i className="bomb icon"></i>
17+
About
18+
</Link>
19+
</div>
20+
)
21+
}
22+
});
23+
24+
module.exports = Menu;
25+
});
26+
27+
28+

0 commit comments

Comments
 (0)