Il semplice elemento HTML nel codice react.js non funziona in Xampp localhost

Question

Sto provando un codice molto semplice in react.js :

Il file index.php ha:

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

Il file Javascript my.jsha:

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

Ma come output ottengo il codice JS grezzo invece di JS che viene renderizzato:

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

Come farlo funzionare?

EDIT: Puoi trovare il codice in esecuzione in codepen qui . La elementvariabile è dichiarata come:

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

Ma ho usato virgolette singole attorno all'elemento, altrimenti vedo un errore nella console del browser: Errore di
sintassi non rilevato: token imprevisto "<"

Edit2: corretto il collegamento codepen. Il nuovo collegamento è questo .

Answer 1

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

Answer 2

Stai passando una stringa a render. Devi passare JSX.

Prova qualcosa come -

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

Per assicurarti che JSX venga compreso, devi includere anche il preprocessore Babel. Aggiungi il CDN Babel alle tue importazioni -

<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 per gli utenti di Node

In un ambiente Node, dove non puoi chiamare ReactDOM.render (), dovrai assicurarti di importare React, in questo modo:

import React from 'react';

Answer 3

Sembra che tu stia cercando di eseguire il rendering direttamente di JSX, ma questo richiede un transpiler.

reagire senza jsx

Ogni elemento JSX è solo zucchero sintattico per la chiamata React.createElement(component, props, ...children). Quindi, tutto ciò che puoi fare con JSX può essere fatto anche con un semplice JavaScript.

Il codice potrebbe essere più simile 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 po 'più semplicemente

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