L'élément HTML simple dans le code react.js ne fonctionne pas dans Xampp localhost

Question

J'essaye un code très basique dans react.js :

Le fichier index.php a:

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

Le fichier Javascript my.jsa:

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

Mais en sortie, j'obtiens du code JS brut au lieu du rendu de JS:

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

Comment le faire fonctionner?

EDIT: Vous pouvez trouver le code en cours dans codepen ici . La elementvariable est déclarée comme:

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

Mais j'ai utilisé un guillemet simple autour de l'élément, sinon je vois une erreur dans la console du navigateur:
Uncaught SyntaxError: Unexpected token '<'

Edit2: Correction du lien codepen. Le nouveau lien est celui-ci .

Answer 1

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

Answer 2

Vous passez une chaîne à render. Vous devez passer JSX.

Essayez quelque chose comme -

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

Pour vous assurer que JSX est bien compris, vous devez également inclure le préprocesseur Babel. Ajoutez le CDN Babel à vos importations -

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

Une note pour les utilisateurs de Node

Dans un environnement Node, où vous ne pouvez pas appeler ReactDOM.render (), vous devrez vous assurer que vous importez React, comme ceci -

import React from 'react';

Answer 3

On dirait que vous essayez de rendre directement JSX, mais cela nécessite un transpilateur.

réagir sans jsx

Chaque élément JSX est juste du sucre syntaxique pour l'appel React.createElement(component, props, ...children). Ainsi, tout ce que vous pouvez faire avec JSX peut également être fait avec juste du JavaScript.

Le code pourrait ressembler davantage à

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 un peu plus simplement

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