Пишу первый раз на реакте, в чем проблема?

Каждый кусок кода - это отдельный файл.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>


   <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>
    <script src="index.js"></script>
  </body>
</html>


import Header from './Header';

const domContainer = document.querySelector('#container');
const root = ReactDOM.createRoot(domContainer);
root.render(
  
    <Header/>
   
);


function Header() { 

        return ( <div>hsas</div>)
}

export default Header;


Ожидается, что на странице появится "hsas", но появляется мой собственный код.
Что я делаю не так? Я всего неделю изучаю реакт и вот первый раз решил на нем написать.

p.s., В гугле искал, не помогло(для модераторов). Кажется, что все делаю верно.
  • Вопрос задан
  • 235 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
Вот это вот:
root.render(
    <Header/>
);

Это магия под названием jsx. Она будет работать только если использовать специальные механизмы сборки, которые превратят сие непотребство в нормальный javascript.

Если же ты хочешь просто вставить свой код на страницу без предвариательных танцев, то тебе придётся писать на чистом javascript, условно так:
<script src="index.js" type="module"></script>
import Header from './Header.js';

const domContainer = document.querySelector('#container');
const root = ReactDOM.createRoot(domContainer);
root.render(
  React.createElement(Header)
);

function Header() { 
  return React.createElement('div', null, 'hsas')
}
export default Header;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы