Grab recent copies of React and Axios:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0-rc.3-next-3f8990898-20220323/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0-rc.3-next-3f8990898-20220323/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js"></script>Add an element to hold the rendered view:
<div id="app"></div>Grab the model from a JSON API and render the view from a template:
<script type="text/javascript">
class App extends React.Component {
constructor(props) {
super(props);
this.state = props;
}
render() {
return React.createElement(
'table',
null,
[
React.createElement('tr', null, [
React.createElement('th', null, 'Name:'),
React.createElement('td', null, this.state.name),
]),
React.createElement('tr', null, [
React.createElement('th', null, 'Handle:'),
React.createElement('td', null, this.state.nick),
]),
React.createElement('tr', null, [
React.createElement('th', null, 'Email:'),
React.createElement('td', null, [
React.createElement('a', { href: this.state.mbox, }, this.state.mbox),
]),
]),
React.createElement('tr', null, [
React.createElement('th', null, 'Website:'),
React.createElement('td', null, [
React.createElement('a', { href: this.state.homepage, }, this.state.homepage),
]),
]),
React.createElement('tr', null, [
React.createElement('th', null, 'Depiction:'),
React.createElement('td', null, [
React.createElement('img', { class: 'thumbnail', src: this.state.depiction, }),
]),
]),
]
);
}
}
axios
.get('/james.json')
.then(function (response) {
ReactDOM.render(
React.createElement(App, response.data),
document.querySelector('#app')
);
})
.catch(function (error) {
console.error(error.message);
});
</script>