Skip to content

Commit 3ea1d06

Browse files
StephenGriderStephenGrider
committed
Flux - 4 - React Router Demo
1 parent 6ff8591 commit 3ea1d06

File tree

7 files changed

+193
-0
lines changed

7 files changed

+193
-0
lines changed

‎imgur-client/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/
2+
main.js
3+
style.css

‎imgur-client/README.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
ReactStarter
2+
====
3+
4+
Use this as a starting point for working on chapters of the [Learn and Understand React JS](https://www.udemy.com/learn-and-understand-reactjs/) course on Udemy.com.
5+
6+
---
7+
8+
###Getting Started###
9+
10+
There are two methods for getting started with this repo.
11+
12+
####Familiar with Git?#####
13+
Checkout this repo, install depdencies, then start the gulp process with the following:
14+
15+
```
16+
> git clone git@github.com:StephenGrider/ReactStarter.git
17+
> cd ReactStarter
18+
> npm install
19+
> gulp
20+
```
21+
22+
####Not Familiar with Git?#####
23+
Click [here](https://github.com/StephenGrider/ReactStarter/releases) then download the .zip file. Extract the contents of the zip file, then open your terminal, change to the project directory, and:
24+
25+
```
26+
> npm install
27+
> gulp
28+
```

‎imgur-client/gulpfile.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
var gulp = require('gulp');
2+
var gutil = require('gulp-util');
3+
var source = require('vinyl-source-stream');
4+
var browserify = require('browserify');
5+
var watchify = require('watchify');
6+
var reactify = require('reactify');
7+
var notifier = require('node-notifier');
8+
var server = require('gulp-server-livereload');
9+
var concat = require('gulp-concat');
10+
var sass = require('gulp-sass');
11+
var watch = require('gulp-watch');
12+
13+
var notify = function(error) {
14+
var message = 'In: ';
15+
var title = 'Error: ';
16+
17+
if(error.description) {
18+
title += error.description;
19+
} else if (error.message) {
20+
title += error.message;
21+
}
22+
23+
if(error.filename) {
24+
var file = error.filename.split('/');
25+
message += file[file.length-1];
26+
}
27+
28+
if(error.lineNumber) {
29+
message += '\nOn Line: ' + error.lineNumber;
30+
}
31+
32+
notifier.notify({title: title, message: message});
33+
};
34+
35+
var bundler = watchify(browserify({
36+
entries: ['./src/app.jsx'],
37+
transform: [reactify],
38+
extensions: ['.jsx'],
39+
debug: true,
40+
cache: {},
41+
packageCache: {},
42+
fullPaths: true
43+
}));
44+
45+
function bundle() {
46+
return bundler
47+
.bundle()
48+
.on('error', notify)
49+
.pipe(source('main.js'))
50+
.pipe(gulp.dest('./'))
51+
}
52+
bundler.on('update', bundle)
53+
54+
gulp.task('build', function() {
55+
bundle()
56+
});
57+
58+
gulp.task('serve', function(done) {
59+
gulp.src('')
60+
.pipe(server({
61+
livereload: {
62+
enable: true,
63+
filter: function(filePath, cb) {
64+
if(/main.js/.test(filePath)) {
65+
cb(true)
66+
} else if(/style.css/.test(filePath)){
67+
cb(true)
68+
}
69+
}
70+
},
71+
open: true
72+
}));
73+
});
74+
75+
gulp.task('sass', function () {
76+
gulp.src('./sass/**/*.scss')
77+
.pipe(sass().on('error', sass.logError))
78+
.pipe(concat('style.css'))
79+
.pipe(gulp.dest('./'));
80+
});
81+
82+
gulp.task('default', ['build', 'serve', 'sass', 'watch']);
83+
84+
gulp.task('watch', function () {
85+
gulp.watch('./sass/**/*.scss', ['sass']);
86+
});

‎imgur-client/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<head>
2+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
3+
<link rel="stylesheet" href="style.css">
4+
</head>
5+
<body>
6+
<div class="container">
7+
</div>
8+
</body>
9+
<script src="main.js"></script>

‎imgur-client/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "react-starter",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"scripts": {
6+
"test": "echo \"Error: no test specified\" && exit 1"
7+
},
8+
"author": "",
9+
"license": "ISC",
10+
"dependencies": {
11+
"browserify": "^9.0.3",
12+
"gulp": "^3.8.11",
13+
"gulp-concat": "^2.5.2",
14+
"gulp-react": "^3.0.1",
15+
"gulp-sass": "^2.0.1",
16+
"gulp-server-livereload": "^1.3.0",
17+
"gulp-util": "^3.0.4",
18+
"gulp-watch": "^4.2.4",
19+
"node-notifier": "^4.2.1",
20+
"react": "^0.13.3",
21+
"react-router": "^1.0.0-beta2",
22+
"reactify": "^1.1.0",
23+
"vinyl-source-stream": "^1.1.0",
24+
"watchify": "^2.4.0"
25+
},
26+
"devDependencies": {}
27+
}

‎imgur-client/sass/style.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.black {
2+
color: black
3+
}

‎imgur-client/src/app.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
var React = require('react');
2+
var ReactRouter = require('react-router');
3+
var HashHistory = require('react-router/lib/hashhistory');
4+
var Router = ReactRouter.Router;
5+
var Route = ReactRouter.Route;
6+
7+
var Hello = React.createClass({
8+
render: function() {
9+
return <h1 className="red">
10+
{this.props.children}
11+
</h1>
12+
}
13+
});
14+
15+
var Child1 = React.createClass({
16+
render: function() {
17+
return <h1>I'm child1</h1>
18+
}
19+
});
20+
21+
var Child2 = React.createClass({
22+
render: function() {
23+
return <h1>I'm the other child, Child2.</h1>
24+
}
25+
})
26+
27+
var routes = (
28+
<Router history={new HashHistory}>
29+
<Route path="/" component={Hello}>
30+
<Route path="1" component={Child1} />
31+
<Route path="2" component={Child2} />
32+
</Route>
33+
</Router>
34+
)
35+
36+
// var element = React.createElement(Hello, {});
37+
React.render(routes, document.querySelector('.container'));

0 commit comments

Comments
 (0)