Skip to content

Commit d63ffc2

Browse files
author
mbouzi
committedMar 8, 2016
first commit
1 parent 0db89ae commit d63ffc2

File tree

6 files changed

+166
-0
lines changed

6 files changed

+166
-0
lines changed
 

‎README.md

+28
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 [Build Web Apps with React JS and Flux](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 dependencies, then start the gulp process with the following:
14+
15+
```
16+
> git clone https://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+
```

‎gulpfile.js

+86
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+
});

‎index.html

+9
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>

‎package.json

+27
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.14.3",
21+
"react-dom": "^0.14.3",
22+
"reactify": "^1.1.0",
23+
"vinyl-source-stream": "^1.1.0",
24+
"watchify": "^2.4.0"
25+
},
26+
"devDependencies": {}
27+
}

‎sass/style.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.black {
2+
color: black
3+
}

‎src/app.jsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
var React = require('react');
2+
var ReactDOM = require('react-dom');
3+
4+
var Hello = React.createClass({
5+
render: function() {
6+
return <h1 className="red">
7+
Hello!
8+
</h1>
9+
}
10+
});
11+
12+
var element = React.createElement(Hello, {});
13+
ReactDOM.render(element, document.querySelector('.container'));

0 commit comments

Comments
 (0)
Please sign in to comment.