Skip to content

Instantly share code, notes, and snippets.

@mjromper

mjromper/index.html

Created May 9, 2018 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mjromper/aa08a871d4f2d4cdb6546d39e96e2540 to your computer and use it in GitHub Desktop.
Save mjromper/aa08a871d4f2d4cdb6546d39e96e2540 to your computer and use it in GitHub Desktop.
Download ZIP
Hello World in React // source http://jsbin.com/bonabazise
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World in React</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://qlikgear.tk/anon/resources/autogenerated/qlik-styles.css">
<style>
.qvobject {
padding: 0 20px;
}
.chart {
margin: 10px;
width: 450px;
height: 350px;
display: inline-block;
}
.kpi {
margin: 10px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<!-- DOM Elements influence by React -->
<div id="root"></div>
<div id="divForChart"></div>
<!-- END -->
<div id="searchBarDiv" style="width: 100%; height: 35px;"></div>
<div id="kpi1" class="kpi"></div>
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
<script type="text/javascript" src="http://qlikgear.tk/anon/resources/assets/external/requirejs/require.js"></script>
<script id="jsbin-javascript">
'use strict';
// Config object to tell Qlik API where to connect.
var config = {
host: 'qlikgear.tk',
isSecure: false,
port: 80,
prefix: '/anon/'
};
// Configure require config
require.config({
paths: {
'qlik': 'http://qlikgear.tk/anon/resources/js/qlik'
},
baseUrl: 'http://qlikgear.tk/anon/resources'
});
require(['js/qlik'], function(qlik) {
//Execution of any React manipulation before redering QS objects
reactChartObject();
//-----
var app = qlik.openApp('3cf19f2d-f83d-4b6d-91a1-e6b7ea1ed133', config);
app.getObject('searchBarDiv', 'CurrentSelections');
app.getObject('kpi1', '8c60e7b3-c3a4-4484-b410-6e72392e46dc');
app.getObject('chart1', 'RkCyQG');
app.getObject('chart2', 'feyZpq');
//This object is injected by React 'reactChartObject()' and has to exist in the DOM
app.getObject('id-qs-chart', 'EnZarJ');
});
//------ REACT STUFF
function tick() {
var element = React.createElement(
'div',
null,
React.createElement(
'h1',
null,
'Hello React Clock!'
),
React.createElement(
'h2',
null,
'It is ',
new Date().toLocaleTimeString(),
'.'
)
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
function reactChartObject() {
var chartElement = React.createElement(
'div', {
"id": "id-qs-chart",
"className": "chart"
},
React.createElement(
'div', {
"style": {
"color": "red"
}
},
'In this DIV element a QS visualisation will be injected'
)
);
ReactDOM.render(chartElement, document.getElementById('divForChart'));
}
//-------
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World in React</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://qlikgear.tk/anon/resources/autogenerated/qlik-styles.css">
<style>
.qvobject {
padding: 0 20px;
}
.chart {
margin: 10px;
width: 450px;
height: 350px;
display: inline-block;
}
.kpi {
margin: 10px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<\!-- DOM Elements influence by React -->
<div id="root"></div>
<div id="divForChart"></div>
<\!-- END -->
<div id="searchBarDiv" style="width: 100%; height: 35px;"></div>
<div id="kpi1" class="kpi"></div>
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'><\/script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'><\/script>
<script type="text/javascript" src="http://qlikgear.tk/anon/resources/assets/external/requirejs/require.js"><\/script>
</body>
</html>
</script>
<script id="jsbin-source-javascript" type="text/javascript">'use strict';
// Config object to tell Qlik API where to connect.
var config = {
host: 'qlikgear.tk',
isSecure: false,
port: 80,
prefix: '/anon/'
};
// Configure require config
require.config({
paths: {
'qlik': 'http://qlikgear.tk/anon/resources/js/qlik'
},
baseUrl: 'http://qlikgear.tk/anon/resources'
});
require(['js/qlik'], function(qlik) {
//Execution of any React manipulation before redering QS objects
reactChartObject();
//-----
var app = qlik.openApp('3cf19f2d-f83d-4b6d-91a1-e6b7ea1ed133', config);
app.getObject('searchBarDiv', 'CurrentSelections');
app.getObject('kpi1', '8c60e7b3-c3a4-4484-b410-6e72392e46dc');
app.getObject('chart1', 'RkCyQG');
app.getObject('chart2', 'feyZpq');
//This object is injected by React 'reactChartObject()' and has to exist in the DOM
app.getObject('id-qs-chart', 'EnZarJ');
});
//------ REACT STUFF
function tick() {
var element = React.createElement(
'div',
null,
React.createElement(
'h1',
null,
'Hello React Clock!'
),
React.createElement(
'h2',
null,
'It is ',
new Date().toLocaleTimeString(),
'.'
)
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
function reactChartObject() {
var chartElement = React.createElement(
'div', {
"id": "id-qs-chart",
"className": "chart"
},
React.createElement(
'div', {
"style": {
"color": "red"
}
},
'In this DIV element a QS visualisation will be injected'
)
);
ReactDOM.render(chartElement, document.getElementById('divForChart'));
}
//-------</script></body>
</html>
Raw
jsbin.bonabazise.js
'use strict';
// Config object to tell Qlik API where to connect.
var config = {
host: 'qlikgear.tk',
isSecure: false,
port: 80,
prefix: '/anon/'
};
// Configure require config
require.config({
paths: {
'qlik': 'http://qlikgear.tk/anon/resources/js/qlik'
},
baseUrl: 'http://qlikgear.tk/anon/resources'
});
require(['js/qlik'], function(qlik) {
//Execution of any React manipulation before redering QS objects
reactChartObject();
//-----
var app = qlik.openApp('3cf19f2d-f83d-4b6d-91a1-e6b7ea1ed133', config);
app.getObject('searchBarDiv', 'CurrentSelections');
app.getObject('kpi1', '8c60e7b3-c3a4-4484-b410-6e72392e46dc');
app.getObject('chart1', 'RkCyQG');
app.getObject('chart2', 'feyZpq');
//This object is injected by React 'reactChartObject()' and has to exist in the DOM
app.getObject('id-qs-chart', 'EnZarJ');
});
//------ REACT STUFF
function tick() {
var element = React.createElement(
'div',
null,
React.createElement(
'h1',
null,
'Hello React Clock!'
),
React.createElement(
'h2',
null,
'It is ',
new Date().toLocaleTimeString(),
'.'
)
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
function reactChartObject() {
var chartElement = React.createElement(
'div', {
"id": "id-qs-chart",
"className": "chart"
},
React.createElement(
'div', {
"style": {
"color": "red"
}
},
'In this DIV element a QS visualisation will be injected'
)
);
ReactDOM.render(chartElement, document.getElementById('divForChart'));
}
//-------
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment