Основы React: начало работы

Чтобы использовать React в вашем новом проекте, загрузите два скрипта React с внешнего сайта unpkg.com:

react — это основная библиотека React.
react-dom предоставляет DOM-специфичные методы, позволяющие использовать React с DOM.

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script type="text/javascript">
      const app = document.getElementById('app');
      const header = document.createElement('h1');
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
      header.appendChild(headerContent);
      app.appendChild(header);
    </script>
  </body>
</html>

Вместо прямого манипулирования DOM с помощью чистого JavaScript удалите добавленные ранее DOM-методы и используйте метод ReactDOM.createRoot(), чтобы выбрать конкретный DOM-элемент и создать корень для отображения ваших React-компонентов. Затем добавьте метод root.render() для рендеринга вашего React-кода в DOM.

Это укажет React отрендерить наш заголовок <h1> внутри элемента #app.

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script>
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

Если вы попытаетесь запустить этот код в браузере, то получите синтаксическую ошибку:

Terminal

Uncaught SyntaxError: expected expression, got '<'

Это происходит потому, что <h1>...</h1> не является валидным JavaScript. Этот фрагмент кода — JSX.

Что такое JSX?

JSX — это расширение синтаксиса JavaScript, которое позволяет описывать пользовательский интерфейс с помощью знакомого HTML-подобного синтаксиса. Преимущество JSX в том, что, помимо соблюдения трех правил JSX, вам не нужно изучать никаких новых символов или синтаксиса, кроме HTML и JavaScript.

Но браузеры не понимают JSX из коробки, поэтому вам понадобится JavaScript-компилятор, такой как Babel, чтобы преобразовать ваш JSX-код в обычный JavaScript.

Добавление Babel в проект

Чтобы добавить Babel в ваш проект, скопируйте и вставьте следующий скрипт в файл index.html:

index.html

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Кроме того, вам нужно указать Babel, какой код преобразовывать, изменив тип скрипта на type=text/jsx.

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Скрипт Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const domNode = document.getElementById('app');
      const root = ReactDOM.createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

Чтобы убедиться, что всё работает правильно, откройте HTML-файл в браузере.

Сравните декларативный React-код, который вы только что написали:

index.html

<script type="text/jsx">
  const domNode = document.getElementById("app")
  const root = ReactDOM.createRoot(domNode);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

с императивным JavaScript-кодом из предыдущего раздела:

index.html

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

Вы можете заметить, как использование React позволяет сократить количество повторяющегося кода.

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

Дополнительные ресурсы:

Вам не нужно точно знать, как React обновляет UI, чтобы начать его использовать, но если вы хотите узнать больше, вот несколько полезных материалов:

Деревья UI

Написание разметки с JSX

Разделы react-dom/server в документации React.

Необходимый JavaScript для React

Хотя вы можете изучать JavaScript и React одновременно, знание JavaScript может облегчить процесс изучения React.

В следующих разделах вы познакомитесь с некоторыми основными концепциями React с точки зрения JavaScript. Вот краткий обзор тем JavaScript, которые будут упомянуты:

Хотя этот курс не углубляется в JavaScript, рекомендуется быть в курсе последних версий JavaScript. Но если вы пока не чувствуете себя уверенно в JavaScript, не позволяйте этому помешать вам начать создавать проекты с React!

Начало работы с React

Что такое JSX?

Добавление Babel в проект

Необходимый JavaScript для React

On this page