https://github.com/fouber/fis-parser-react

a parser plugin for fis to precompile react
https://github.com/fouber/fis-parser-react

Last synced: 5 days ago
JSON representation

a parser plugin for fis to precompile react

• Host: GitHub
• URL: https://github.com/fouber/fis-parser-react
• Owner: fouber
• License: mit
• Created: 2014-03-19T08:35:04.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-02-06T09:41:13.000Z (almost 10 years ago)
• Last Synced: 2024-10-12T04:56:53.688Z (about 1 month ago)
• Language: JavaScript
• Size: 149 KB
• Stars: 17
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# fis-parser-react

A parser plugin for [fis](https://github.com/fis-dev/fis) to precompile [react](http://facebook.github.io/react/).

##Usage

* install this plugin (make sure you have installed [fis](https://github.com/fis-dev/fis) before).

    ```shell

    npm install -g fis-parser-react

    ```

* create a project

    project

        - foo.jsx

        - fis-conf.js

* vi ``fis-conf.js``

    ```javascript

    fis.config.set('project.fileType.text', 'jsx'); //*.jsx files are text file.

    fis.config.set('modules.parser.jsx', 'react');  //compile *.jsx with fis-parser-react plugin

    fis.config.set('roadmap.ext.jsx', 'js');        //*.jsx are exactly treat as *.js

    ```

* write a jsx file

    ```javascript

    /** @jsx React.DOM */

    var HelloMessage = React.createClass({

      render: function() {

        return 
Hello {this.props.name}
;

      }

    });


    React.renderComponent(

      ,

      document.getElementById('container')

    );

    ```

* release your project

    ```shell

    cd project              # get into project

    fis release -d output   # release your project to output dir

    ```

* you will get a compiled js file at ``output/index.js``

    ```javascript

    /** @jsx React.DOM */

    var HelloMessage = React.createClass({displayName: 'HelloMessage',

      render: function() {

        return React.DOM.div(null, "Hello ", this.props.name);

      }

    });

    React.renderComponent(

      HelloMessage( {name:"John"} ),

      document.getElementById('container')

    );

    ```