JSFiddle - React, Tailwind, and code Playground

by msfrisbie

HTML

<!-- vue -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>

<!-- react -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>


<div id="app">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>
    <li v-for="todo in todos">
      <!-- <Todo text="{{ todo.text }}"></Todo>
      <span>{{ todo.text }}</span> -->
      <div class="todo"></div>
      <button v-on:click="removeTodo($index)">X</button>
    </li>
  </ul>
</div>

<script type="text/babel">
var Todo = React.createClass({
	render: function() {
  	return <span>{ this.props.text }</span>;
  }
});

// vue
new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: []
  },
  methods: {
    addTodo: function () {
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({ text: text });
        this.newTodo = '';
        console.log(document.getElementsByClassName('todo')[0])
        ReactDOM.render(
        	<Todo text="{text}"></Todo>,
          document.getElementsByClassName('todo')[0]
        );
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1);
    },
    ready: function() {
      console.log('jake')
    }
  }
});

// react
var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);


</script>



<!-- <script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script> -->


<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>