Elemento HTML simples no código react.js não funciona no localhost Xampp

Question

Estou tentando um código muito básico em react.js :

O arquivo index.php tem:

<!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>

O arquivo Javascript my.jstem:

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')
);

Mas, como saída, recebo código JS bruto em vez de JS sendo renderizado:

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

Como fazer funcionar?

EDIT: Você pode encontrar o código em execução no codepen aqui . A elementvariável é declarada como:

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

Mas usei aspas simples em torno do elemento, caso contrário, vejo um erro no console do navegador:
Uncaught SyntaxError: Token inesperado '<'

Edit2: Corrigido o link codepen. Novo link é este .

Answer 1

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

Answer 2

Você está passando uma corda para render. Você precisa passar o JSX.

Experimente algo como -

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

Para ter certeza de que JSX está sendo entendido, você precisa incluir o pré-processador Babel também. Adicione o Babel CDN às suas importações -

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

Uma nota para usuários do Node

Em um ambiente Node, onde você não pode chamar ReactDOM.render (), você precisará certificar-se de importar React, assim -

import React from 'react';

Answer 3

Parece que você está tentando renderizar JSX diretamente, mas isso requer um transpiler.

reaja sem jsx

Cada elemento JSX é apenas um açúcar sintático para chamada React.createElement(component, props, ...children). Portanto, qualquer coisa que você possa fazer com JSX também pode ser feito apenas com JavaScript.

O código poderia ser mais parecido com

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'),
);

Ou um pouco mais simples

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'),
);