React

JavaScript библиотека для создания веб страниц

npm install react

<script src="/js/react.js">
<script src="/js/react-dom.js">

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script type="text/javascript" src="http://fb.me/react-with-addons-0.13.3.js">
        <script type="text/javascript" src="http://fb.me/JSXTransormer-0.12.0.js">
        <script type="text/jsx">
            var PLAYER_ID = 'player';
            var playlist = ["1", "2"];

            var Player = React.createClass({
                render: function(){
                    return(
                        <video src={this.props.src} id={PLAYER_ID}/>
                    );
                },

                componentDidMount: function(){
                    document.getElementById(PLAYER_ID).addEventListener('ended', this.onEnded);
                },

                componentWillUnmount: function(){
                    document.getElementById(PLAYER_ID).removeEventListener('ended', this.onEnded);
                },

                onEnded: function(){
                    alert("...");

                    var newCurrent = this.state.current + 1;
                    if (newCurrent >= this.props.playlist.length){
                        newCurrent = 0
                    }
                    this.setState({
                        current: newCurrent
                    });
                }
            });

            var PlayerContainer = React.createClass({
                render: function(){
                    var src = this.props.playlist[this.state.current];

                    return <Player src={src} onEnded={this.onEnded} />;
                },

                getInitialState: function(){
                    return {
                        current: 0
                    };
                },

                onEnded: function(){
                    alert("...");
                }
            });

            // React.render(<Player src="..." />, document.body);
            // React.render(<PlayerContainer playlist={playlist}/>, document.body);
        </script>
    </body>
</html>

var Hello = React.createClass({

    render: function(){
        return (
            <div>
                Hello
                <b>{this.props.name}</b>,
                <b>{this.state.count}</b>!
                <button type="button" onClick="{this.increment}">
                    Increment
                </button>
            <div>
        );
    }

    getInitialState: function(){
        return {
            count: 5
        }
    },

    componentWillMount: function(){
        // до создания
    },

    componentWillUnmount: function(){
        // до удаления
    },

    componentDidMount(){
        // после создания
    },

    componentDidUnmount(){
        // после удаления
    },

    increment: function(){
        this.setState({count: this.state.count + 1});
    }
});

React.render(
    <Hello name="ilnurgi/>,
    document.getElementById("container"));

// Application.react.js

var React = require('react');

var Application = React.createClass({});

module.exports = Application;

// app.js

var React = require('react');
var Application = require('./components/Application.react.js');