#06

.gitignore

@@ -19,3 +19,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea

README.md

@@ -3,6 +3,13 @@
 - Este repositório utiliza [Create React App](https://github.com/facebookincubator/create-react-app);
 - Este repositório é relacionado a essa [Playlist do YouTube](https://www.youtube.com/playlist?list=PLe4SO60BV_r0hkjGFaGcmHCtmD5EUzDxM);
 
+#### Cada **tag** diz respeito a um vídeo da série, sendo elas:
+- [1.0](https://github.com/guilherme-toti/YT-React-Tutorial/tree/1.0): Tutorial de React.JS iniciante, Virtual DOM, JSX, Create React App ([Link do vídeo](https://www.youtube.com/watch?v=ghEdUzwRsHo))
+- [2.0](https://github.com/guilherme-toti/YT-React-Tutorial/tree/2.0): Tutorial de React.JS Iniciante - Components, Props, State ([Link do vídeo](https://www.youtube.com/watch?v=WPYI2CcRX7c))
+- [3.0](https://github.com/guilherme-toti/YT-React-Tutorial/tree/3.0): Tutorial de React.JS iniciante, Component Lifecycle, Constructor ([Link do vídeo](https://www.youtube.com/watch?v=T8tKW-4klWg))
+- [4.0](https://github.com/guilherme-toti/YT-React-Tutorial/tree/4.0): Tutorial de React.JS iniciante, Render e Função Pura ([Link do vídeo](https://www.youtube.com/watch?v=oy-d8v35mVc))
+- [5.0](https://github.com/guilherme-toti/YT-React-Tutorial/tree/5.0): Tutorial de React.JS iniciante, componentDidMount, Listener e Promise ([Link do vídeo](https://www.youtube.com/watch?v=dkhDfulITBc))
+
 ## Comandos principais
   - [npm start](#npm-start)
   - [npm test](#npm-test)

src/App.js

@@ -1,31 +1,13 @@
 import React, { Component } from 'react';
-import axios from 'axios';
 import './App.css';
 
-class App extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      data: []
-    }
-  }
-
-  componentDidMount() {
-    axios.get('https://api.github.com/repositories')
-      .then(({ data }) => {
-        this.setState({ data })
-      })
-  }
+import Repositories from './containers/Repositories'
 
+class App extends Component {
   render() {
-    const { data } = this.state
-
     return (
       <div className="App">
-        <ul>
-          {data.map(item => <li key={item.id}>{item.full_name}</li>)}
-        </ul>
+        <Repositories />
       </div>
     );
   }

src/api/github.js

@@ -0,0 +1,5 @@
+import axios from 'axios'
+
+export const listRepositories = () => axios
+  .get('https://api.github.com/repositories')
+  .then(({ data }) => data)

src/components/Item.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Item = ({ id, full_name }) => (
+  <li key={id}>{full_name}</li>
+)
+
+export default Item

src/containers/Repositories.jsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import {listRepositories} from "../api/github";
+import Item from "../components/Item";
+
+class Repositories extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      data: []
+    }
+  }
+
+  componentDidMount() {
+    listRepositories()
+      .then(data => this.setState({ data }))
+  }
+
+  render() {
+    const { data } = this.state
+
+    return (
+      <ul>
+        {data.map(item => <Item {...item} />)}
+      </ul>
+    )
+  }
+}
+
+export default Repositories