How to input external react app into main html file?

Hello, I’m new in react. So, now I know how to create react app using inline method which is using <script type="text/babel"> tag and literal react code inside its html code and it works perfectly in my browser.
Now I want to separate the react app into another file (.js) in the same folder and using external method. I tried to insert <script src='app.js'></script> in my main html file but it won’t load in my browser (mozilla and chrome). So what did I do wrong? thanks

this is my HTML file code :

<!DOCTYPE html>
<html>
<head>
	<title>Hello React</title>
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
	<div id="hello"></div>
	<script src="app.js">
	</script>
</body>
</html>

and this is my react app code in js (app.js) :


class HelloReact extends React.Component {
	render () {
		return (
			<div>
			<h1>HELLO REACT!</h1>
			</div>
			)
	}
}

ReactDOM.render(
<HelloReact />, 
document.getElementById('hello')
);

And this is my inline method html file which works perfectly :

<!DOCTYPE html>
<html>
<head>
	<title>Hello React</title>
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
	<div id="hello"></div>
	<script type="text/babel">
		class HelloReact extends React.Component {
	render () {
		return (
			<div>
			<h1>HELLO REACT!</h1>
			</div>
			)
	}
}

ReactDOM.render(<HelloReact />, document.getElementById('hello'))
	</script>
</body>
</html>
1 Like

im new too but, shouldnt you have to export that file with the export default App at the final

1 Like

Thank you for your respond! :slight_smile:

I did add those ‘export default’ in my app.js just like this:

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

class HelloReact extends React.Component {
	render () {
		return (
			<div>
			<h1>HELLO REACT!</h1>
			</div>
			)
	}
}

ReactDOM.render(<HelloReact />, document.getElementById('hello'))

export default HelloReact;

Aaanndd it still won’t load :smile:

Im having similar problems…my app doesnt seem to like rendering the html. Hopefully you find out whats going on, I just wanted to say that if your importing react then you do not need react.component. You can just use

import React, { Component } from 'react';

and then

class app extends Component {
  render() {
    return ( returning whatever here
1 Like

I think you can not run your code like that directly in the browser. You are using JSX, which is not valid JavaScript.

// JSX
return (
  <div>
    <h1>Hello React</h1>
  </div>
)

To use the JSX syntax those files must be compiled (translated), so that the browser can understand them.
You can follow those instructions to setup a development environment.

If you want to avoid using those tools you can however write React without using JSX.
Internally the code from above is converted to something like that.

return React.createElement('h1', null, 'Hello React');

I hope, that I helped you.

Good Luck :slight_smile:

2 Likes

Thank you! I learned a lot… I decided to use node.js and run npm create-react-app in command prompt to do the magic. Just like what you’d say that JSX needs to be compiled, babel handle this thing in the backstage. nice tips and refferences! thank you again! :ok_hand::ok_hand::ok_hand:

thank you for the tips!
I’ve found that @nitzlas 's tips helped me, you should try it… or for another refference you can learn from this too:
https://www.youtube.com/watch?v=Ke90Tje7VS0&t=1274s
keep code!

Appreciate it. I’m actually using cloud9 now. Set up with node.js. I actually ran across it from a udemy course im also taking. Glad you got it resolved.