The lazo-react-view is designed to integrate React with
Lazo at the view level. The Lazo view acts as a bridge to a
React container component.
The React container component is the entry point to React land. You CANNOT add Lazo child components, views, widgets, etc. beneath the React container component!
- Syncing React component
propswith Lazo data sources, e.g., backbone-react-component. - More robust example (TodoMVC???)
- Incorporate assets
- Render model, collection and assets data
- Add stateless React components as children of the container component
- DOM events and data changes that trigger re-rendering
An example usaged can be found in .example/.
Install:
npm installStart the Lazo server:
npm startOpen browser:
The example leverages jsx-requirejs-plugin
loader plugin to load AMD modules that contain JSX. This
plugin and React are pulled in via Bower (See bower.json and
.bowerrc).
The RequireJS configuration for these is in
./example/conf.json.
http://localhost:8080/ returns the response from
./exmaple/components/home. The Lazo view extends
lazo-react-view adding a reference to React and the
container component.
Below is the example file structure with brief descriptions in parentheses next to the pertinent files. For more information on the directory structure of Lazo application please refer to the Lazo documentation.
example
├── app
│ ├── app.json (routes)
│ ├── application.js (initialization)
│ ├── lazo-react-view (lazo-react bridge)
│ │ └── index.js
│ ├── server (debugging)
│ │ └── server.js
│ └── vendor (bower modules)
│ ├── ...
├── components
│ └── home (responds to route (/))
│ ├── components
│ │ └── HelloWorld.jsx (component container)
│ ├── controller.js (fetches model and collection data)
│ └── views
│ └── index.js (extends lazo-react-view)
├── conf.json (RequireJS configuration)
└── models (example data)
├── collection-example
│ └── server
│ └── syncher.js
└── model-example
└── server
└── syncher.js