lazo-react-view
v1.0.0
Published
Lazo hello world example
Downloads
2
Readme
lazo-react-view
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!
Open Design Issues and Tasks
- Syncing React component
props
with 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
Example
An example usaged can be found in .example/
.
Running the Example
Install:
npm install
Start the Lazo server:
npm start
Open browser:
Overview
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