CODEWITHSUNDEEP
javascripthtmlreactjs
Silberio
Silberio

Reputation: 21

React simple "Hello World" won't render

I've been googling around, and looking here on StackOverflow and I have seen this question pop up, but they all seem very case specific to what the people who asked, and none of the solutions have worked in my case.

So a little context: I have a very simple message board with a back-end on Spring boot, which works fine. However, I have problems trying to integrate React. I have a home.html page that currently looks like this:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">

<head>
<title>SilbBoard :-)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600"
	rel="stylesheet" type="text/css" />

<!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/skeleton.css" />
<link rel="stylesheet" href="css/style.css" />

<!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png" />

<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>


</head>

<body>
	<h1>Welcome to SilbBoard!</h1>
	<div id="root"></div>
	
	 <script src="js/app.js" type="text/jsx"></script>
</body>

</html>

Most of the meta data comes from the Skeleton boilerplate, which works fine. Then I have a javascript file which, for testing purposes, only contains the following: 

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

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

However, this very simple h1 with "Hello world" won't render in my webpage, nor does it give me any errors.

Is there something I'm missing? Thanks in advance.

Upvotes: 0

Views: 216

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074295

The script file you're using doesn't support import because it's targeted at web browsers, which are only just now getting support for JavaScript's modules. With the scripts you're using, React and ReactDOM are defined as globals. No need for import.

Separately, browsers don't natively support JSX. To use it, you would need to use a transpiler of some kind. Typically you include the transpiler step in the build process, and then send the resulting transpiled code to the browser. That said, you can use in-browser transpiling, but it's best not used for production purposes.

For instance, Stack Overflow's Stack Snippets use Babel's in-browser transpiling behind the scenes if you tick the "Use BabelJS / ES2015" checkbox:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>

I suggest reading through the React documentation a bit more, in particular the Try React and Add React to a New App pages.

Upvotes: 1

Related Questions