Подключаем 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 1yr ago
Copy link
Contents
index.html