lazo-react-view

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:

http://localhost:8080/

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