revised structure of index file

index.js

@@ -1,4 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { App } from './src'
-ReactDOM.render(<App />, document.getElementById('app'))

src/app.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Navbar, Main, Footer } from './components'
+
+
+const App = () => {
+  return (
+    <div>
+      <Navbar />
+      <Main />
+      <Footer />
+    </div>
+  )
+}
+
+export default App

src/components/index.js

@@ -1,53 +1,3 @@
-import React, { Component } from 'react'
-import axios from 'axios'
-import { Items } from './items'
-
-class App extends Component {
-  constructor() {
-    super()
-    this.state = { loading: true }
-  }
-
-  componentDidMount() {
-    this.fetchAPI()
-  }
-
-  async fetchAPI() {
-    try {
-      const { data } = await axios.get('/api')
-      const { ascii } = await data
-      await console.log(ascii)
-      await this.fetchItems()
-      await this.setState({ ascii })
-    } catch (e) {
-      console.log(e)
-    }
-  }
-
-  async fetchItems() {
-    try {
-      const { data } = await axios.get('/api/items')
-      this.setState({ loading: false, items: data })
-    } catch (e) {
-      console.log(e)
-    }
-  }
-  renderData() {
-    return (
-      <div className="mt-5">
-        <Items {...this.state} />
-      </div>
-    )
-  }
-  renderError() {
-    return <div>{this.state.error} </div>
-  }
-  render() {
-    if (this.state.loading) return <div />
-    if (this.state.items) return this.renderData()
-    if (this.state.error) return this.renderError()
-    return <div />
-  }
-}
-
-export default App
+export {default as Main } from './main'
+export {default as Navbar } from './navbar'
+export {default as Footer } from './footer'

src/components/main.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import axios from 'axios'
+import { Items } from './items'
+import {Container, Row, Col} from 'react-bootstrap'
+
+class App extends Component {
+  constructor() {
+    super()
+    this.state = { loading: true }
+  }
+
+  componentDidMount() {
+    this.fetchApi()
+  }
+
+  async fetchApi() {
+    try {
+      const { data } = await axios.get('/api/items')
+      this.setState({ loading: false, items: data })
+    } catch (e) {
+      console.log(e)
+      this.setState({loading: false, apiNotFound: true})
+    }
+  }
+
+  renderData() {
+    return <Items {...this.state} />
+  }
+
+  renderApiNotFound() {
+    return <Container className="mt-5"><Row/><Row><Col/>
+      <Col>Hello! The client is working correctly, but no API was found.</Col>
+      <Col/></Row></Container>
+  }
+  render() {
+    if (this.state.loading) return <div />
+    if(this.state.apiNotFound) return this.renderApiNotFound()
+    if (this.state.items) return this.renderData()
+    return <div />
+  }
+}
+
+export default App

src/index.js

@@ -1,14 +1,4 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import Main from './components'
-import Navbar from './components/navbar'
-import Footer from './components/footer'
-
-ReactDOM.render(
-  <div>
-    <Navbar />
-    <Main />
-    <Footer />
-  </div>,
-  document.getElementById('app')
-)
+import App from './app'
+ReactDOM.render(<App />, document.getElementById('app'))