Когда дело касается React, я новичок. Я решил включить в файл CDN React и ReactDOM.

У меня проблемы с рендерингом этого компонента.

<script type="text/babel">

        function Header(){

        return(
            <div>
            <p>Blog</p>
            </div>
            );

        }

    ReactDOM.render(<Header />);
</script>
-1
Ernest Osei 22 Фев 2021 в 02:04

1 ответ

Лучший ответ

Вы не визуализируете реакцию внутри DOM с помощью тега сценария.

ReactDOM.render использует 2 параметра: основной компонент (приложение) и местоположение (в основном тег div внутри тела с идентификатором root.

Итак, правильный способ визуализации вашего первого React App.js будет:

const App = () => {
  return <div>Hello World</div>
}

Каждый компонент React должен начинаться с заглавной буквы.

Чтобы отобразить этот компонент App.js, вы создадите компонент index.js с ReactDOM.render (), например:

import ReactDOM from 'react-dom';
import App from './App.js'

ReactDOM.render(<App />, document.querySelector('#root'))

HTML будет:

<!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='root'></div>
</body>
</html>

Вы не добавляете JS внутри DOM или какие-либо HTML-теги. вы все делаете с React JSX.

Итак, если вам нужен заголовок, вы создаете компонент Header и обертываете его внутри компонента App.js.

Я действительно рекомендую вам узнать больше о React, потому что, если вы не уверены, что делаете, это будет беспорядок, и ваше приложение будет иметь очень низкую производительность.

Ознакомьтесь с документами React здесь.

0
Uria Levi 21 Фев 2021 в 23:50