Skip to content

Commit ac7f10c

Browse files
committed
Added react-router and Semantic-UI
1 parent 66c0635 commit ac7f10c

File tree

14 files changed

+154
-59
lines changed

14 files changed

+154
-59
lines changed

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.idea
22
node_modules
33
.DS_Store
4-
tmp
4+
tmp
5+
bower_components

Brocfile.js

Lines changed: 28 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,49 +8,36 @@ var compileSass = require('broccoli-sass');
88
var esTranspiler = require('broccoli-6to5-transpiler');
99

1010
var fastBrowserify = require('broccoli-fast-browserify');
11-
var browserify = require('broccoli-browserify');
1211

13-
//var uglifyJavaScript = require('broccoli-uglify-js');
1412
var uglifyJavaScript = require('broccoli-uglify-sourcemap');
1513

1614
var gzipFiles = require('broccoli-gzip');
1715

18-
1916
var staticFiles = new Funnel('src', {
2017
files: ['index.html']
2118
});
2219

23-
//var jqueryFiles = new Funnel('node_modules/jquery/dist/cdn', {
24-
// include: [
25-
// new RegExp(/\.min\.(js|map)$/),
26-
// ],
27-
// destDir: 'vendor/jquery'
28-
//});
29-
//var semantiUiFiles = new Funnel('node_modules/semantic-ui/dist', {
30-
// exclude: [new RegExp(/components/)],
31-
// include: [
32-
// new RegExp(/\.min\.(js|css)$/),
33-
// new RegExp(/themes/)
34-
// ],
35-
// destDir: 'vendor/semantic-ui'
36-
//});
37-
//var fontAwesomeFiles = new Funnel('node_modules/font-awesome', {
38-
// include: [
39-
// new RegExp(/min\.css$/),
40-
// new RegExp(/fonts/)
41-
// ],
42-
// destDir: 'vendor/font-awesome'
43-
//});
44-
45-
var bootstrapFiles = new Funnel('node_modules/bootstrap/dist', {
20+
var jqueryFiles = new Funnel('bower_components/jquery/dist', {
4621
include: [
47-
new RegExp(/css\/.+\.min\.css$/),
48-
new RegExp(/css\/.+\.map$/),
22+
new RegExp(/\.min\.(js|map)$/),
23+
],
24+
destDir: 'vendor/jquery'
25+
});
26+
var semanticUIFiles = new Funnel('bower_components/semantic-ui/dist', {
27+
include: [
28+
new RegExp(/\.min\.(js|css)$/),
29+
new RegExp(/themes/)
30+
],
31+
destDir: 'vendor/semantic-ui'
32+
});
33+
var fontAwesomeFiles = new Funnel('bower_components/font-awesome', {
34+
include: [
35+
new RegExp(/min\.css$/),
4936
new RegExp(/fonts/)
5037
],
51-
destDir: 'vendor/bootstrap'
38+
destDir: 'vendor/font-awesome'
5239
});
53-
vendorFiles = mergeTrees([bootstrapFiles]);
40+
vendorFiles = mergeTrees([jqueryFiles, semanticUIFiles, fontAwesomeFiles]);
5441

5542
var cssFiles = compileSass(['src'], 'styles/app.scss', 'styles/app.css');
5643

@@ -59,11 +46,19 @@ var jsFiles = new Funnel('src', {
5946
include: [new RegExp(/\.js$/)]
6047
});
6148
jsFiles = esTranspiler(jsFiles, {experimental: true});
62-
jsFiles = browserify(jsFiles, {
63-
entries: ['./index'],
64-
outputFile: 'index.js'
49+
//jsFiles = browserify(jsFiles, {
50+
// entries: ['./index'],
51+
// outputFile: 'index.js'
52+
//});
53+
jsFiles = fastBrowserify(jsFiles, {
54+
bundles: {
55+
'index.js': {
56+
entryPoints: ['**/index.js']
57+
}
58+
}
6559
});
6660

61+
6762
var env = require('broccoli-env').getEnv();
6863

6964
if (env === 'production') {

bower.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "react-es7",
3+
"version": "0.0.3",
4+
"homepage": "https://github.com/hipertracker/react-es7",
5+
"authors": [
6+
"Jaroslaw Zabiello <[email protected]>"
7+
],
8+
"description": "Example of using React + Reflux + ES6 with experimental ES7 syntax + Jest",
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+
}

package.json

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-es7",
3-
"version": "0.0.2",
4-
"description": "Example of using React + Reflux + ES6 with experimental ES7 syntax + Jest.",
3+
"version": "0.0.3",
4+
"description": "Example of using React + Reflux + ES6 with experimental ES7 syntax + Jest",
55
"main": "src/index.js",
66
"scripts": {
77
"test": "jest",
@@ -28,7 +28,6 @@
2828
"6to5-jest": "git://github.com/hipertracker/6to5-jest",
2929
"broccoli": "^0.13.3",
3030
"broccoli-6to5-transpiler": "^0.1.1",
31-
"broccoli-browserify": "^0.1.0",
3231
"broccoli-cli": "0.0.1",
3332
"broccoli-env": "0.0.1",
3433
"broccoli-fast-browserify": "^0.2.3",
@@ -44,10 +43,9 @@
4443
"jest-cli": "^0.2.1"
4544
},
4645
"dependencies": {
47-
"bootstrap": "^3.3.1",
4846
"lodash": "^2.4.1",
4947
"react": "*",
50-
"react-bootstrap": "^0.13.0",
48+
"react-router": "^0.11.6",
5149
"reflux": "*",
5250
"rimraf": "^2.2.8"
5351
}

src/app/components/About.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
let React = require('react');
2+
3+
let About = React.createClass({
4+
render() {
5+
return (
6+
<section>
7+
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.
8+
</section>
9+
)
10+
}
11+
});
12+
13+
export default About;

src/app/components/App.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
let React = require('react');
2-
import UsefulLinks from './UsefulLinks';
32

4-
var App = React.createClass({
3+
let RouteHandler = require('react-router').RouteHandler;
4+
5+
import Menu from './Menu';
6+
7+
let App = React.createClass({
58
render() {
69
let styles = {
7-
margin: 20
10+
margin: 10
811
};
912
return (
1013
<section style={styles}>
11-
<UsefulLinks title="Useful Links"/>
14+
<Menu/>
15+
<RouteHandler/>
1216
</section>
1317
)
1418
}

src/app/components/Home.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
let React = require('react');
2+
3+
import UsefulLinks from './UsefulLinks';
4+
5+
let Home = React.createClass({
6+
render() {
7+
return (
8+
<section>
9+
<UsefulLinks title="Useful Links"/>
10+
</section>
11+
)
12+
}
13+
});
14+
15+
export default Home;

src/app/components/Menu.js

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

src/app/components/UsefulLinks.js

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,6 @@ let UsefulLinks = React.createClass({
1212
propTypes: {
1313
title: T.string.isRequired
1414
},
15-
getDefaultProps() {
16-
return {
17-
title: 'Useful Links',
18-
style: {backgroundColor: 'white'}
19-
};
20-
},
2115
getInitialState() {
2216
return {
2317
links: []
@@ -35,7 +29,7 @@ let UsefulLinks = React.createClass({
3529
}
3630
let styles = {
3731
item: {
38-
paddingLeft: '10px'
32+
paddingLeft: 30
3933
}
4034
};
4135
let style = m(styles.item, this.props.style);
@@ -44,10 +38,10 @@ let UsefulLinks = React.createClass({
4438
<a href={item.url} target="_blank">{item.title}</a>
4539
</li>);
4640
return (
47-
<section>
41+
<div class="ui grid">
4842
<h4>{this.props.title}</h4>
4943
<ul style={style}>{items}</ul>
50-
</section>
44+
</div>
5145
);
5246
}
5347
});

src/app/lib/tools.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,20 @@ let React = require('react');
22
let _ = require('lodash');
33

44
// mounting a React component to a selector id location
5-
export function mount(component, location) {
5+
export function mount(component, location, argv = {}) {
66
if (!location) {
77
location = document.body;
88
} else {
99
location = document.getElementById(location);
1010
}
11-
React.render(React.createFactory(component)(), location);
11+
console.log('@argv', argv);
12+
console.log('@1', component);
13+
if (!React.isValidElement(component)) {
14+
console.log('@2', component);
15+
component = React.createFactory(component);
16+
console.log('@3', component);
17+
}
18+
React.render(component(argv), location);
1219
};
1320

1421
// merging properties, used in React component for aggregating styles

0 commit comments

Comments
 (0)