Ein einfaches HTML-Element im Code von react.js funktioniert in Xampp localhost nicht

Question

Ich versuche einen sehr einfachen Code in react.js :

Die Datei index.php enthält:

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

Javascript-Datei my.jshat:

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

Aber als Ausgabe bekomme ich rohen JS-Code, anstatt dass JS gerendert wird:

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

Wie mache ich es zum Laufen?

BEARBEITEN: Den laufenden Code finden Sie hier im Codepen . Die elementVariable wird deklariert als:

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

Ich habe jedoch ein einfaches Anführungszeichen um das Element verwendet, da sonst ein Fehler in der Browserkonsole angezeigt wird:
Nicht erfasster Syntaxfehler: Unerwartetes Token '<'

Edit2: Der Codepen-Link wurde behoben. Neuer Link ist das .

Answer 1

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

Answer 2

Sie übergeben eine Zeichenfolge an render. Sie müssen JSX übergeben.

Versuchen Sie etwas wie -

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

Um sicherzustellen, dass JSX verstanden wird, müssen Sie auch den Babel-Präprozessor einbeziehen. Fügen Sie das Babel CDN zu Ihren Importen hinzu -

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

Ein Hinweis für Node-Benutzer

In einer Knotenumgebung, in der Sie ReactDOM.render () nicht aufrufen können, müssen Sie sicherstellen, dass Sie Reactwie folgt importieren :

import React from 'react';

Answer 3

Sieht so aus, als würden Sie versuchen, JSX direkt zu rendern, dies erfordert jedoch einen Transpiler.

reagiere ohne jsx

Jedes JSX-Element ist nur syntaktischer Zucker zum Aufrufen React.createElement(component, props, ...children). Alles, was Sie mit JSX tun können, kann auch mit einfachem JavaScript erledigt werden.

Code könnte möglicherweise eher so aussehen

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

Oder etwas einfacher

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