Подключаем react как script
Подключение react'a с помощью тэга script
React.js это всего лишь библиотека. Не фреймворк.
Как и любая другая библиотека, реакт добавляется на страницу с помощью тэга script.
Так как в современном js "рулят" модули и различного рода преобразования/сжимания и так далее - react отлично дружит с webpack, babel и прочими. Для простоты, мы начнем работать с реактом, как с обычной библиотекой, например, jQuery, но затем перейдем на удобный инструмент - .
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/[email protected]/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.
для данного раздела.
