This is a sample application that goes along with the backstop media book: React Edge 2nd edition. It shows how to structure a large app so that it's highly maintainable.
It used firstname.lastname@example.org and react-router@1.
Fetch the dependencies. If you don't have node/npm installed I recommend nvm.
To run the normal development server on localhost:8080 with the assets on localhost:8081:
To run the development pages on localhost:9080 and assets on localhost:9081:
There are some more options:
$ ./scripts/dev -h Options: -h, --help Show help [boolean] --asset-url where assets are to be served from --main-url the main web server root --prod do a development build (default) [boolean] --only-dev-server only serve assets [boolean] --only-main-server don't run dev-server [boolean] --dev-pages instead of running the main app, run the individual component pages
The development pages allow you to view individual components. Hot reloading is supported here, so you can very quickly make changes.
It allows you to see many variations of the component at once, and serves as documentation.
TODO: (picture of development pages)
Many directories have .md files in them. These serve as an explaination for you and any other developers joining the project. I recommend not deleting them, and adding more docs specific to your application in a similar way.
Atoms are your low level components. Included is set of atoms that allow you to build most things. Unlike third party component libraries, these are your own to modify or remove. Atoms such as
<Header> allow you to avoid using dom components directly in higher level views, and encourage consistency across large applications.
The flux library used here is reflux. It's simple but powerful.