CODEWITHSUNDEEP
javascriptreactjs
Adam
Adam

Reputation: 4178

React - Template Not Injecting to HTML Page

I've got the following content in a /public/index.html file:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>Foobar/title>
</head>

<body>
    <div id='app'></div>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <script src="/scripts/app.js"></script>
</body>

</html>

I have a React template, /src/app.js, with the following:

'use strict';

console.log("Indecision application is running...");

var appRoot = document.getElementById('app');

var template = React.createElement(
        'h1',
        null,
        'Testing'
);

ReactDom.render(template, appRoot);

I do a little transform w/Babel:

babel src/app.js --out-file=public/scripts/app.js --presets="env,react"

My page comes back blank (see source at end of post). The content from my template isn't injecting into the HTML page. I can't see the problem.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>Foobar</title>
</head>

<body>
    <div id='app'></div>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <script src="/scripts/app.js"></script>
<!-- Code injected by live-server -->
<script type="text/javascript">
    // <![CDATA[  <-- For SVG support
    if ('WebSocket' in window) {
        (function() {
            function refreshCSS() {
                var sheets = [].slice.call(document.getElementsByTagName("link"));
                var head = document.getElementsByTagName("head")[0];
                for (var i = 0; i < sheets.length; ++i) {
                    var elem = sheets[i];
                    head.removeChild(elem);
                    var rel = elem.rel;
                    if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
                        var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
                        elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
                    }
                    head.appendChild(elem);
                }
            }
            var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
            var address = protocol + window.location.host + window.location.pathname + '/ws';
            var socket = new WebSocket(address);
            socket.onmessage = function(msg) {
                if (msg.data == 'reload') window.location.reload();
                else if (msg.data == 'refreshcss') refreshCSS();
            };
            console.log('Live reload enabled.');
        })();
    }
    // ]]>
</script>
</body>

</html>

Upvotes: 2

Views: 334

Answers (1)

Adam
Adam

Reputation: 4178

The problem was the way I was loading live-server. I was loading live server using the following:

live-server public/index.html

It should've been the following...

live-server public/

Upvotes: 1

Related Questions