├── .gitignore
├── README.md
├── gulpfile.js
├── package.json
└── src
    ├── App.js
    ├── components
        ├── Child.js
        └── Parent.js
    ├── index.html
    └── styles
        └── main.css


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # reactStarterKit
 2 | Get started fast!
 3 | 
 4 | [Intro Slides](https://docs.google.com/presentation/d/1zahFpbsm4Gt_Ev6ehCxUBTz0KNYuMzIzDO4WCzy8R04/edit?usp=sharing)
 5 | 
 6 | 1. Star and Fork the repo
 7 | 2. Open your terminal, `cd` into desired directory
 8 | 3. run `npm install -g react-tools`
 9 | 4. run `git clone https://github.com/<your-branch>/reactStarterKit.git`
10 | 5. run `npm install`
11 | 6. run `gulp`
12 | 7. open your index.html file located in your dist folder in your browser and see you application!
13 | 
14 | 
15 | NOTE:
16 | -only make edits to components in src, do not make edits to anything is dist
17 | -make sure you are opening index file in dist folder
18 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var browserify = require('gulp-browserify');
 3 | var concat = require('gulp-concat');
 4 | var babel = require('gulp-babel');
 5 | var sourcemaps = require('gulp-sourcemaps');
 6 | var rimraf = require('gulp-rimraf');
 7 | var runSequence = require('run-sequence');
 8 | 
 9 | 
10 | gulp.task('browserify', function(){
11 |   gulp.src('src/App.js')
12 |     .pipe(browserify({transform: 'reactify'}))
13 |     .pipe(concat('App.js'))
14 |     .pipe(gulp.dest('dist'));
15 | });
16 | 
17 | gulp.task('clean', function() {
18 |   return gulp.src('./dist/**/*.*', {read: false}) // much faster
19 |     .pipe(rimraf());
20 | });
21 | 
22 | gulp.task('copy', function(){
23 |   gulp.src('src/index.html')
24 |     .pipe(gulp.dest('dist'));
25 |   gulp.src('src/styles/*.css')
26 |     .pipe(gulp.dest('dist/styles'));
27 | });
28 | 
29 | gulp.task('watch', function(){
30 |   gulp.watch('src/**/*.*', ['default']);
31 | });
32 | 
33 | gulp.task('default', function(cb) {
34 |   runSequence('clean', 'browserify', 'copy', 'watch', cb);
35 | });
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "React-Starter-Kit",
 3 |   "version": "0.0.0",
 4 |   "description": "Get started with react fast!",
 5 |   "author": "Jake Obron <jbobron@gmail.com>",
 6 |   "bin": {
 7 |     "module-name": "./bin/module-name"
 8 |   },
 9 |   "private": true,
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/jbobron/reactStarterKit"
13 |   },
14 |   "keywords": [],
15 |   "dependencies": {
16 |     "flux": "^2.0.3",
17 |     "react": "^0.13.3"
18 |   },
19 |   "devDependencies": {
20 |     "browserify": "^10.1.3",
21 |     "gulp": "^3.8.11",
22 |     "gulp-babel": "^5.1.0",
23 |     "gulp-browserify": "^0.5.1",
24 |     "gulp-concat": "^2.5.2",
25 |     "gulp-html-replace": "^1.4.5",
26 |     "gulp-react": "^3.0.1",
27 |     "gulp-rimraf": "^0.1.1",
28 |     "gulp-sourcemaps": "^1.5.2",
29 |     "gulp-streamify": "0.0.5",
30 |     "gulp-uglify": "^1.2.0",
31 |     "reactify": "^1.1.1",
32 |     "run-sequence": "^1.1.0",
33 |     "vinyl-source-stream": "^1.1.0",
34 |     "watchify": "^3.2.1"
35 |   },
36 |   "preferGlobal": true,
37 |   "publishConfig": {
38 |     "registry": "https://your-private-hosted-npm.registry.nodejitsu.com"
39 |   },
40 |   "subdomain": "foobar",
41 |   "analyze": true,
42 |   "license": "MIT"
43 | }
44 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var Parent = require('./components/Parent');
3 | 
4 | React.render(<Parent />, document.getElementById('app'));


--------------------------------------------------------------------------------
/src/components/Child.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | 
 3 | var ShowList = React.createClass({
 4 |   render: function(){
 5 |     var listItems = this.props.names.map(function(friend){
 6 |       return <li> {friend} </li>;
 7 |     });
 8 |     return (
 9 |       <div>
10 |         <h3> Friends </h3>
11 |         <ul>
12 |           {listItems}
13 |         </ul>
14 |       </div>
15 |     )
16 |   }
17 | });
18 | 
19 | module.exports = ShowList;


--------------------------------------------------------------------------------
/src/components/Parent.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var ShowList = require('./Child');
 3 | 
 4 | var FriendsContainer = React.createClass({
 5 |   getInitialState: function(){
 6 |     return {
 7 |       name: 'Steph Curry',
 8 |       friends: ['Klay Thompson', 'Draymond Green', 'Andre Iguodala']
 9 |     }
10 |   },
11 |   render: function(){
12 |     return (
13 |       <div>
14 |         <h1> React Starter Kit! </h1>
15 |         <h3> Name: {this.state.name} </h3>
16 |         <ShowList names={this.state.friends} />
17 |       </div>
18 |     )
19 |   }
20 | });
21 | 
22 | module.exports = FriendsContainer;


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>React Vids</title>
 6 |   <link rel="stylesheet" href="styles/main.css">
 7 | </head>
 8 | <body>
 9 |   <div id="app"></div>
10 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
11 |    <!-- build:js -->
12 |    <script async src="App.js"></script>
13 |    <!-- endbuild -->
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/src/styles/main.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jbobron/reactStarterKit/5536546073cf4d68065157c7552c8d1520bfb0f5/src/styles/main.css


--------------------------------------------------------------------------------