Теги

Комментарии ()

    +
    T
    >

    React > Hello world

    /* Превью

    Минимальная инфа для старта сайта на рекат

    */

    Что за хрень React

    JavaScript библиотека, для разрабокти

    Подключаем

    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

    Пишем код

    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }
    
    function App() {
      return (
        <div>
          <Welcome name="Sara" />
          <Welcome name="Cahal" />
          <Welcome name="Edite" />
        </div>
      );
    }
    
    ReactDOM.render(<App />, document.getElementById('react_blyat'));
    

    Выводим

    Добавляем в html блок #react_blyat и туда выльется вся магия React'а

    <div id="react_blyat"></div>

    В итоге на странице будет следующий html код

    <div id="react_blyat">
      <div>
        <h1>Hello, Sara</h1>
        <h1>Hello, Cahal</h1>
        <h1>Hello, Edite</h1>
      </div>
    </div>