“What is going on here? You’re sitting on a gold mine! Why aren’t you doing something with this technology? You could change the world!” Steve Jobs, on his visit to Xerox PARC
MVC, invented at Xerox PARC, is the time and battle-tested pattern for building user interfaces. This project aims to show how the MVC pattern can be used with Facebook's React easily, without resorting to alternative tech like Flux or Redux.
This project implements an example chat application with ReactMVC architecture. It demonstrates how a complex, stateful application should be built.
$ git clone https://github.com/ustun/react-mvc.git
$ cd react-mvc
$ npm install
Make sure you have gulp installed:
$ sudo npm install -g gulp
Now you are ready to run the project. After you execute this command, the project will start automatically on your browser.
$ gulp
This project provides a development web server that listens on port 1970 -like the good old days- .
Run the default task via gulp and the project will be ready for development and inspection. Source files are symlinked, and the server watches for file changes with live reloading, so any change you make to the files under src folder will cause an automatic reload.
When you are satisfied with development and want to make a production build in order to deploy the app, just run the bundle task via gulp bundle. This compiles your source code with Closure Compiler in advanced mode and concats and minifies your CSS files producing one file for all your JavaScript codes and one CSS file for all your styles. This task then suffixes these files to evade browser caches. Finally, it minifies the output HTML.
The live-reloading watch server can also be activated for these kind of builds via gulp serve.
Happy coding!
All the code was originally written in "Vieux" MVC architecture by Tarik Akyol.
The original repo is at https://github.com/vieuxio/example-chat-react
Converted to standard MVC naming by Ustun Ozgur.
For the original info about vieux architecture, see http://vieux.io/