How to Structure React Projects

This is great!

One of the most confusing things with React and Angular or in fact any other non convention-over-configuration framework is how you go about building your project.

Structure is super important, and this resource looks good.

I would add a demo application on Github that does handle data (something super simple will suffice), just so people can fork the project and take it from there.

I know for me, when I started with Angular, the Yeoman generators were just life savers, I think it would be a great "next stage" for this post.

Just the other day I started with https://github.com/fortruce/react-fullstack-skeleton/ as a minimal skeleton for a new project of mine. Having not developed with "modern" Javascript yet, and only having used React by itself this was quite a convenient way to get started. Most other skeleton projects were too much, too huge for my taste when getting started.

It has:

* react-hot-loader which causes your changed to get automatically loaded into the running webpage

* Webpack, gulp and redux all set up

* A sample api server integrated in the development process to be used with a SPA

* SASS/CSS loading, which also gets hot loaded into your page (once/if my pull request is merged)

* Production builds with minifying and no sourcemaps (once/if my pull request is merged)

I'm not entirely happy with the structuring, but that can always be changed once you're familiar with the technologies. I also just submitted pull requests to address the issues listed in the readme.

The samples provided by Facebook (for Flux) have a great example structure to them: https://github.com/facebook/flux/tree/master/examples/flux-t...

In my experience, this structure scales very well, especially if you take the advice in the 'thinking in react' tutorial (http://facebook.github.io/react/docs/thinking-in-react.html ) and create a mockup that clearly indicates what part of the UI will be handled with what component.

A view is made up of many components.

The Redux Devtools project has an example folder with already structured examples [1]. Cool thing is that it comes with all the webpack hot-reloading already setup, and with the ability to do undo/redo changes thanks to the devtools capability. In essence, it's the only project I found that comes with the ability to code your entire app without ever having to reload your browser, and/or having to reproduce the actions manually. When you find a bug, you go and fix it, and magically everything goes back to the same state you were into without you having to click through the various buttons/panels/whatever that brought you there.

1. https://github.com/gaearon/redux-devtools/tree/master/exampl...