Почему JS выдает синтаксическую ошибку на JSX?

Question

[igreklpofrss]

Только изучаю react. Хочу писать на JSX синтаксисе. Во всех гайдах вижу одну и туже схему.
1. Инициализируем React(я это делаю через тэг script)

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

2. Первый же пример начинается с этого.

var a = <p>Some React element</p>;

ReactDOM.render(a, document.getElementById("root"));

Но я ловлю синтаксическую ошибку JS:
caught SyntaxError: Unexpected token '<'
Почему JS помечает этот синтаксис как ошибку? Полистал разные гайды, официальную документацию. Везде на переменные назначаются html тэги(в JSX синтаксисе, конечно) по такому принципу

Comments

[Михаил]

Где написан этот скрипт? В отдельном файле или прямо в HTML? Если отдельно, то какое расширение используется у файла?

[Михаил]

дополню еще то, что Вы скорее всего читаете старую документацию, поскольку у React есть новая документация, где Ваш пример будет выглядеть иначе:

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

[igreklpofrss]

Михаил, в отдельном файле. Расширение .js

[Михаил]

igreklpofrss, установи расширение .jsx

[igreklpofrss]

Михаил, хмм.. вроде бы немного разобрался!!! Спасибо! Только не пойму как теперь совмещать .js и .jsx. Я ведь могу без синтаксических проблем из .jsx импортировать функции в .js и вызывать их? Или какая схема реализации может быть, не подскажете?

[Михаил]

igreklpofrss, советую Вам вообще не пытаться даже использовать React в виде подключения его в .html файлы в виде скриптов - это в любом случае Вам никогда не пригодится и только лишний раз будет запутывать (по крайней мере когда я пытался втянуться в React у меня было так).

Поэтому сразу советую просто разобрать как создать именно React приложение через:

• Create React App
  
• Create vite@latest ...
  

Советую сначала ознакомиться именно с первым вариантом - разобраться можно будет за один вечер как все это устроено и как все это собирается, интернет в помощь, на ютубе большое количество интересных роликов есть.

На счет того, можно ли использовать .js файлы вместе с .jsx - да, можно, но опять-таки - начните лучше с создание React приложений через те способы, которые я перечислил выше, а не через обычное подключение через скрипты))

[Михаил]

igreklpofrss, отличный ролик для ознакомления с React для начинающих. Учитывая то, что Вам в любом случае нужно будет разобраться с тем, как работает node.js - это будет определённо полезно)

Answer 1

[alekssamos]

var a = `<p>Some React element</p>`;
А если так?