Browserify

Who's using React.js with Browserify?

• KhanAcademy.org
• AirBnb.com
• SoundCloud.com

Webpack

Who's using React.js with Webpack?

• Instagram.com

Good Read

• Browserify for Webpack users
• Browserify Handbook
• Webpack How-to

It seems like the 404.html page is never used. If I enter a dummy URL it will just 404 on the server instead.

I'm trying to test the PageStore which is included by default in this project:

jest.dontMock('../PageStore');
jest.dontMock('object-assign');

describe('PageStore', function() {

  var Dispatcher;
  var PageStore;

  var callback;

  beforeEach(function() {
    Dispatcher = require('../../core/Dispatcher');
    PageStore = require('../PageStore');
    callback = Dispatcher.register.mock.calls[0][0];
  });

  it('returns default page', function() {
    expect(PageStore.get()).toBe({
      title: 'React.js Starter Kit',
      description: 'A skeleton for an isomorphic web application (SPA) built with React.js and Flux',
      keywords: null
    });
  });
});

 FAIL  stores/__tests__/PageStore-test.js (0.313s)
● PageStore › it returns current page
  - TypeError: Object [object Object] has no method 'get'
        at Spec.<anonymous> (/Users/manhhavu/Developer/experiments/shopizie-kart/src/stores/__tests__/PageStore-test.js:25:22)
        at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)

When attempting to use a .jsx file from a node_module e.g.

var mui = require('material-ui');
var Icon = mui.Icon;

var HomePage = React.createClass({
  render() {
    return (
      <Icon icon="home"/>
    );
  }
});

// ....
[RSK] Serving files from: ./build
[20:54:04] Starting 'pages'...
{ [SyntaxError: Unexpected token <]
  name: 'SyntaxError',
  message: 'Unexpected token <',
  stack: 'SyntaxError: Unexpected token <\n    at Module._compile (module.js:439:25)\n    at Module._extensions..js (module.js:474:10)\n    at Plugin.reactTransform (~/react-starter-kit/node_modules/gulp-render/index.js:68:7)\n    at Object.Plugin.reactTransform (~/react-starter-kit/node_modules/gulp-render/index.js:68:7)\n    at Module.load (module.js:356:32)\n    at Function.Module._load (module.js:312:12)\n    at Module.require (module.js:364:17)\n    at require (module.js:380:17)\n    at Object.<anonymous> (~/react-starter-kit/node_modules/material-ui/docs/dist/index.js:2:10)\n    at Module._compile (module.js:456:26)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-render' }
[20:54:04] 'pages' all files 0 B
// ....

npm uninstall karma karma-* --save-dev

Remove config/karma.js
Move ./src/components/NavbarSpec.js to ./src/components/__test__/Navbar-test.js
update package.json: test: "jshint && jest"

When I change any content/*.jade file the old content is served until gulp server restart.

Steps to reproduce:

1. Run gulp

2. Change src/content/index.jade somehow (Eg: add some characters to any header)

3. Notice there is

   [22:23:00] Starting 'assets'...
   [22:23:00] 'assets' all files 1.03 kB
   [22:23:00] Finished 'assets' after 31 ms
   [QC] File changed: build/content/index.jade
   

4. Check that build/content/index.jade actually changed

Expected result: the rendered view in the browser should change

Actual result: it does not. Even refreshing the page does not help

PS: Both http://localhost:5000/ and http://localhost:3000/ show the old content

The same is reproducible with gulp serve. And running an rs command (or a complete nodemon server restart) followed by a page refresh actually leads to the updated contents.

Meanwhile changing styles works as expected (in both cases: with serve and live reload)

Summary: everything from styles is updated fine, content and templates are not updated though.

Reproducible in both v0.3.0 and current master b9b42223d568

Any ideas on why it could be like that?

Which of these conventions do you prefer and why?

• ./components/MyComponent.jsx
• ./components/MyComponent.js
• ./components/MyComponent.react.js
• ./components/MyComponentView.js

@koistya mind giving an example of how to setup an auth flow with the current setup?
One of the biggest perks of switching to react-router is the out of box support for auth by using nested routes. thanks! ref #21

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

I've been playing around with your starter kit, which I really like--thank you--but I ran into a snag when trying to serve the app from a subdirectory on my webserver. Essentially, what I did was:

//  build app as per your README
cp -a build ~/public_html/MyApp
//  point browser at  http://webserver/~username/MyApp

<button onClick={function() { console.log("test")}}>Test</button>

cd build
python -m SimpleHTTPServer
//  point browser at  http://localhost:8000/

cd ..     // i.e., go back to top level MyApp directory
python -m SimpleHTTPServer
//  point browser at  http://localhost:8000/build/

I guess .jsx extension itself already implies that the file is JSX flavor of JavaScript, so should we keep or remove these pragma comments?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

As of React 0.12, it is recommended to use the .jsx file extension rather than the pragma in .js files.

This will also help with editors doing syntax highlighting & linting.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

http://gaearon.github.io/react-hot-loader/

For example:

App.jsx

var React = require('react');

if (__DEBUG__) {
   window.React = React;
}

Hello,

Im using this starter kit for our projects, but we have to modify the current gulpfile and split into files per task in a gulp/ directory for better understanding of build processes as we have modify some of them (we use modernizr, semantic-ui, sass ..)

How do you feel about switching to that model instead of a single file.

The structure would be

gulpfile.js
gulp/index.js
gulp/config.js
gulp/tasks/
gulp/util/errorHandling.js

./src/index.html -> ./src/pages/index.html
./src/404.html -> ./src/pages/404.html

And update build logic for these pages in gulpfile.js

Where to put major components (the ones bound to URLs)

1. Inside the /src/components folder (e.g. /src/components/issues.jsx) - better for small projects
2. Inside the /src/pages folder (e.g. /src/pages/issues.jsx, /src/pages/questions.jsx) - might be better for small projects
3. A separate folder for each major component (e.g. /src/issues/index.jsx, /src/issues/new/index.jsx) - might be better for medium-size projects
4. A separate folder for each section (area) of the site (e.g. /src/account/login.jsx, /src/account/profile.jsx, /src/account/settings.jsx)

Where to put unit test files

1. test folder in project's root (e.g. /test/components/navbar-test.js)
2. test folder in each source folder (e.g. /src/components/test/navbar-test.js)
3. Unit test within the same folder with a component (e.g. /src/components/navbar-test.js)
4. Should it be test or __test__ folder (see React source code)

@koistya:

Kent,

What do you think about this directory layout (assuming it's a github.com application):

/src/issues/index.js - the main component bound to the /{repo}/issues URL
/src/issues/index-test.js - unit tests for it
/src/issues/index.less - CSS styles for the page
/src/issues/new.js - the component bound to the /{repo}/issues/new URL
/src/issues/new-test.js - unit tests for it
/src/issues/new.less - CSS styles for the page

Though, this kind of layout might be too advanced for a starter kit project..

@kentcdodds:

I am in the process of rewriting my website from angular to react. You can look at my gulpfile for an example ofa jest configuration that would support that file structure: https://github.com/kentcdodds/kentcdodds.github.io/tree/dev

You can also see how my stylus is setup as well.

As far as your recommended file structure, I think I like it. The one issue I would have is what if you decided to have a state below /new? In that case, you'd need to have a folder for that state, so I would change it like so:

/src/issues/index.js - the main component bound to the /{repo}/issues URL
/src/issues/index-test.js - unit tests for it
/src/issues/index.less - CSS styles for the page
/src/issues/new/index.js - the component bound to the /{repo}/issues/new URL
/src/issues/new/index-test.js - unit tests for it
/src/issues/new/index.less - CSS styles for the page

For testing purposes, you may also want a -mock.js file for some components where that makes sense.

Also, as far as components go, I would say that you want the component files to be as close to where they are used as possible.

Do, if a component is specific to /new, then it would be in that directory, however, if it's shared between /new and /edit, I would put it in the nearest common parent directory (like /issues). Then if there's a component that's shared with everything, then it would go in /src

You may want to make a components folder to hold those kinds of components (so there'd be one in /new, /issues, and /src in that precious example).

Let me know what you think. I've never built a big application in react, so this is loosely based on my experience with angular. I think it's sound though.

@koistya:

Yeah, having tests along-side to code under test sounds very appealing to me as well. Having a folder for each page of the site on the other hand may lead to too many folders, nesting.. I usually prefer to avoid too deeply nested folders.

@kentcdodds:

I agree with avoiding nesting folders too deeply. I don't see a problem with new.js for /new. If you needed to add a sub-state for that, it wouldn't be too difficult to move things around for it. But I think that the file structure should reflect the routes in some reasonable way. This makes the repository easier to reason about.

@koistya:

Yeah, totally agree. One thing which I'm trying to solve is to how to place these URL-bound folders to other stuff like /stores, /actions, /constants and other JavaScript folders... should they have the same parent folder.. maybe not

@kentcdodds:

Good question... I like something like this:

src

• bower_components
• non_bower_components
• app (not sold on this name, in angular I'd name it "components" but in react that has a different meaning)
  • stores
  • actions
  • constants
  • components
    • issues
      • index.js
      • new.js
    • repos
      • index.js

etc.

Though, I'm starting to wonder if maybe the stores/actions/constants are specific to a feature (like issues) then maybe it should exist in that folder. I like to keep things grouped together to the point that you could almost think of that folder as an entry point to a npm module. So, if that folder has any dependencies outside of itself, it's because some other folder depends on it as well. Does that make sense? I like to keep things as close to where they're used as possible.

@koistya:

inside /src folder you have front-end code inside the /app folder and server-side code in /src/server or something like that? From what I see (yeoman templates) they either use /src or /app folder for the web application code.. the difference is if your app can be launched from the same folder, it's usually called /app and if you app can be launched only from the /build folder then source code is usually placed into /src.

@kentcdodds:

Sorry, no, everything from the /src folder down is client-side code, as yours is currently.

@koistya:

Then why to use /app inside /src ? maybe /app in the root level, or having your code in /src would do a better job (less nesting)? I personally prefer putting bower_components, node_modules outside the source folder... at this moment i don't even use bower, because everything I need is on NPM, and browserify or webpack bundles the source code along with 3rd party dependencies into custom bundles (./build/app.js), the bower_components folder is never deployed to a server.

The size of the react lib is reduced if you define process.env.NODE_ENV = "production".

See https://github.com/webpack/webpack-with-common-libs/blob/master/gulpfile.js#L25-L30

Hello,

I'm building a single page application which has only 1 component/page. I'd like to redirect all uri's to this "Index" component, instead of having the 404 page showing up for invalid routes. Is that possible ? I tried putting regular expressions inside routes in the app.js but it doesn't seem to work.

Thanks !

I thought I'd take it for a spin but following the error pops up on any gulp command (Ubuntu 14.04 - clean install, npm 1.4.9, bower 1.3.5, gulp 3.8.0, node v0.10.28).

You need a comma at the end of line 25.

/MyApp/config/webpack.config.js:26
new webpack.optimize.DedupePlugin(),
^^^
SyntaxError: Unexpected token new
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/home/todd/nutviz/MyApp/gulpfile.js:21:24)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)

Hello,
I was reviewing your kit, it's great work, I'm in the process of learning React.js and how it all fits together with asp.net.
Maybe i have a wrong idea, but my ideal architecture would be a primary asp.net mvc web site with react.js mini apps, with central navigation (top navigation bar) handled server-side by asp.net mvc. So i can use react for building apps-per-page, yet have solid sever-side boundaries between apps. I hope you understand what i'm getting to. Anyway, by looking at different examples I chose to try and integrate this starter kit with reactjs.net. Also, i would like it if these mini apps had their own routing, on top of asp.net server-side routing, but there shouldn't be any overlapping. Do you see any issues with that aproach? I plan on making a blog post about it since i couldn't find anything that touches the subject. Thanks and best regards!

Do we have a development watch script to compile source code as you save it?

Currently I'm having trouble compiling layouts automatically.

What do you think about removing Bootstrap CSS from this template? In favor of some custom minimum basic styles.

You already have components, why would you want to mix templating engines??

I've run into a small issue that could easily confuse others when building upon this starter kit.

The render functions in your React components have been written using the double-arrow syntax:

var HomePage = React.createClass({
  render: () => {
      // ...
  }

var HomePage = React.createClass({
  render: function() {
      // ...
  }.bind(this)

var HomePage = React.createClass({
  getInitialState: ()=> {
    return {foo: 'bar'};
  },
  render: ()=> {
    return (
      <div>{this.state.foo}</div>
    );
  }

var HomePage = React.createClass({
  getInitialState: function() {
    return {foo: 'bar'};
  },
  render: function() {
    return (
      <div>{this.state.foo}</div>
    );
  }

I'm new to Webpack, but shouldn't this be mimetype rather than minetype?

https://github.com/kriasoft/React-Seed/blob/master/config/webpack.config.js#L55

I see the gulpfile.js and webpack's config file, it doesn't seem that webpack will property handle jsx code because those file's extension is '.js' not '.jsx'
I try to run or debug to know how it works, but don't saw a clue

Except that gulpfile has code that change the node's require behavior to transform jsx and ES6 code first

My question is:
Will webpack use node's require() to transform jsx/ES6 code?
It seems that webpack don't have this kinds of behavior
Or did I missed something?

Thanks 👍

Hello! Im just using this project and have a issue - styles from modules not loading to page
I'm tried to change this file https://github.com/kriasoft/react-starter-kit/blob/master/src/components/App/App.less:

.App {
  background-color: red !important;
}

Hello,
when I try to use some internal node libraries I get an error (fs, tls, dgram, dns).

build/app.js:

var fs = webpack_require(!(function webpackMissingModule() { var e = new Error("Cannot find module "fs""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));

src/app.js sources:

var fs = require('fs');

You can see with this forked version:
https://github.com/avalla/react-starter-kit

There is something wrong?
I cannot understand :)

Thanks

Is
https://github.com/kriasoft/react-starter-kit/blob/master/blog.andrewray.me/flux-for-stupid-people

Should be
http://blog.andrewray.me/flux-for-stupid-people/

Curious as to why there is a gulp deploy task that deploys to Github pages when the build process produces a Node server app. This build doesn't currently work on Github pages. Deploy task works fine, seems to be something that wasn't compensated for in the build process.

Am I missing something?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

On a new machine, with a new installation of node, npm install fails with this error:

npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.10.32
npm ERR! npm  v2.0.0
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package webpack does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants webpack@^1.2.0-beta5
npm ERR! peerinvalid Peer [email protected] wants webpack@^1.3.0

Server / middleware libraries to consider if you're using Node.js on the server:

• Express
  
  
• koa
  
  
• hapi
  
  

Approaches to consider when you don't use Node.js:

• For each incoming HTTP request run the server-side bundle via Google's V8 egnine, then send the resulting string to the client.

maybe to use plumber on pages too?

steps:

1. run gulp
2. make an error with one of the pags

gulp watch throw

[22:34:33] Using gulpfile ~/Documents/dev/react-take5/gulpfile.js
[22:34:33] Starting 'serve'...
[22:34:33] Starting 'clean'...
[22:34:33] Finished 'clean' after 6.16 ms
[22:34:33] Starting 'build'...
[22:34:33] Starting 'vendor'...
[22:34:33] Starting 'assets'...
[22:34:33] Starting 'images'...
[22:34:34] Starting 'pages'...
[22:34:34] Starting 'styles'...
[22:34:35] Starting 'bundle'...
[22:34:35] Beautifying index.html
[22:34:35] Beautifying privacy.html
[22:34:35] Beautifying 404.html
[22:34:37] 'styles' all files 135.82 kB
[22:34:37] Finished 'styles' after 2.32 s
[22:34:37] 'pages' all files 12.66 kB
[22:34:37] Finished 'pages' after 2.58 s
[22:34:37] gulp-imagemin: Minified 2 images (saved 1.29 kB - 13.4%)
[22:34:37] Finished 'vendor' after 3.73 s
[22:34:37] 'images' all files 8.35 kB
[22:34:37] Finished 'images' after 3.67 s
[22:34:39] 'assets' all files 125.13 kB
[22:34:39] Finished 'assets' after 5.61 s
[22:34:39] Finished 'bundle' after 4.28 s
[22:34:39] Finished 'build' after 5.79 s
[22:34:39] Finished 'serve' after 5.85 s
[22:34:39] Starting 'default'...
[22:34:39] Finished 'default' after 5.38 μs
[RSK] Local URL: http://localhost:3000
[RSK] External URL: http://10.0.0.2:3000
[RSK] Serving files from: ./build
[22:34:41] Starting 'pages'...
{ [ReferenceError: require1 is not defined]
name: 'ReferenceError',
message: 'require1 is not defined',
stack: 'ReferenceError: require1 is not defined\n at Object. (/Users/asafkatz/Documents/dev/react-take5/src/pages/Privacy.js:14:12)\n at Module._compile (module.js:456:26)\n at DestroyableTransform._transform (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/index.js:99:13)\n at DestroyableTransform.Transform._read (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)\n at DestroyableTransform.Transform._write (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)\n at doWrite (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)\n at writeOrBuffer (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)\n at DestroyableTransform.Writable.write (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)\n at write (_stream_readable.js:601:24)\n at flow (_stream_readable.js:610:7)',
showStack: false,
showProperties: true,
plugin: 'gulp-render' }

events.js:72
throw er; // Unhandled 'error' event
^
ReferenceError: require1 is not defined
at Object. (/Users/asafkatz/Documents/dev/react-take5/src/pages/Privacy.js:14:12)
at Module._compile (module.js:456:26)
at DestroyableTransform._transform (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/index.js:99:13)
at DestroyableTransform.Transform._read (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (/Users/asafkatz/Documents/dev/react-take5/node_modules/gulp-render/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at write (_stream_readable.js:601:24)
at flow (_stream_readable.js:610:7)

Eslint supports JSX and some ES6 features. That will allow you to get rid of all those /* jshint ignore:start */.

Note that right now ES6 imports are not yet implemented by eslint, but they should be coming soon.

Create a new build step (aka Gulp task) which would generate .html pages during a build in order to be able to deploy this web app into CDN (see GitHub Pages).

I tried the TextBox component in forms folder which lead to a compile error.

https://github.com/kriasoft/react-starter-kit/blob/master/src/components/forms/TextBox.js#L11

Could wu import .less in this way?

Error msg

{ [Error: Parse Error: Line 1: Unexpected token .]
  index: 0,
  lineNumber: 1,
  column: 1,
  description: 'Unexpected token .',
  name: 'Error',
  message: 'Parse Error: Line 1: Unexpected token .',
  stack: 'Error: Line 1: Unexpected token .\n    at throwError (/Users/lizhiye/dev/tmp/react-starter-kit/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2644:21)\n        ........(tl;tr)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-render' }

when I use require('style.less'), the component will not work and the JSX transpiler complains about unexpected characters.
ex. using the included TextBox component which has a less require statement.

@koistya please advise. thanks!

http://visualstudiogallery.msdn.microsoft.com/d65d6b29-6dd7-4100-81b1-609e5afce356

npm install breaks error

npm ERR! Darwin 14.0.0
npm ERR! argv "node" "/Users/andrey/.nvm/v0.10.32/bin/npm" "install"
npm ERR! node v0.10.32
npm ERR! npm  v2.1.12
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package less does not satisfy its siblings' peerDependencies requirements!

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/andrey/Projects/react/test/npm-debug.log

72 info install [email protected]
73 info postinstall [email protected]
74 info prepublish [email protected]
75 verbose stack Error: The package less does not satisfy its siblings' peerDependencies requirements!
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/lib/install.js:103:32
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/lib/install.js:225:5
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/read-installed/read-installed.js:138:5
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/read-installed/read-installed.js:251:14
75 verbose stack     at cb (/Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/read-installed/read-installed.js:251:14
75 verbose stack     at cb (/Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/read-installed/read-installed.js:251:14
75 verbose stack     at cb (/Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/slide/lib/async-map.js:47:24)
75 verbose stack     at /Users/andrey/.nvm/v0.10.32/lib/node_modules/npm/node_modules/read-installed/read-installed.js:251:14
76 verbose cwd /Users/andrey/Projects/react/test
77 error Darwin 14.0.0
78 error argv "node" "/Users/andrey/.nvm/v0.10.32/bin/npm" "install"
79 error node v0.10.32
80 error npm  v2.1.12
81 error code EPEERINVALID
82 error peerinvalid The package less does not satisfy its siblings' peerDependencies requirements!
83 verbose exit [ 1, true ]

What would be the best way to add assets versioning to this? Both for css and javascript.

How do you feel about using react-router instead of a custom basic routing approach? It seems to be getting super popular and the fact that it's build for react makes me like it a lot more anyways

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Whenever an error happens in the following line (invalid syntax in react files, missing requires etc.), it stops gulp from running:
.pipe($.if('*.jsx', $.render({template: './src/pages/_template.html'})))

It would be nice to stop it and then try again on next change. Tried it with a continuation of .on('error', errorHandler) but that didn't work.

Otherwise thank you very much for this great template!

Relay by Facebook + examples

redux by Dan Abramov

flux by Facebook + examples

alt by Josh Perez + examples

reflux by Mikael Brassman + examples

flummox (deprecated) by Andrew Clark

fluxible by Yahoo

fluxxor by Brandon Tilley + examples

marty.js by James Hollingworth + examples

fynx by Alan Plum

McFly by Ken Wheeler + example

DeLorean.js by Fatih Kadir Akın + examples

fluxify by Javier Márquez

Comparison: https://github.com/voronianski/flux-comparison

There could be typos or inaccuracies.

https://github.com/kriasoft/React-Seed/edit/master/README.md

6to5 handles JSX just fine, but it also gives a lot more ES6 features.

For example:

var React = require('react');

var SomePage = React.createClass({
  statics: {
    layout: require('../layouts/DefaultLayout.jsx');
  },
  render() {
    // render logic
  }
});

module.exports = SomePage;

var React = require('react');

var SomePage = React.createClass({
  render() {
    // render logic
  }
});

SomePage.layout = require('../layouts/DefaultLayout.jsx');

module.exports = SomePage;