JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.2/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.14.0/axios.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container" id="app">
  
  <ul class="list-group">
    <li v-for="repo in repos" class="list-group-item">
      <span class="badge"> {{ repo.stargazers_count }} <i class="fa fa-star-o"></i></span>
      {{ repo.name }} 
    </li>
  </ul>
  
</div>

Babel + JSX

const ENDPOINT = 'https://api.github.com/orgs/codecasts/repos';

new Vue({
  el: '#app',
  data: {
    repos: [],
  },
  mounted() {
  	axios.get(ENDPOINT)
    	.then(response => response.data)
      .then(data => Vue.set(this, 'repos', data));
  }
});