JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.js"></script>

<div id="app">
  <ul id="todo-list"></ul>
</div>

JavaScript

var data = []
var dataCount = 5

for (var i = 0; i < dataCount; i++) {
	var completed = faker.random.boolean()
  var title = faker.lorem.sentence()
  data.push({
  	completed: completed,
    title: title
  })
}

var TodoItemTemplate = `<li>{{title}}</li>`

var app = document.getElementById('app')
var h = function () {}
var render = function (element, template, props) {
	var html = props.map(function (prop) {
		return template.replace(/({{.+}})/g, function (match) {
	    return prop[match.slice(2, -2)]
    });
  }).join('')
	element.innerHTML = html
}


render(app, TodoItemTemplate, data)