JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>
CSS
.loading {
font-size: 72px;
font-family: monospace;
animation: loading 1s infinite;
}
@keyframes loading {
0%, 100% {
color: red;
}
50% {
color: blue;
}
}
Babel + JSX
class App extends React.Component {
state = {
users: null,
}
componentDidMount() {
// искуственная задержка, чтобы можно было полюбоваться на индикатор загрузки
setTimeout(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(r => r.json())
.then(users => this.setState({ users }));
}, 3000);
}
render() {
const { users } = this.state;
return (
<div>
{users && <table>
<tbody>
{users.map(n => (
<tr key={n.id}>
<td>{n.name}</td>
<td>{n.email}</td>
</tr>
))}
</tbody>
</table>}
{!users && <div className="loading">LOADING</div>}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));