Простой HTML-элемент в коде react.js не работает в Xampp localhost

Question

Я пробую очень простой код в response.js :

Файл index.php имеет:

<!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 my.jsесть:

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

Но в качестве вывода я получаю необработанный код JS вместо визуализации JS:

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

Как заставить его работать?

EDIT: Вы можете найти исполняемый код в codepen здесь . elementПеременная объявлена как:

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

Но я использовал одинарную кавычку вокруг элемента, иначе я вижу ошибку в консоли браузера:
Uncaught SyntaxError: Unexpected token '<'

Edit2: исправлена ​​ссылка на код. Новая ссылка такая .

Answer 1

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

Answer 2

Вы передаете строку в render. Вам нужно передать JSX.

Попробуйте что-нибудь вроде -

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

Чтобы убедиться, что JSX понимается, вам также необходимо включить препроцессор Babel. Добавьте CDN Babel к вашему импорту -

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

Примечание для пользователей Node

В среде Node, где вы не можете вызвать ReactDOM.render (), вам нужно будет убедиться, что вы импортируете React, например:

import React from 'react';

Answer 3

Похоже, вы пытаетесь напрямую отобразить JSX, но для этого требуется транспилятор.

реагировать без jsx

Каждый элемент JSX - это просто синтаксический сахар для вызова React.createElement(component, props, ...children). Итак, все, что вы можете делать с JSX, можно сделать и с помощью простого JavaScript.

Код мог бы быть больше похож на

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

Или немного проще

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