React doesn't render in Electron App

Question

I've been trying to run some of the basic React examples in Electron App, but nothing shows up, even though there is no errors.

Here's a file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      const React = require('react');
      const ReactDOM = require('react-dom');

      ReactDOM.render(
        <h1>Hello World</h1>,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

I have the following packages installed: react, react-dom and electron. Am I doing something wrong? Thanks in advance!

kingdaro · Accepted Answer · 2018-04-30 21:04:38Z

2

type="text/babel" isn't recognized by browsers as a valid script type, so it'll just ignore it and skip over it completely, hence the lack of any error. You need to include the babel script to make it parse, like so:

<body>
  <div id="root"></div>

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    // your react code here
  </script>
</body>

This is fine for exploration and prototyping, but it's not good if you want to release the app for others to use. Having babel parse the script on-the-fly can weigh on performance and memory usage.

Instead, look into a tutorial on how to pre-compile your scripts and run them that way. This boilerplate could serve as a good reference.

answered Apr 30, 2018 at 21:04

kingdaro

12.1k3 gold badges37 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React doesn't render in Electron App

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related