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

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

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

Так как в современном js "рулят" модули и различного рода преобразования/сжимания и так далее - *react* отлично дружит с *webpack*, *babel* и прочими. Для простоты, мы начнем работать с реактом, как с обычной библиотекой, например, jQuery, но затем перейдем на удобный инструмент - [create-react-app](https://github.com/facebook/create-react-app).

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

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

## index.html

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

*index.html*

```jsx
<!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.

![](/files/-LvLnSryJj7vppo1JYfn)

[Исходный код](https://github.com/maxfarseer/react-course-ru-v2/tree/chp1-add-script-react) для данного раздела.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://max-frontend.gitbook.io/react-course-ru-v2/chapter1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
