Проблема рендеринга компонента React

Question

Всем привет, я только начал изучать React и столкнулся с проблемой. На разных форумах предлагали подключить Babel для parsing jsx, но и это не помогло, а только наоборот вызвало кучу ошибок.

<div id='root'></div>

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

<script type="text/babel" src="render_component.jsx"></script>










    function Welcome(props) {
    return <h1>Привет, {props.name}</h1>;
    }

    const element = <Welcome name="Алиса" />;
    ReactDOM.render(
      element,
      document.getElementById('root')
    );

В результате я хочу вывести в браузер сообщение Привет, Алиса Пример был взят из официальной документации React Суть вопроса: как грамотно отрендерить jsx код, возможно надо подключить что-то или подправить

Answer 1

Проще всего создать проект испльзуя create-react-app. В терминале необходимо запустить:

npx create-react-app my-app
cd my-app
npm start

И в App.js написать:

import React from "react";

const App = () => {
  return (
    <div>
      <Welcome name="Alise" />
    </div>
  );
};

function Welcome(props) {
  return <h1>Привет, {props.name}</h1>;
}

export default App;

БЛОГ НА HUSL

Проблема рендеринга компонента React

Ответы (1 шт):