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

React.js это всего лишь библиотека. Не фреймворк.
Как и любая другая библиотека, реакт добавляется на страницу с помощью тэга script.
Так как в современном js "рулят" модули и различного рода преобразования/сжимания и так далее - react отлично дружит с webpack, babel и прочими. Для простоты, мы начнем работать с реактом, как с обычной библиотекой, например, jQuery, но затем перейдем на удобный инструмент - create-react-app.
Cоздайте следующие файлы в директории с вашим проектом.
1
+-- .gitignore (если будете использовать git)
2
+-- index.html
Copied!
index.html
В мире программирования, каждый урок начинается с hello, world.
index.html
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>React [RU] Tutorial</title>
6
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
7
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
8
​
9
    <!-- Не используйте это в production -->
10
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
11
  </head>
12
  <body>
13
    <div id="root"></div>
14
    <script type="text/babel">
15
​
16
      ReactDOM.render(
17
        <h1>Hello, world!</h1>,
18
        document.getElementById('root')
19
      );
20
​
21
    </script>
22
​
23
  </body>
24
</html>
Copied!
Во-первых, мы подключили библиотеки react и react-dom как обычные скрипты
Во-вторых, мы подключили babel библиотеку, для того, чтобы наша строка
1
<h1>Привет, мир!</h1>,
Copied!
которая написана на вспомогательном языке JSX, превратилась в валидный javascript-код:
1
React.createElement("h1", null, "Hello, world!"),
Copied!
На протяжении всего туториала мы будем использовать JSX.
​Исходный код для данного раздела.

От автора

Создание компонента

Last modified 2yr ago

Copy link

Contents

index.html