JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<div id='app'></div>
CSS
* {
font-family: Tahoma;
}
.list {
padding: 8px;
}
.list .entries .entry {
padding: 8px;
}
.loader {
text-align: center;
}
.error {
border: 1px solid red;
color: red;
text-align: center;
padding: 8px;
}
JavaScript
const url = 'https://raw.githubusercontent.com/oasis-open/cti-stix-visualization/master/test.json';
class Loader extends React.Component {
render() {
return React.createElement('div', {
className: 'loader',
children: ['Грузим...']
});
}
}
class FetchError extends React.Component {
render() {
const { error } = this.props;
return React.createElement('div', {
className: 'error',
children: [error]
});
}
}
class Application extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
list: null
};
}
componentDidMount() {
fetch(url)
.then(response => response.json())
.then(({ objects }) => {
this.setState({
list: _
.uniq(objects.map(({ type }) => type))
.filter(x => x !== 'relationship' && x !== 'marking-definition')
});
})
.catch(e => {
this.setState({
error: 'Пизда'
});
});
}
render() {
const { list, error } = this.state;
if(error) {
return React.createElement(FetchError, { error });
}
if(!list) {
return React.createElement(Loader);
}
return (
React.createElement(
'div',
{
className: 'entries',
children: list.map(element => React.createElement(
'div',
{
className: 'entry',
children: [element]
}
))
}
)
);
}
}
ReactDOM.render(
React.createElement(Application),
document.getElementById('app')
);