React Component not displayed in HTML

Question

I am just learning react and cant display my component.

I have a welcome html file with the following code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://thymeleaf.org"><head>
    <meta charset="utf-8" />
    <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.26.0/babel.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
<div class="root"></div>
<script  type = "text/babel" src= "App.js"> </script>
<script>
    import {Component} from "react";

    class App extends Component {
        render() {
            return(
                <h1>Hello everyone nice to see it finally works!!!</h1>)
        }
    }

    ReactDOM.render(<App />, document.querySelector(".root"));</script>
</body>
</html>

This is my App.js

import React, {Component} from 'react'

class App extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            name: '',
            appVersion: ''
        }
    }

    render(){
        return(
            <h1>Hello everyone nice to see it finally works!!!</h1>
        )
    }

}

Note: After my App.js didnt work i tried using the component inline of the html file as you can see. But even that doesnt help. Hope someone can give me a hint.

Please try to use npx create-react-app which will give you a basic structure of your project and preferably use hooks with functional components, is easier. URLs for create project: https://reactjs.org/docs/create-a-new-react-app.html and hooks https://reactjs.org/docs/hooks-reference.html — Philipos D., Oct 17 '21 at 17:54

score 0 · Answer 1 · answered Oct 18 '21 at 17:44

I think it doesn't work to use external scripts (<script src="...">) together with the in-browser-babel-transpiler (not sure though).

It does work with either

JSX and inline code, or
external script without JSX

The most common approach is to set up a node.js project including webpack, server, babel etc., e.g. with create-react-app.

1. JSX and inline code

Here you don't need (and can't use) the import.
React is already imported into the global scope by the <script ...> tag. To use Component you can instead use React.Component:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <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/babel.min.js"></script>
</head>

<body>
<div class="root"></div>
<script type="text/babel">
    class App extends React.Component {
        render() {
            return(
                <h1>Hello everyone nice to see it finally works!!!</h1>
            );
        }
    }
    ReactDOM.render(<App />, document.querySelector(".root"));
</script>
</body>
</html>

2. external script, without JSX

Importing <script src="app.js"> apparently works only without JSX inside the app.js (i.e. without babel-transpiler), because of CORS restrictions:

// index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <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/babel.min.js"></script>
</head>

<body>
<div class="root"></div>
<script src="app.js"></script>
<script type="text/babel">
    ReactDOM.render(<App />, document.querySelector(".root"));
</script>
</body>
</html>

// app.js
class App extends React.Component {

    constructor( props ){
        super(props);
        this.state = {
            name: 'some name',
            appVersion: ''
        };
    }

    render(){
        return [
            React.createElement( 'h1', null, 'it works, but without JSX! ' ),
            React.createElement( 'p', null, 'Name: ' + this.state.name ),
        ];
    }
}

React Component not displayed in HTML

1 Answers1

1. JSX and inline code

2. external script, without JSX

Linked