how to use adminlte in reacts

1import React, { Component } from 'react';
2import AdminLTE, { Sidebar, Content, Row, Col, Box, Button } from 'adminlte-2-react';
3
4const { Item } = Sidebar;
5
6class HelloWorld extends Component {
7  state = {}
8
9  render() {
10    return (<Content title="Hello World" subTitle="Getting started with adminlte-2-react" browserTitle="Hello World">
11      <Row>
12        <Col xs={6}>
13          <Box title="My first box" type="primary" closable collapsable footer={<Button type="danger" text="Danger Button" />}>
14            Hello World
15          </Box>
16        </Col>
17        <Col xs={6}>
18          <Box title="Another box">
19            Content goes here
20          </Box>
21        </Col>
22      </Row>
23    </Content>);
24  }
25}
26
27class App extends Component {
28
29  sidebar = [
30    <Item key="hello" text="Hello" to="/hello-world" />
31  ]
32
33  render() {
34    return (
35      <AdminLTE title={["Hello", "World"]} titleShort={["He", "we"]} theme="blue" sidebar={this.sidebar}>
36        <HelloWorld path="/hello-world" />
37      </AdminLTE>
38    );
39  }
40}
41
42export default App;
43
44