React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Fagner Brack February 21, 2018

HTML

<div id="index-html-simulation"></div>

JavaScript

//===============================
// T̶H̶E̶ ̶A̶P̶I̶ ̶B̶A̶C̶K̶-̶E̶N̶D̶ ̶P̶R̶O̶J̶E̶C̶T̶
// THE WEB SERVER
//===============================

const indexHtmlPageResponseBody = `
  <div>
    <div id='fragment-container'></div>
    <script>
      fetchHTMLFragment('/todo-list').then((todoListPageResponseBody) => {
        document.getElementById('fragment-container').innerHTML = todoListPageResponseBody;
      });
    <\/script>
  <div>
`;

// GET /todo-list
const fetchHTMLFragment = () => Promise.resolve(`
  <section>
    <h1>John Doe</h1>
    <ul>
      <li><strike>Go to shop</strike></li>
      <li>Buy some clothes</li>
      <li>Buy food</li>
    </ul>
  </section>
`);

//  Just simulates the browser loading the index.html and evaluating the scripts
document.getElementById('index-html-simulation').innerHTML = indexHtmlPageResponseBody;
eval(document.getElementById('index-html-simulation').querySelector('script').innerHTML);

//====================================
// T̶H̶E̶ ̶C̶L̶I̶E̶N̶T̶ ̶F̶R̶O̶N̶T̶-̶E̶N̶D̶ ̶P̶R̶O̶J̶E̶C̶T̶
// THE BROWSER
//====================================

// no code, WOW!