ViewModel for React preview

react
1

Someone asked if they could start playing with ViewModel for React so I decided to publish what I had so far. Here are the instructions to use it:

  • Clone a boilerplate that includes Babel: https://github.com/gaearon/react-hot-boilerplate
  • Add "viewmodel-react-compiler": "0.2.0" to the devDependencies section of package.json
  • Add "viewmodel-react": "0.2.0" to the dependencies section of package.json
  • Change .babelrc to:
{
  "presets": ["es2015", "react"],
  "plugins": [ "viewmodel-react-compiler" ]
}

And you’re in business! Run npm install then npm start

Now let’s use ViewModel’s syntactic sugar…

  • Change index.js so App isn’t the default import:
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(<App />, document.getElementById('root'));
  • Change App.js to use the ViewModel syntax:
App({
  render(){
      <h1>Hello, world.</h1>
  }
});

Now test ViewModel’s automatic import:

  • Create the file /src/Test/Test.js (case is important):
Test({
  message:'',
  render(){
    <div>
      <input type="text" b="value: message" />
      <label b="text: message" />
    </div>
  }
});
  • Use the Test component from App:
App({
  render(){
    <div>
      <h1>Hello, world.</h1>
      <Test />
    </div>
  }
});

Working repo: https://github.com/ManuelDeLeon/react-hot-boilerplate

4 Likes