JSFiddle - React, Tailwind, and code Playground

by Fagner Brack March 26, 2018

HTML

<div id="container"></div>

JavaScript

// Change this flag to simulate a breaking response
const simulateDifferentResponse = false;

// -------------------------
// SERVER-SIDE
// -------------------------

let serverResponse = {
  body: {
    user: { name: 'Mary' }
  }
};

if (simulateDifferentResponse) {
  serverResponse = {
    body: {
      userName: 'Mary'
    }
  };
}

// -------------------------
// CLIENT-SIDE
// -------------------------

const responseBody = serverResponse.body;

render('<h1>{user.name}</h1>', responseBody);

// ------------------------------------------------------------
// Ignore the code below
// ------------------------------------------------------------

function render(template, model) {
  const userModel = model.user;
  const parsedTemplate = template.replace('{user.name}', userModel && userModel.name);
	document.getElementById('container').innerHTML = parsedTemplate;
}