Capitolo 2 - file react.html - Uncaught SyntaxError: Unexpected token '<'

[Teopando]

Io ho provato a inserire Babel all'interno della pagina HTML react.html ma nonostante questo il browser mi segna lo stesso errore "Uncaught SyntaxError: Unexpected token '<'" come se non riuscisse ad interpretare il JSX.
Qualcuno riscontra lo stesso problema?

[Teopando]

Per intenderci l'ho scritto come sotto ma aprendolo con il browser non funziona (la parte commentata dell'header è perchè volevo testare la pagina tenendo le librerie salvate in locale ma non è servito):

<script src="babel.min.js" ></script> <script src="react.development.js" ></script> <script src="react-dom.development.js" ></script>

	<script type="text/javascript">
	
	function AppTitle () {
	  return ( <h1> Todo app </h1> );
	}

	function AppMessage() {
	  return ( <p>Benvenuto!</p> );
	}

	function App() {
	  return (
		<div>
		  <AppTitle />
		  <AppMessage />
		</div>
	  );
	}
		
	const root = ReactDOM.createRoot(document.getElementById("root"));
	root.render(<App />);

	</script>
</body>

[Teopando]

Soluzione trovata, il tag script va impostato come type="text/babel" e tutto si risolve :)

<script type="text/babel">

[lifeisfoo]

Ciao @Teopando, sei riuscito a trovare un refuso che mi è proprio sfuggito...
Grazie di averlo segnalato subito!

Questa è la versione completa e corretta del file react.html del secondo capitolo.

<html>
  <head>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- qui deve essere text/babel e non text/javascript -->
    <script type="text/babel"> 
      function AppTitle() {
        return <h1> Todo app </h1>;
      }

      function AppMessage() {
        return <p>Benvenuto!</p>;
      }

      function App() {
        return (
          <div>
            <AppTitle />
            <AppMessage />
          </div>
        );
      }

      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<App />);
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

[neoSnakex34]

Ero appena incappato nello stesso problema e son venuto a controllare se fosse stato segnalato, felice che lo sia. Manuale molto interessante e di facile comprensione per frontend developer!