mathieuancelin · October 4, 2016 21:23 · mathieuancelin · Oct 4, 2016
diff --git a/app-es6.html b/app-es6.html
 <!doctype html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react/dist/react.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/react-dom/dist/react-dom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      {
        // hyperscript like, also can use React.DOM.*
        const { createElement: h, Component } = React;

        class Geolocation extends Component {
          render() {
            if (this.props.location === null) {
              return null;
            }
            return (
              h('pre', null, JSON.stringify(this.props.location, null, 2))
            );
          }
        }    
       
        class IPApp extends Component {

          constructor(props) {
            super(props);
            this.state = { location: null };
          }

          componentDidMount() {
            fetch('https://freegeoip.net/json/')
              .then(r => r.json())
              .then(location => this.setState({ location }));
          }

          render() {
            return (
              h('div', null, 
                h('h1', null, 
                  this.state.location === null ? 'Loading location ...' : 'Your location is :'
                ),
                h(Geolocation, { location: this.state.location })
              )
            );
          }
        }
          
        window.App = {
          boot(node) {
            ReactDOM.render(h(IPApp, null), node);
          }
        };
      }
      App.boot(document.getElementById('app'));
    </script>
  </body>   
 </html> 
diff --git a/app.es5.html b/app.es5.html
 <!doctype html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react/dist/react.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/react-dom/dist/react-dom.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/jquery" type="text/javascript"></script>
    <script type="text/javascript">
      var App = App || (function() {

        // hyperscript like, also can use React.DOM.*
        var h = React.createElement;

        /*var Geolocation = React.createClass({
          render: function() {
            if (this.props.location === null) {
              return null;
            }
            return (
              h('pre', null, JSON.stringify(this.props.location, null, 2))
            );
          }
        });*/

        // classes es5 style
        function Geolocation(props) {
          React.Component.call(this, props);
        }
        Geolocation.prototype = Object.create(React.Component.prototype);
        Geolocation.prototype.constructor = Geolocation;
        Geolocation.prototype.render = function() {
          if (this.props.location === null) {
            return null;
          }
          return (
            h('pre', null, JSON.stringify(this.props.location, null, 2))
          );
        };        
       
        var IPApp = React.createClass({
          getInitialState: function() {
            return {
              location: null
            };
          },
          componentDidMount: function() {
            $.get('https://freegeoip.net/json/').then(function(data) {
              this.setState({ location: data });
            }.bind(this));
          },
          render: function() {
            return (
              h('div', null, 
                h('h1', null, 
                  this.state.location === null ? 'Loading location ...' : 'Your location is :'
                ),
                h(Geolocation, { location: this.state.location })
              )
            );
          }
        });
          
        return {
          boot: function(node) {
            ReactDOM.render(h(IPApp, null), node);
          }
        };
      })();

      App.boot(document.getElementById('app'));
    </script>
  </body>   
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Test</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="https://unpkg.com/react/dist/react.min.js" type="text/javascript"></script>
	<script src="https://unpkg.com/react-dom/dist/react-dom.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	{
	// hyperscript like, also can use React.DOM.*
	const { createElement: h, Component } = React;

	class Geolocation extends Component {
	render() {
	if (this.props.location === null) {
	return null;
	}
	return (
	h('pre', null, JSON.stringify(this.props.location, null, 2))
	);
	}
	}

	class IPApp extends Component {

	constructor(props) {
	super(props);
	this.state = { location: null };
	}

	componentDidMount() {
	fetch('https://freegeoip.net/json/')
	.then(r => r.json())
	.then(location => this.setState({ location }));
	}

	render() {
	return (
	h('div', null,
	h('h1', null,
	this.state.location === null ? 'Loading location ...' : 'Your location is :'
	),
	h(Geolocation, { location: this.state.location })
	)
	);
	}
	}

	window.App = {
	boot(node) {
	ReactDOM.render(h(IPApp, null), node);
	}
	};
	}
	App.boot(document.getElementById('app'));
	</script>
	</body>
	</html>
No results found