Подключаем react как script

React.js это всего лишь библиотека. Не фреймворк.

Как и любая другая библиотека, реакт добавляется на страницу с помощью тэга script.

Так как в современном js "рулят" модули и различного рода преобразования/сжимания и так далее - react отлично дружит с webpack, babel и прочими. Для простоты, мы начнем работать с реактом, как с обычной библиотекой, например, jQuery, но затем перейдем на удобный инструмент - create-react-app.

Cоздайте следующие файлы в директории с вашим проектом.

+-- .gitignore (если будете использовать git)
+-- index.html

index.html

В мире программирования, каждый урок начинается с hello, world.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React [RU] Tutorial</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <!-- Не используйте это в production -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>

  </body>
</html>

Во-первых, мы подключили библиотеки react и react-dom как обычные скрипты

Во-вторых, мы подключили babel библиотеку, для того, чтобы наша строка

<h1>Привет, мир!</h1>,

которая написана на вспомогательном языке JSX, превратилась в валидный javascript-код:

React.createElement("h1", null, "Hello, world!"),

На протяжении всего туториала мы будем использовать JSX.

Исходный код для данного раздела.

PreviousОт автораNextСоздание компонента

Last updated