1

In index.html I have:

<div class="header-content-inner" id="example">
    ...
</div>

And then:

<script src="js/react-dom.js"></script>
<script src="js/react.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="js/segui-info.jsx"></script>

This "segui-info" is the external js file with react code in it:

import React from 'react';
import ReactDOM from 'react-dom';

var ex = <h1>It worked!</h1>;

ReactDOM.render(ex, document.getElementById("example"));

As you can guess, the "ex" is not being appended / rendered to that div. I'm a beginner to react and I'm failing to understand why it's not working. In simple examples just like this one they use react code inside a <script> tag. I don't want to use all the react code inside a .html file. What am I doing wrong?

EDIT: This is what I get on the console:

enter image description here

Ericson Willians
  • 7,606
  • 11
  • 63
  • 114
  • do you have any errors in the console?, I do not think "import" works because it requires to be transpiled, and as your importing react-dom and react as external files, those files exposed global variables React and ReactDOM so I guess, there is no need to use import – AngelSalazar Sep 25 '17 at 15:43
  • check this little example https://jsbin.com/laqiribeze/edit?html,js,output, notice that the js tab is set to ES6/babel, so my code is transpiled – AngelSalazar Sep 25 '17 at 15:47
  • I've added a screenshot of the console errors to the post. I've also tried to remove the imports, it did not work. – Ericson Willians Sep 25 '17 at 15:48
  • How that babel tab code is linked to the HTML, there's no – Ericson Willians Sep 25 '17 at 15:50
  • that tab is just an entry point for users to insert code, in the backend JSbin grabs the code I wrote compiles it and then displays it the output tab (which is an iframe) – AngelSalazar Sep 25 '17 at 15:53
  • I use JSBIN, only for testing purposes, if you want to write JSX, better just setup a dev environment using webpack, which will do all the work for you! – AngelSalazar Sep 25 '17 at 15:54
  • [I found the answer to the problem here.](https://stackoverflow.com/a/19059825/1795924) require() does not exist in the browser/client-side JavaScript. – Ericson Willians Sep 25 '17 at 16:05

2 Answers2

0

Just remove import statements from code.

In your script first add 'react' and then add 'react-dom'. It will definitely work!

Below is the simple working example

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8" />
        <script src="https://unpkg.com/react@latest/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
        <script src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script>
        <script type="text/babel" src="ext.jsx"></script>
</head>
<body>
        <div id="example"/>
</body>
</html>

In ext.jsx will have

var ex = <h1>It worked!</h1>;
ReactDOM.render(ex, document.getElementById('example'));

You can run the same code snippet on jsfiddle

Community
  • 1
  • 1
Elumalai Kaliyaperumal
  • 1,498
  • 1
  • 12
  • 24
  • When I do this, I get the following error on the console: `Uncaught ReferenceError: ReactDOM is not defined`. It can't find ReactDOM because it's not being imported, and when I import, it says that "require" is not defined. – Ericson Willians Sep 25 '17 at 16:16
-1

In react you use functions to return JSX, in your example var ex = <h1>It worked!</h1>; is probably typecasting to just a string, rather you need to make it a function that returns the code you want. Try this below: 

import React from 'react';
import ReactDOM from 'react-dom';

const ex = () => (
    <h1>It worked!</h1>;
);    

ReactDOM.render(ex, document.getElementById("example"));
melmquist
  • 440
  • 1
  • 4
  • 12