El elemento HTML simple en el código react.js no funciona en Xampp localhost

Question

Estoy probando un código muy básico en react.js :

El archivo index.php tiene:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <div id="root"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script type="text/javascript" src="my.js"></script>

  </body>
</html>

El archivo Javascript my.jstiene:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  '<h1>Hello, {formatName(user)}!  </h1>'
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Pero como salida, obtengo código JS sin formato en lugar de renderizar JS:

<h1>Hello, {formatName(user)}! </h1>

¿Cómo hacerlo funcionar?

EDITAR: Puede encontrar el código de ejecución en codepen aquí . La elementvariable se declara como:

const element = <h1>Hello, {formatName(user)}!</h1>;

Pero usé comillas simples alrededor del elemento, ya que de lo contrario veo un error en la consola del navegador:
Error de sintaxis no detectado: token inesperado '<'

Edit2: se corrigió el enlace del codepen. El nuevo enlace es este .

Answer 1

const element = '<h1>Hello, ' + formatName(user) + '! </h1>';

Answer 2

Le estás pasando una cadena a render. Necesitas pasar JSX.

Prueba algo como:

const element = <h1>{formatName(user)}</h1>

Para asegurarse de que se entienda JSX, también debe incluir el preprocesador de Babel. Agregue el CDN de Babel a sus importaciones -

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" integrity="sha512-kp7YHLxuJDJcOzStgd6vtpxr4ZU9kjn77e6dBsivSz+pUuAuMlE2UTdKB7jjsWT84qbS8kdCWHPETnP/ctrFsA==" crossorigin="anonymous"></script>

Una nota para los usuarios de Node

En un entorno de nodo, donde no puede llamar a ReactDOM.render (), deberá asegurarse de importar React, así:

import React from 'react';

Answer 3

Parece que está intentando renderizar JSX directamente, pero esto requiere un transpilador.

reaccionar sin jsx

Cada elemento JSX es simplemente azúcar sintáctico para llamar React.createElement(component, props, ...children). Por lo tanto, cualquier cosa que pueda hacer con JSX también se puede hacer con solo JavaScript.

El código posiblemente podría parecerse más a

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const Element = ({ user }) => React.createElement(
  'h1',
  null,
  `Hello, ${formatName(user)}!`,
);

ReactDOM.render(
  React.createElement(Element, { user }, null),
  document.getElementById('root'),
);

O un poco más simple

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

ReactDOM.render(
  React.createElement('h1', null, `Hello, ${formatName(user)}!`),
  document.getElementById('root'),
);

// or

ReactDOM.render(
  <h1>Hello, {formatName(user)}!</h1>,
  document.getElementById('root'),
);