├── .gitignore ├── code ├── chapter01 │ └── snapterest │ │ ├── source │ │ ├── app.js │ │ └── components │ │ │ └── .empty │ │ ├── gulpfile.js │ │ ├── package.json │ │ └── build │ │ ├── index.html │ │ └── snapterest.js ├── chapter02 │ └── snapterest │ │ ├── source │ │ ├── components │ │ │ └── .empty │ │ └── app.js │ │ ├── gulpfile.js │ │ ├── build │ │ └── index.html │ │ └── package.json ├── README.md ├── chapter09 │ └── snapterest │ │ ├── source │ │ ├── dispatcher │ │ │ └── AppDispatcher.js │ │ ├── utils │ │ │ ├── TweetUtils.js │ │ │ ├── CollectionUtils.js │ │ │ └── __tests__ │ │ │ │ ├── TweetUtils-test.js │ │ │ │ └── CollectionUtils-test.js │ │ ├── app.js │ │ ├── actions │ │ │ └── TweetActionCreators.js │ │ ├── components │ │ │ ├── Button.react.js │ │ │ ├── Header.react.js │ │ │ ├── CollectionExportForm.react.js │ │ │ ├── __tests__ │ │ │ │ ├── Button-test.js │ │ │ │ └── Header-test.js │ │ │ ├── Stream.react.js │ │ │ ├── TweetList.react.js │ │ │ ├── Tweet.react.js │ │ │ ├── Application.react.js │ │ │ ├── Collection.react.js │ │ │ ├── CollectionRenameForm.react.js │ │ │ ├── CollectionControls.react.js │ │ │ └── StreamTweet.react.js │ │ └── stores │ │ │ └── TweetStore.js │ │ ├── gulpfile.js │ │ ├── build │ │ └── index.html │ │ └── package.json ├── chapter10 │ └── snapterest │ │ ├── source │ │ ├── dispatcher │ │ │ └── AppDispatcher.js │ │ ├── utils │ │ │ ├── TweetUtils.js │ │ │ ├── WebAPIUtils.js │ │ │ ├── CollectionUtils.js │ │ │ └── __tests__ │ │ │ │ ├── TweetUtils-test.js │ │ │ │ └── CollectionUtils-test.js │ │ ├── app.js │ │ ├── actions │ │ │ ├── TweetActionCreators.js │ │ │ └── CollectionActionCreators.js │ │ ├── components │ │ │ ├── Button.react.js │ │ │ ├── Header.react.js │ │ │ ├── CollectionExportForm.react.js │ │ │ ├── Application.react.js │ │ │ ├── __tests__ │ │ │ │ ├── Button-test.js │ │ │ │ └── Header-test.js │ │ │ ├── Stream.react.js │ │ │ ├── Tweet.react.js │ │ │ ├── TweetList.react.js │ │ │ ├── Collection.react.js │ │ │ ├── CollectionControls.react.js │ │ │ ├── CollectionRenameForm.react.js │ │ │ └── StreamTweet.react.js │ │ └── stores │ │ │ ├── TweetStore.js │ │ │ └── CollectionStore.js │ │ ├── gulpfile.js │ │ ├── build │ │ └── index.html │ │ └── package.json ├── chapter08 │ └── snapterest │ │ ├── source │ │ ├── utils │ │ │ ├── TweetUtils.js │ │ │ ├── CollectionUtils.js │ │ │ └── __tests__ │ │ │ │ ├── TweetUtils-test.js │ │ │ │ └── CollectionUtils-test.js │ │ ├── app.js │ │ └── components │ │ │ ├── Button.react.js │ │ │ ├── Header.react.js │ │ │ ├── CollectionExportForm.react.js │ │ │ ├── __tests__ │ │ │ ├── Button-test.js │ │ │ └── Header-test.js │ │ │ ├── Stream.react.js │ │ │ ├── TweetList.react.js │ │ │ ├── Tweet.react.js │ │ │ ├── Application.react.js │ │ │ ├── Collection.react.js │ │ │ ├── CollectionRenameForm.react.js │ │ │ ├── CollectionControls.react.js │ │ │ └── StreamTweet.react.js │ │ ├── gulpfile.js │ │ ├── build │ │ └── index.html │ │ └── package.json ├── chapter04 │ └── snapterest │ │ ├── source │ │ ├── app.js │ │ └── components │ │ │ └── Application.react.js │ │ ├── gulpfile.js │ │ ├── build │ │ └── index.html │ │ └── package.json ├── chapter05 │ └── snapterest │ │ ├── source │ │ ├── app.js │ │ └── components │ │ │ ├── Stream.react.js │ │ │ ├── Application.react.js │ │ │ └── StreamTweet.react.js │ │ ├── gulpfile.js │ │ ├── build │ │ └── index.html │ │ └── package.json ├── chapter06 │ └── snapterest │ │ ├── source │ │ ├── app.js │ │ └── components │ │ │ ├── Header.react.js │ │ │ ├── Stream.react.js │ │ │ ├── Tweet.react.js │ │ │ ├── Application.react.js │ │ │ ├── Collection.react.js │ │ │ └── StreamTweet.react.js │ │ ├── gulpfile.js │ │ ├── build │ │ └── index.html │ │ └── package.json ├── chapter07 │ └── snapterest │ │ ├── source │ │ ├── app.js │ │ └── components │ │ │ ├── Button.react.js │ │ │ ├── Header.react.js │ │ │ ├── CollectionExportForm.react.js │ │ │ ├── Stream.react.js │ │ │ ├── TweetList.react.js │ │ │ ├── Tweet.react.js │ │ │ ├── Application.react.js │ │ │ ├── Collection.react.js │ │ │ ├── CollectionRenameForm.react.js │ │ │ ├── CollectionControls.react.js │ │ │ └── StreamTweet.react.js │ │ ├── gulpfile.js │ │ ├── build │ │ └── index.html │ │ └── package.json └── chapter03 │ ├── stateless-component.js │ └── stateful-component.js ├── update.sh ├── book-cover.jpg ├── artemij_snapchat.jpg ├── artemij_fedosejev.jpg ├── how-to-deploy.md ├── updates.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /code/chapter01/snapterest/source/app.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /code/chapter01/snapterest/source/components/.empty: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /code/chapter02/snapterest/source/components/.empty: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /update.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | git add . 4 | git commit -m "Update" 5 | git push -------------------------------------------------------------------------------- /book-cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fedosejev/react-essentials/HEAD/book-cover.jpg -------------------------------------------------------------------------------- /artemij_snapchat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fedosejev/react-essentials/HEAD/artemij_snapchat.jpg -------------------------------------------------------------------------------- /artemij_fedosejev.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fedosejev/react-essentials/HEAD/artemij_fedosejev.jpg -------------------------------------------------------------------------------- /code/README.md: -------------------------------------------------------------------------------- 1 | ## React.js Essentials code 2 | 3 | Here you will find the latest version of the source code files for the book. -------------------------------------------------------------------------------- /code/chapter09/snapterest/source/dispatcher/AppDispatcher.js: -------------------------------------------------------------------------------- 1 | var Dispatcher = require('flux').Dispatcher; 2 | 3 | module.exports = new Dispatcher(); -------------------------------------------------------------------------------- /code/chapter10/snapterest/source/dispatcher/AppDispatcher.js: -------------------------------------------------------------------------------- 1 | var Dispatcher = require('flux').Dispatcher; 2 | 3 | module.exports = new Dispatcher(); -------------------------------------------------------------------------------- /code/chapter08/snapterest/source/utils/TweetUtils.js: -------------------------------------------------------------------------------- 1 | function getListOfTweetIds(tweets) { 2 | return Object.keys(tweets); 3 | } 4 | 5 | module.exports.getListOfTweetIds = getListOfTweetIds; -------------------------------------------------------------------------------- /code/chapter09/snapterest/source/utils/TweetUtils.js: -------------------------------------------------------------------------------- 1 | function getListOfTweetIds(tweets) { 2 | return Object.keys(tweets); 3 | } 4 | 5 | module.exports.getListOfTweetIds = getListOfTweetIds; -------------------------------------------------------------------------------- /code/chapter10/snapterest/source/utils/TweetUtils.js: -------------------------------------------------------------------------------- 1 | function getListOfTweetIds(tweets) { 2 | return Object.keys(tweets); 3 | } 4 | 5 | module.exports.getListOfTweetIds = getListOfTweetIds; -------------------------------------------------------------------------------- /code/chapter04/snapterest/source/app.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | 4 | var Application = require('./components/Application.react'); 5 | 6 | ReactDOM.render(, document.getElementById('react-application')); -------------------------------------------------------------------------------- /code/chapter05/snapterest/source/app.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | 4 | var Application = require('./components/Application.react'); 5 | 6 | ReactDOM.render(, document.getElementById('react-application')); -------------------------------------------------------------------------------- /code/chapter06/snapterest/source/app.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | 4 | var Application = require('./components/Application.react'); 5 | 6 | ReactDOM.render(, document.getElementById('react-application')); -------------------------------------------------------------------------------- /code/chapter07/snapterest/source/app.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | 4 | var Application = require('./components/Application.react'); 5 | 6 | ReactDOM.render(, document.getElementById('react-application')); -------------------------------------------------------------------------------- /code/chapter08/snapterest/source/app.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | 4 | var Application = require('./components/Application.react'); 5 | 6 | ReactDOM.render(, document.getElementById('react-application')); -------------------------------------------------------------------------------- /code/chapter09/snapterest/source/app.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | 4 | var Application = require('./components/Application.react'); 5 | 6 | ReactDOM.render(, document.getElementById('react-application')); -------------------------------------------------------------------------------- /code/chapter10/snapterest/source/app.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | 4 | var Application = require('./components/Application.react'); 5 | var WebAPIUtils = require('./utils/WebAPIUtils'); 6 | 7 | WebAPIUtils.initializeStreamOfTweets(); 8 | 9 | ReactDOM.render(, document.getElementById('react-application')); -------------------------------------------------------------------------------- /code/chapter09/snapterest/source/actions/TweetActionCreators.js: -------------------------------------------------------------------------------- 1 | var AppDispatcher = require('../dispatcher/AppDispatcher'); 2 | 3 | function receiveTweet(tweet) { 4 | var action = { 5 | type: 'receive_tweet', 6 | tweet: tweet 7 | }; 8 | 9 | AppDispatcher.dispatch(action); 10 | } 11 | 12 | module.exports = { 13 | receiveTweet: receiveTweet 14 | }; -------------------------------------------------------------------------------- /code/chapter10/snapterest/source/actions/TweetActionCreators.js: -------------------------------------------------------------------------------- 1 | var AppDispatcher = require('../dispatcher/AppDispatcher'); 2 | 3 | function receiveTweet(tweet) { 4 | var action = { 5 | type: 'receive_tweet', 6 | tweet: tweet 7 | }; 8 | 9 | AppDispatcher.dispatch(action); 10 | } 11 | 12 | module.exports = { 13 | receiveTweet: receiveTweet 14 | }; -------------------------------------------------------------------------------- /code/chapter10/snapterest/source/utils/WebAPIUtils.js: -------------------------------------------------------------------------------- 1 | var SnapkiteStreamClient = require('snapkite-stream-client'); 2 | var TweetActionCreators = require('../actions/TweetActionCreators'); 3 | 4 | function initializeStreamOfTweets() { 5 | SnapkiteStreamClient.initializeStream(TweetActionCreators.receiveTweet); 6 | } 7 | 8 | module.exports = { 9 | initializeStreamOfTweets: initializeStreamOfTweets 10 | }; -------------------------------------------------------------------------------- /code/chapter01/snapterest/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserify = require('browserify'); 3 | var babelify = require('babelify'); 4 | var source = require('vinyl-source-stream'); 5 | 6 | gulp.task('default', function () { 7 | return browserify('./source/app.js') 8 | .transform(babelify) 9 | .bundle() 10 | .pipe(source('snapterest.js')) 11 | .pipe(gulp.dest('./build/')); 12 | }); -------------------------------------------------------------------------------- /code/chapter02/snapterest/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserify = require('browserify'); 3 | var babelify = require('babelify'); 4 | var source = require('vinyl-source-stream'); 5 | 6 | gulp.task('default', function () { 7 | return browserify('./source/app.js') 8 | .transform(babelify) 9 | .bundle() 10 | .pipe(source('snapterest.js')) 11 | .pipe(gulp.dest('./build/')); 12 | }); -------------------------------------------------------------------------------- /code/chapter04/snapterest/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserify = require('browserify'); 3 | var babelify = require('babelify'); 4 | var source = require('vinyl-source-stream'); 5 | 6 | gulp.task('default', function () { 7 | return browserify('./source/app.js') 8 | .transform(babelify) 9 | .bundle() 10 | .pipe(source('snapterest.js')) 11 | .pipe(gulp.dest('./build/')); 12 | }); -------------------------------------------------------------------------------- /code/chapter05/snapterest/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserify = require('browserify'); 3 | var babelify = require('babelify'); 4 | var source = require('vinyl-source-stream'); 5 | 6 | gulp.task('default', function () { 7 | return browserify('./source/app.js') 8 | .transform(babelify) 9 | .bundle() 10 | .pipe(source('snapterest.js')) 11 | .pipe(gulp.dest('./build/')); 12 | }); -------------------------------------------------------------------------------- /code/chapter06/snapterest/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserify = require('browserify'); 3 | var babelify = require('babelify'); 4 | var source = require('vinyl-source-stream'); 5 | 6 | gulp.task('default', function () { 7 | return browserify('./source/app.js') 8 | .transform(babelify) 9 | .bundle() 10 | .pipe(source('snapterest.js')) 11 | .pipe(gulp.dest('./build/')); 12 | }); -------------------------------------------------------------------------------- /code/chapter07/snapterest/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserify = require('browserify'); 3 | var babelify = require('babelify'); 4 | var source = require('vinyl-source-stream'); 5 | 6 | gulp.task('default', function () { 7 | return browserify('./source/app.js') 8 | .transform(babelify) 9 | .bundle() 10 | .pipe(source('snapterest.js')) 11 | .pipe(gulp.dest('./build/')); 12 | }); -------------------------------------------------------------------------------- /code/chapter08/snapterest/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserify = require('browserify'); 3 | var babelify = require('babelify'); 4 | var source = require('vinyl-source-stream'); 5 | 6 | gulp.task('default', function () { 7 | return browserify('./source/app.js') 8 | .transform(babelify) 9 | .bundle() 10 | .pipe(source('snapterest.js')) 11 | .pipe(gulp.dest('./build/')); 12 | }); -------------------------------------------------------------------------------- /code/chapter09/snapterest/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserify = require('browserify'); 3 | var babelify = require('babelify'); 4 | var source = require('vinyl-source-stream'); 5 | 6 | gulp.task('default', function () { 7 | return browserify('./source/app.js') 8 | .transform(babelify) 9 | .bundle() 10 | .pipe(source('snapterest.js')) 11 | .pipe(gulp.dest('./build/')); 12 | }); -------------------------------------------------------------------------------- /code/chapter10/snapterest/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserify = require('browserify'); 3 | var babelify = require('babelify'); 4 | var source = require('vinyl-source-stream'); 5 | 6 | gulp.task('default', function () { 7 | return browserify('./source/app.js') 8 | .transform(babelify) 9 | .bundle() 10 | .pipe(source('snapterest.js')) 11 | .pipe(gulp.dest('./build/')); 12 | }); -------------------------------------------------------------------------------- /code/chapter02/snapterest/source/app.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | 4 | var listOfItems =
    5 |
  • Item 1
    • 6 |
  • Item 2
    • 7 |
  • Item 3
    • 8 |
; 9 | 10 | ReactDOM.render(listOfItems, document.getElementById('react-application')); -------------------------------------------------------------------------------- /code/chapter01/snapterest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "snapterest", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "babelify": "^6.2.0", 13 | "browserify": "^11.0.1", 14 | "gulp": "^3.9.0", 15 | "vinyl-source-stream": "^1.1.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /code/chapter03/stateless-component.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | 4 | var ReactClass = React.createClass({ 5 | render: function () { 6 | return React.createElement('h1', { className: 'header' }, 'React Component'); 7 | } 8 | }); 9 | 10 | var reactComponentElement = React.createElement(ReactClass); 11 | var reactComponent = ReactDOM.render(reactComponentElement, document.getElementById('react-application')); -------------------------------------------------------------------------------- /code/chapter07/snapterest/source/components/Button.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var buttonStyle = { 4 | margin: '10px 10px 10px 0' 5 | }; 6 | 7 | var Button = React.createClass({ 8 | render: function () { 9 | return ( 10 | 14 | ); 15 | } 16 | }); 17 | 18 | module.exports = Button; -------------------------------------------------------------------------------- /code/chapter08/snapterest/source/components/Button.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var buttonStyle = { 4 | margin: '10px 10px 10px 0' 5 | }; 6 | 7 | var Button = React.createClass({ 8 | render: function () { 9 | return ( 10 | 14 | ); 15 | } 16 | }); 17 | 18 | module.exports = Button; -------------------------------------------------------------------------------- /code/chapter09/snapterest/source/components/Button.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var buttonStyle = { 4 | margin: '10px 10px 10px 0' 5 | }; 6 | 7 | var Button = React.createClass({ 8 | render: function () { 9 | return ( 10 | 14 | ); 15 | } 16 | }); 17 | 18 | module.exports = Button; -------------------------------------------------------------------------------- /code/chapter10/snapterest/source/components/Button.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var buttonStyle = { 4 | margin: '10px 10px 10px 0' 5 | }; 6 | 7 | var Button = React.createClass({ 8 | render: function () { 9 | return ( 10 | 14 | ); 15 | } 16 | }); 17 | 18 | module.exports = Button; -------------------------------------------------------------------------------- /how-to-deploy.md: -------------------------------------------------------------------------------- 1 | # How to deploy a stand alone React.js application described in the book? 2 | 3 | Since React.js application is a JavaScript application, we can deploy it on GitHub Pages. 4 | 5 | ## How to deploy on GitHub Pages? 6 | 7 | 1. Create local `gh-pages` branch: `git checkout -b gh-pages` 8 | 2. Create remote `gh-pages` branch: `git push origin gh-pages` 9 | 3. Push changes in `build` directory to remote `gh-pages` branch: `git subtree push --prefix build origin gh-pages` 10 | -------------------------------------------------------------------------------- /code/chapter01/snapterest/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Snapterest 7 | 8 | 9 | 10 |
11 | I am about to learn the essentials of React.js. 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /code/chapter02/snapterest/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Snapterest 7 | 8 | 9 | 10 |
11 | I am about to learn the essentials of React.js. 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /code/chapter04/snapterest/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Snapterest 7 | 8 | 9 | 10 |
11 | I am about to learn the essentials of React.js. 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /code/chapter05/snapterest/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Snapterest 7 | 8 | 9 | 10 |
11 | I am about to learn the essentials of React.js. 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /code/chapter06/snapterest/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Snapterest 7 | 8 | 9 | 10 |
11 | I am about to learn the essentials of React.js. 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /code/chapter07/snapterest/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Snapterest 7 | 8 | 9 | 10 |
11 | I am about to learn the essentials of React.js. 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /code/chapter08/snapterest/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Snapterest 7 | 8 | 9 | 10 |
11 | I am about to learn the essentials of React.js. 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /code/chapter09/snapterest/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Snapterest 7 | 8 | 9 | 10 |
11 | I am about to learn the essentials of React.js. 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /code/chapter10/snapterest/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Snapterest 7 | 8 | 9 | 10 |
11 | I am about to learn the essentials of React.js. 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /code/chapter01/snapterest/build/snapterest.js: -------------------------------------------------------------------------------- 1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o{this.props.text} 21 | ); 22 | } 23 | }); 24 | 25 | module.exports = Header; -------------------------------------------------------------------------------- /code/chapter07/snapterest/source/components/Header.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var headerStyle = { 4 | fontSize: '16px', 5 | fontWeight: '300', 6 | display: 'inline-block', 7 | margin: '20px 10px' 8 | }; 9 | 10 | var Header = React.createClass({ 11 | 12 | getDefaultProps: function () { 13 | return { 14 | text: 'Default header' 15 | }; 16 | }, 17 | 18 | render: function () { 19 | return ( 20 |

{this.props.text}

21 | ); 22 | } 23 | }); 24 | 25 | module.exports = Header; -------------------------------------------------------------------------------- /code/chapter08/snapterest/source/components/Header.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var headerStyle = { 4 | fontSize: '16px', 5 | fontWeight: '300', 6 | display: 'inline-block', 7 | margin: '20px 10px' 8 | }; 9 | 10 | var Header = React.createClass({ 11 | 12 | getDefaultProps: function () { 13 | return { 14 | text: 'Default header' 15 | }; 16 | }, 17 | 18 | render: function () { 19 | return ( 20 |

{this.props.text}

21 | ); 22 | } 23 | }); 24 | 25 | module.exports = Header; -------------------------------------------------------------------------------- /code/chapter08/snapterest/source/utils/CollectionUtils.js: -------------------------------------------------------------------------------- 1 | function getNumberOfTweetsInCollection(collection) { 2 | var TweetUtils = require('./TweetUtils'); 3 | var listOfCollectionTweetIds = TweetUtils.getListOfTweetIds(collection); 4 | 5 | return listOfCollectionTweetIds.length; 6 | } 7 | 8 | function isEmptyCollection(collection) { 9 | return (getNumberOfTweetsInCollection(collection) === 0); 10 | } 11 | 12 | module.exports = { 13 | getNumberOfTweetsInCollection: getNumberOfTweetsInCollection, 14 | isEmptyCollection: isEmptyCollection 15 | }; -------------------------------------------------------------------------------- /code/chapter09/snapterest/source/components/Header.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var headerStyle = { 4 | fontSize: '16px', 5 | fontWeight: '300', 6 | display: 'inline-block', 7 | margin: '20px 10px' 8 | }; 9 | 10 | var Header = React.createClass({ 11 | 12 | getDefaultProps: function () { 13 | return { 14 | text: 'Default header' 15 | }; 16 | }, 17 | 18 | render: function () { 19 | return ( 20 |

{this.props.text}

21 | ); 22 | } 23 | }); 24 | 25 | module.exports = Header; -------------------------------------------------------------------------------- /code/chapter09/snapterest/source/utils/CollectionUtils.js: -------------------------------------------------------------------------------- 1 | function getNumberOfTweetsInCollection(collection) { 2 | var TweetUtils = require('./TweetUtils'); 3 | var listOfCollectionTweetIds = TweetUtils.getListOfTweetIds(collection); 4 | 5 | return listOfCollectionTweetIds.length; 6 | } 7 | 8 | function isEmptyCollection(collection) { 9 | return (getNumberOfTweetsInCollection(collection) === 0); 10 | } 11 | 12 | module.exports = { 13 | getNumberOfTweetsInCollection: getNumberOfTweetsInCollection, 14 | isEmptyCollection: isEmptyCollection 15 | }; -------------------------------------------------------------------------------- /code/chapter10/snapterest/source/components/Header.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var headerStyle = { 4 | fontSize: '16px', 5 | fontWeight: '300', 6 | display: 'inline-block', 7 | margin: '20px 10px' 8 | }; 9 | 10 | var Header = React.createClass({ 11 | 12 | getDefaultProps: function () { 13 | return { 14 | text: 'Default header' 15 | }; 16 | }, 17 | 18 | render: function () { 19 | return ( 20 |

{this.props.text}

21 | ); 22 | } 23 | }); 24 | 25 | module.exports = Header; -------------------------------------------------------------------------------- /code/chapter10/snapterest/source/utils/CollectionUtils.js: -------------------------------------------------------------------------------- 1 | function getNumberOfTweetsInCollection(collection) { 2 | var TweetUtils = require('./TweetUtils'); 3 | var listOfCollectionTweetIds = TweetUtils.getListOfTweetIds(collection); 4 | 5 | return listOfCollectionTweetIds.length; 6 | } 7 | 8 | function isEmptyCollection(collection) { 9 | return (getNumberOfTweetsInCollection(collection) === 0); 10 | } 11 | 12 | module.exports = { 13 | getNumberOfTweetsInCollection: getNumberOfTweetsInCollection, 14 | isEmptyCollection: isEmptyCollection 15 | }; -------------------------------------------------------------------------------- /code/chapter02/snapterest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "snapterest", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "babelify": "^6.2.0", 13 | "browserify": "^11.0.1", 14 | "gulp": "^3.9.0", 15 | "vinyl-source-stream": "^1.1.0" 16 | }, 17 | "dependencies": { 18 | "react": "^0.14.0-beta3", 19 | "react-dom": "^0.14.0-beta3" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /code/chapter04/snapterest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "snapterest", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "babelify": "^6.2.0", 13 | "browserify": "^11.0.1", 14 | "gulp": "^3.9.0", 15 | "vinyl-source-stream": "^1.1.0" 16 | }, 17 | "dependencies": { 18 | "react": "^0.14.0-beta3", 19 | "react-dom": "^0.14.0-beta3" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /code/chapter05/snapterest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "snapterest", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "babelify": "^6.2.0", 13 | "browserify": "^11.0.1", 14 | "gulp": "^3.9.0", 15 | "vinyl-source-stream": "^1.1.0" 16 | }, 17 | "dependencies": { 18 | "react": "^0.14.0-beta3", 19 | "react-dom": "^0.14.0-beta3", 20 | "snapkite-stream-client": "^1.0.3" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /code/chapter06/snapterest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "snapterest", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "babelify": "^6.2.0", 13 | "browserify": "^11.0.1", 14 | "gulp": "^3.9.0", 15 | "vinyl-source-stream": "^1.1.0" 16 | }, 17 | "dependencies": { 18 | "react": "^0.14.0-beta3", 19 | "react-dom": "^0.14.0-beta3", 20 | "snapkite-stream-client": "^1.0.3" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /code/chapter07/snapterest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "snapterest", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "babelify": "^6.2.0", 13 | "browserify": "^11.0.1", 14 | "gulp": "^3.9.0", 15 | "vinyl-source-stream": "^1.1.0" 16 | }, 17 | "dependencies": { 18 | "react": "^0.14.0-beta3", 19 | "react-dom": "^0.14.0-beta3", 20 | "snapkite-stream-client": "^1.0.3" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /code/chapter08/snapterest/source/utils/__tests__/TweetUtils-test.js: -------------------------------------------------------------------------------- 1 | jest.dontMock('../TweetUtils'); 2 | 3 | describe('Tweet utilities module', function () { 4 | it('returns an array of tweet ids', function () { 5 | var TweetUtils = require('../TweetUtils'); 6 | 7 | var tweetsMock = { 8 | tweet1: {}, 9 | tweet2: {}, 10 | tweet3: {} 11 | }; 12 | 13 | var expectedListOfTweetIds = [ 'tweet1', 'tweet2', 'tweet3' ]; 14 | var actualListOfTweetIds = TweetUtils.getListOfTweetIds(tweetsMock); 15 | 16 | expect(actualListOfTweetIds).toEqual(expectedListOfTweetIds); 17 | }); 18 | }); -------------------------------------------------------------------------------- /code/chapter09/snapterest/source/utils/__tests__/TweetUtils-test.js: -------------------------------------------------------------------------------- 1 | jest.dontMock('../TweetUtils'); 2 | 3 | describe('Tweet utilities module', function () { 4 | it('returns an array of tweet ids', function () { 5 | var TweetUtils = require('../TweetUtils'); 6 | 7 | var tweetsMock = { 8 | tweet1: {}, 9 | tweet2: {}, 10 | tweet3: {} 11 | }; 12 | 13 | var expectedListOfTweetIds = [ 'tweet1', 'tweet2', 'tweet3' ]; 14 | var actualListOfTweetIds = TweetUtils.getListOfTweetIds(tweetsMock); 15 | 16 | expect(actualListOfTweetIds).toEqual(expectedListOfTweetIds); 17 | }); 18 | }); -------------------------------------------------------------------------------- /code/chapter10/snapterest/source/utils/__tests__/TweetUtils-test.js: -------------------------------------------------------------------------------- 1 | jest.dontMock('../TweetUtils'); 2 | 3 | describe('Tweet utilities module', function () { 4 | it('returns an array of tweet ids', function () { 5 | var TweetUtils = require('../TweetUtils'); 6 | 7 | var tweetsMock = { 8 | tweet1: {}, 9 | tweet2: {}, 10 | tweet3: {} 11 | }; 12 | 13 | var expectedListOfTweetIds = [ 'tweet1', 'tweet2', 'tweet3' ]; 14 | var actualListOfTweetIds = TweetUtils.getListOfTweetIds(tweetsMock); 15 | 16 | expect(actualListOfTweetIds).toEqual(expectedListOfTweetIds); 17 | }); 18 | }); -------------------------------------------------------------------------------- /code/chapter07/snapterest/source/components/CollectionExportForm.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var formStyle = { 4 | display: 'inline-block' 5 | }; 6 | 7 | var CollectionExportForm = React.createClass({ 8 | render: function () { 9 | return ( 10 |
11 | 12 | 13 | 14 |
15 | ); 16 | } 17 | }); 18 | 19 | module.exports = CollectionExportForm; -------------------------------------------------------------------------------- /code/chapter08/snapterest/source/components/CollectionExportForm.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var formStyle = { 4 | display: 'inline-block' 5 | }; 6 | 7 | var CollectionExportForm = React.createClass({ 8 | render: function () { 9 | return ( 10 |
11 | 12 | 13 | 14 |
15 | ); 16 | } 17 | }); 18 | 19 | module.exports = CollectionExportForm; -------------------------------------------------------------------------------- /code/chapter09/snapterest/source/components/CollectionExportForm.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var formStyle = { 4 | display: 'inline-block' 5 | }; 6 | 7 | var CollectionExportForm = React.createClass({ 8 | render: function () { 9 | return ( 10 |
11 | 12 | 13 | 14 |
15 | ); 16 | } 17 | }); 18 | 19 | module.exports = CollectionExportForm; -------------------------------------------------------------------------------- /code/chapter10/snapterest/source/components/CollectionExportForm.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var formStyle = { 4 | display: 'inline-block' 5 | }; 6 | 7 | var CollectionExportForm = React.createClass({ 8 | render: function () { 9 | return ( 10 |
11 | 12 | 13 | 14 |
15 | ); 16 | } 17 | }); 18 | 19 | module.exports = CollectionExportForm; -------------------------------------------------------------------------------- /code/chapter10/snapterest/source/components/Application.react.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var Stream = require('./Stream.react'); 3 | var Collection = require('./Collection.react'); 4 | 5 | var Application = React.createClass({ 6 | render: function () { 7 | return ( 8 |
9 |
10 |
11 | 12 |
13 | 14 |
15 | 16 |
17 |
18 |
19 | ); 20 | } 21 | }); 22 | 23 | module.exports = Application; -------------------------------------------------------------------------------- /code/chapter08/snapterest/source/components/__tests__/Button-test.js: -------------------------------------------------------------------------------- 1 | jest.dontMock('../Button.react'); 2 | 3 | describe('Button component', function () { 4 | it('calls handler function on click', function () { 5 | var React = require('react'); 6 | var TestUtils = require('react-addons-test-utils'); 7 | var Button = require('../Button.react'); 8 | var handleClick = jest.genMockFunction(); 9 | 10 | var button = TestUtils.renderIntoDocument( 11 |