├── .gitignore
├── README.md
├── gulpfile.js
├── index.html
├── package.json
├── sass
└── style.scss
└── src
└── app.jsx
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | main.js
3 | style.css
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
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 | ```
29 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
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 | });
87 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
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 | }
28 |
--------------------------------------------------------------------------------
/sass/style.scss:
--------------------------------------------------------------------------------
1 | .black {
2 | color: black
3 | }
4 |
--------------------------------------------------------------------------------
/src/app.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var ReactDOM = require('react-dom');
3 |
4 | var Hello = React.createClass({
5 | render: function() {
6 | return
7 | Hello!
8 |
9 | }
10 | });
11 |
12 | var element = React.createElement(Hello, {});
13 | ReactDOM.render(element, document.querySelector('.container'));
14 |
--------------------------------------------------------------------------------