1

Can't use Node.js, jsx, any extension or server, or any other thing (rule at work).

I have an HTML file with three scripts using React.js, this is the code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js" crossorigin></script>
    <title>HTML with multiple React.js scripts</title>
  </head>
  <body>
    <p>HTML with multiple scripts using React.js... without Node.js, jsx or any other thing</p>
    <div>
      <div id="divComponent1"></div>
      <div id="divComponent2"></div>
      <div id="divComponent3"></div>
    </div>
    <script src="component1.js"></script>
    <script src="component2.js"></script>
    <script src="component3.js"></script>
  </body>
</html>

component1.js:

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'This is the first React.js component.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Component number one!'
    );
  }
}

const domContainer = document.querySelector('#divComponent1');
ReactDOM.render(e(LikeButton), domContainer);

component2.js:

'use strict';

const list =
  React.createElement('div', {},
    React.createElement('h1', {}, 'Component number two'),
    React.createElement('ul', {},
      [
        React.createElement('li', {}, 'Without Node.js'),
        React.createElement('li', {}, 'Without jsx'),
        React.createElement('li', {}, 'Without any server')
      ]
    )
  );

const divComponent2 = document.querySelector('#divComponent2');
ReactDOM.render(list, divComponent2);

component3.js:

var x = "Johnny B. Goode (Component three)";

class JohnnyBGoode extends React.Component {

    render() {
      return  React.createElement('div', {},
                React.createElement("h1", {}, x),
                React.createElement("audio", { id: "woof", controls: "controls", src: "johnny.mp3"}),
      );
    }
  }

const divComponent3 = document.querySelector('#divComponent3');

ReactDOM.render(
  React.createElement(JohnnyBGoode, {}, null),
  document.getElementById('divComponent3')
);

So, I want to add only one script in the HTML file, and run/render all the others scripts/components from there, something like that:

<script src="index.js"></script>

How can I achieve this? Remember, can't use Node or any other thing.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
PaulWZ
  • 81
  • 4
  • 1
    Have you tried just concatenating the scripts together manually? In other words, create a new file, index.js, and copy and paste the contents of your three script files into it. – Heretic Monkey Dec 26 '19 at 15:34
  • Maybe some ideas [here](https://stackoverflow.com/q/950087/4003419). – LukStorms Dec 26 '19 at 15:45

0 Answers0